Summary
Encapsulated DOM + scoped CSS — internals hidden from document.querySelector. Slots project light DOM children. Event retargeting affects delegation — clicks appear from host. Design systems use shadow for widget isolation; test a11y tree exposure.
Code example
class Tooltip extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = '<slot></slot><span part="tip"></span>';
}
}
customElements.define('app-tooltip', Tooltip);
Key points
- Encapsulated DOM + scoped CSS — internals hidden from
document.querySelector. - Slots project light DOM children.
- Event retargeting affects delegation — clicks appear from host.
- Design systems use shadow for widget isolation; test a11y tree exposure.