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.