Summary - Component library skeleton

Write a card and modal skeleton with all web component techniques.

Summary: Combine the techniques

In this group you learned custom element naming, slot distribution, declarative shadow DOM, form association and accessibility roles. Now we'll combine them all into a <modal-dialog> skeleton.

The skeleton carries: a valid custom element name, an SSR-friendly <template shadowrootmode="open">, named and default slots inside it, title and body distributed from outside, and role="dialog" with aria-modal="true" for accessibility. All in one place.

Exercise Write a modal skeleton combining all techniques

Write a <modal-dialog> element. Its opening tag should carry role="dialog", aria-modal="true" and aria-label (non-empty). Inside:

A <template shadowrootmode="open"> with a <slot name="title"> and a default <slot> inside
Outside the template but inside modal-dialog, an <h2 slot="title"> with non-empty content
A <p> with non-empty content (goes to the default slot)
End with the </modal-dialog> closing tag

Show example solution

<modal-dialog role="dialog" aria-modal="true" aria-label="Confirmation window">
  <template shadowrootmode="open">
    <h2>Window title</h2>
    <slot name="title"></slot>
    <slot></slot>
  </template>
  <h2 slot="title">Delete record</h2>
  <p>Are you sure you want to delete this record?</p>
</modal-dialog>

Test yourself

Match each technique to its purpose

shadowrootmode

SSR-friendly shadow DOM
slot

Distribute outer content
form

Bind outer form
role

Set accessible role

Complete the modal accessibility attribute

<modal-dialog role="dialog" ____="true" aria-label="Confirmation window"><p>Delete record</p></modal-dialog>

Show answer

<modal-dialog role="dialog" aria-modal="true" aria-label="Confirmation window"><p>Delete record</p></modal-dialog>

When shadow DOM and slot are used together in a modal, which is true?
```
<modal-dialog>
  <template shadowrootmode="open">
    <slot name="title"></slot>
  </template>
  <h2 slot="title">Title</h2>
</modal-dialog>
```
- Slot content is copied into shadow DOM
- Only shadow DOM is shown, the slot is ignored
- The slot takes outside content; shadow DOM hides the skeleton
- Slot and shadow DOM clash and the content is lost
Show answer

The slot takes outside content; shadow DOM hides the skeleton — Correct. Shadow DOM hides the skeleton; the slot distributes outside content into the right position.

Next lesson: Challenge - Accessible dialog

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies