template, named slots and a composed event
The event started on the shadow button, but the document listener sees e.target as <info-card>: retargeting hides the component's insides. Remove the last line and press Close yourself.
Web Components let you make your own HTML tags: a custom element is a class the browser runs for your tag, shadow DOM gives it private markup and styles, and <template> with <slot> lets page authors pass content into it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a <click-counter> element that shows a button in its shadow DOM and counts clicks, starting from its start attribute (default 0).
Make <click-counter> dispatch a composed count-change event with the new count in detail, and log it from the page.
Explain it without notes
What are the three parts of Web Components and what does each do?
List the custom element lifecycle callbacks and what you should do in each.
How do styles work across the shadow boundary?
How does a component send data out to the page, and what is event retargeting?
Preview
Console
Nothing logged yet.Expected console output
title [ <span> ]
[ <p> ]
closed: button <info-card>