Theming through the shadow boundary with custom properties
The page's custom property --chip-bg and the inherited color both pass into the shadow root. Ordinary selectors from the page don't.
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
Default rgb(220, 240, 240) rgb(40, 40, 40)
Themed rgb(255, 228, 196) rgb(40, 40, 40)