WEB.19.01 Mid-level

Custom elements and shadow DOM + Declarative shadow DOM, forms and frameworks

Comes up in: Web fundamentals, Frontend system design

This concept is being written. It gets the full five steps — explanation, predict, interview angle, practice with tests, and review cards. Here is exactly what it will cover, so you can study it elsewhere in the meantime.

What it covers

customElements.define
lifecycle callbacks
attributes vs properties
shadow DOM encapsulation
slots
::part and custom properties for styling
events across the shadow boundary (composed)
declarative shadow DOM for SSR
form-associated custom elements (ElementInternals)
accessibility across shadow roots
using web components in React 19 (properties and events support)

Words you will know

custom elementshadow DOMslot::partdeclarative shadow DOMElementInternals

What you will practise

<star-rating> component
form-associated input element

Interview questions this answers

What are web components? When would you use them over a framework component?
What does shadow DOM encapsulate and what leaks through?
How do you style a component inside a shadow root from outside?
Can web components be server-rendered?