Topic

Shadow DOM & Web Components

Encapsulation, slots, custom elements, style scoping, and the composed tree vs. DOM tree.

web-componentsshadow-dom

HTML

sample

<fancy-card><span slot="title">Shadow DOM</span></fancy-card>

CSS

sample

fancy-card { display: block; }

JavaScript

sample

class FancyCard extends HTMLElement { constructor(){ super(); const shadow = this.attachShadow({mode:'open'}); shadow.innerHTML = '<slot name="title"></slot><slot></slot>'; } } customElements.define('fancy-card', FancyCard);

Visualizer

Shadow DOM

Slots and composed trees.

Visualizer

Shadow DOM

Slots, host, and shadow root. Observe composed tree vs. light DOM.

live

Controls

Visualization

Shadow root (open)

<slot name="title">
<slot name="default">

Composed tree merges light DOM nodes into slots; events retarget at the shadow boundary.

Why this matters

Connect the dots between specs (HTML, CSS, WebIDL) and engine behaviors (parser, layout, GPU). Use the sandbox to reproduce each step with your own snippets.