Chapter quiz · Components & Templating

Test what you learned.

8 questions on Components & Templating. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Components & Templating — Chapter Quiz

Eight questions on props, slots, conditionals, lists, styling.

0/ 8

Question 1
1
How do you receive props in an Astro component?
Afunction Comp(props) { ... }Bconst { x } = Astro.props; in the frontmatterC@props { x }Dthis.props.x
Astro components are file-shaped, not function-shaped. Props arrive on Astro.props. Typing with interface Props is conventional.
Question 2
2
Astro requires key={...} when rendering lists.
TTrueFFalse
Astro renders to plain HTML with no virtual DOM — keys aren't needed. If the .map() is inside a React/Vue/Svelte island, that framework's key rules still apply within IT.
Question 3
3
To inject pre-rendered HTML safely, use…
A{html}Bset:html={html}CdangerouslySetInnerHTMLD{@html ...}
set:html renders raw HTML. NEVER use it for user-supplied strings — that's an XSS vector. For trusted content like pre-rendered Markdown, it's fine.
Question 4
4
A component has <slot name="header" />. The caller fills it with…
A<MyComp header={<h2>Hi</h2>} />B<h2 slot="header">Hi</h2> inside <MyComp>C<header><h2>Hi</h2></header>DEither a or b
Named slots are filled with slot="name" on the elements placed inside the component.
Question 5
5
What's the rendered class on the button?
```
---
const big = true;
const danger = false;
---
<button class:list={["btn", big && "btn--lg", danger && "btn--danger"]}>OK</button>
```
AbtnBbtn btn--lgCbtn btn--lg btn--dangerDbtn,btn--lg
class:list keeps truthy items and joins with spaces. danger && "btn--danger" is false, so it's dropped.
Question 6
6
Component-scoped styles automatically apply to elements rendered by child components.
TTrueFFalse
Scoped CSS only matches elements in the file it lives in. To reach into a child, use :global(...) or have the child accept a class prop you can target.
Question 7
7
How do you write an HTML attribute that's dynamic?
A<a href="{url}">B<a href={url}>C<a :href="url">D<a v-bind:href="url">
attribute={expr} (no quotes) is the dynamic form. Quotes around {url} would make it a literal string.
Question 8
8
To make a <style> block apply globally, add the directive is:_______.
<style is:global> opts out of Astro's scoping — useful for design tokens, resets, and typography.