Ahoy, me celestial companions of coding! It be me, your humble gentlenaut of fortune, Cosmo, at ye service.
( An’ perhaps to some snooty static site scallywags an Ex-Sailor of the Astro Expanse... )
So, y’ think ye know Astro, do ye? Aye, then consider this cosmic challenge from ye ol’ quainty matey, Cosmo.
I will asks my riddles. Ye will gives ye answers.
But be warned! This be a quiz only for those who claim or wish to be experts in the syntax of Astro.
( An' then any all else who 'as too much time on their 'ands... )
---
const x = 'b'
---
<x>hi</x>- A.:
<x>hi</x> - B.:
<b>hi</b> - C.:
<x>hix> - D.: It throws.
---
const X = 'b'
---
<X>hi</X>- A.:
<X>hi</X> - B.:
<b>hi</b> - C.:
<X>hiX> - D.: It throws.
---
const X = { Y: 'b' }
---
<X.Y>hi</X.Y>- A.:
<X.Y>hi</X.Y> - B.:
<b>hi</b> - C.:
<X.Y>hiX.Y> - D.: It throws.
---
const _ = 'b'
---
<_>hi</_>- A.:
<_>hi</_> - B.:
<b>hi</b> - C.:
<_>test_> - D.: It throws.
---
const $ = 'b'
---
<$>hi</$>- A.:
<$>hi</$> - B.:
<b>hi</b> - C.:
<$>hi$> - D.: It throws.
---
const $ = { Y: 'b' }
---
<$.Y>hi</$.Y>- A.:
<$.Y>hi</$.Y> - B.:
<b>hi</b> - C.:
<$.Y>hi$.Y> - D.: It throws.
The Aria-Hidden Attribute
<b aria-hidden>hi</b>- A.:
<b aria-hidden>hi</b> - B.:
<b aria-hidden=true>hi</b> - C.:
<b aria-hidden="true">hi</b> - D.: It throws.
The Aria-Hidden Attribute ala Component
---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden>hi</Bold>- A.:
<b aria-hidden>hi</b> - B.:
<b aria-hidden="true">hi</b> - C.:
<b aria-hidden=true>hi</b> - D.: It throws.
The Aria-Hidden Boolean Attribute
<b aria-hidden={true}>hi</b>- A.:
<b aria-hidden>hi</b> - B.:
<b aria-hidden="true">hi</b> - C.:
<b aria-hidden=true>hi</b> - D.: It throws.
The Aria-Hidden Boolean Attribute ala Component
---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden={true}>hi</Bold>- A.:
<b aria-hidden>hi</b> - B.:
<b aria-hidden="true">hi</b> - C.:
<b aria-hidden=true>hi</b> - D.: It throws.
The Aria-Hidden Boolean False Attribute
<b aria-hidden={false}>hi</b>- A.:
<b>hi</b> - B.:
<b aria-hidden="false">hi</b> - C.:
<b aria-hidden=false>hi</b> - D.: It throws.
The Aria-Hidden Boolean False Attribute ala Component
---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden={false}>hi</Bold>- A.:
<b>hi</b> - B.:
<b aria-hidden="false">hi</b> - C.:
<b aria-hidden=false>hi</b> - D.: It throws.
The Aria-Hidden Empty String Attribute
<b aria-hidden="">hi</b>- A.:
<b aria-hidden>hi</b> - B.:
<b aria-hidden="">hi</b> - C.:
<b aria-hidden="true">hi</b> - D.:
<b aria-hidden=true>hi</b> - E.: It throws.
The Aria-Hidden Empty String ala Component
---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden="">hi</Bold>- A.:
<b aria-hidden>hi</b> - B.:
<b aria-hidden="">hi</b> - C.:
<b aria-hidden="true">hi</b> - D.:
<b aria-hidden=true>hi</b> - E.: It throws.
<b quote='"oh"'>hi</b>- A.:
<b quote='"oh"'>hi</b> - B.:
<b quote="'oh'">hi</b> - C.:
<b quote='"oh"'>hi</b> - D.:
<b quote='"oh"'>hi</b> - E.: It throws.
<b quote="'oh'">hi</b>- A.:
<b quote='"oh"'>hi</b> - B.:
<b quote="'oh'">hi</b> - C.:
<b quote=''oh''>hi</b> - D.:
<b quote='"oh"'>hi</b> - E.: It throws.
---
const cool = 'cool'
---
<b {cool}>hi</b>- A.:
<b {cool}>hi</b> - B.:
<b cool="cool">hi</b> - C.:
<b cool="[string String]">hi</b> - D.: It throws.
---
const cool = { be: 'cool' }
---
<b {cool}>hi</b>- A.:
<b {cool}>hi</b> - B.:
<b cool="{"be":"cool"}">hi</b> - C.:
<b cool="[object Object]">hi</b> - D.: It throws.
---
const cool = {
be: 'cool',
toString() {
return JSON.stringify(this)
}
}
---
<b {cool}>hi</b>- A.:
<b {cool}>hi</b> - B.:
<b cool="{"be":"cool"}">hi</b> - C.:
<b cool="[object Object]">hi</b> - D.: It throws.
---
const cool = {
be: 'cool',
toString() {
return 'be="excellent" to="each other"'
}
}
---
<b {cool}>hi</b>- A.:
<b {cool}>hi</b> - B.:
<b cool="{"be":"cool"}">hi</b> - C.:
<b cool="{"be":"cool"}">hi</b> - D.:
<b cool="be="excellent" to="each other"">hi</b> - E.:
<b cool="be="excellent" to="each other"">hi</b> - F.:
<b be="excellent" to="each other">hi</b> - G.:
<b cool="[object Object]">hi</b> - H.: It throws.
---
const cool = () => 'runnings'
---
<b {cool}>hi</b>- A.:
<b {cool}>hi</b> - B.:
<b cool="runnings">hi</b> - C.:
<b cool="() => "runnings"">hi</b> - D.:
<b cool="() => "runnings"">hi</b> - E.:
<b cool="[function Function]">hi</b> - F.: It throws.
---
const cool = () => 'cool=cool'
---
<b {cool()}>hi</b>- A.:
<b {cool()}>hi</b> - B.:
<b cool="cool">hi</b> - C.:
<b cool="cool=cool">hi</b> - D.:
<b cool="cool="cool"">hi</b> - E.:
<b cool="cool="cool"">hi</b> - F.:
<b cool()="cool">hi</b> - G.:
<b cool()="cool=cool">hi</b> - H.:
<b cool()=""cool"">hi</b> - I.:
<b cool()=""cool"">hi</b> - J.:
<b cool="[function Function]">hi</b> - K.: It throws.
---
const cool = () => ({
cool: 'cool',
toString() {
return 'cool=cool'
}
})
---
<b {cool()}>hi</b>- A.:
<b {cool()}>hi</b> - B.:
<b cool="cool">hi</b> - C.:
<b cool="cool=cool">hi</b> - D.:
<b cool="cool="cool"">hi</b> - E.:
<b cool="cool="cool"">hi</b> - F.:
<b cool()="cool">hi</b> - G.:
<b cool()="cool=cool">hi</b> - H.:
<b cool()=""cool"">hi</b> - I.:
<b cool()=""cool"">hi</b> - J.:
<b cool="[function Function]">hi</b> - K.: It throws.