Ghost in the Shadow DOM
summary
Shadow DOM provides true DOM encapsulation in Chrome via webkitShadowRoot and the content tag for node distribution, letting a component inject its own <style> and custom pseudo elements (must start with x-) without leaking styles. The demo builds a slider that distributes three images into template slots, uses :host and a webkit distributed selector to style distributed H1s, works in Chrome (Canary/Stable confusion noted) and via a polyfill for ES5 browsers but has lingering bugs.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:09Shadow DOM overview
- 3:01Basic Shadow DOM setup
- 4:26Content tags for distribution
- 5:51Styling inside and outside
- 8:47Distributed nodes limitations
- 10:31Advanced slider example
- 11:55When to use Shadow DOM
- 12:15Further resources
related talks
29mInspector Web and the Mystery of the Shadow DOM
51mShining Light on the Shadow DOM
06mUnlocking the Power of Shadow DOM
32mFuture CSS in Web Components
42mThe Good, The Bad, The Web Components
16mWeb Components
42mI Don’t Need No Stinkin’ Framework - Mastering Shadow DOM
42mWeb components and the future of web development