Inspector Web and the Mystery of the Shadow DOM

on YouTube ↗29m

" summary

Claims that Shadow DOM gives true encapsulation for reusable widgets and demonstrates it practically: use Chrome Canary with the Dimitri Glazkov polyfill, manipulate shadowRoot, content and shadow tags, and the template/is pattern to declaratively mount components. Built a news component that remixes a messy UL into separated breaking and other lists; native elements (video, input range) already use nested shadow DOMs. Works as a live prototype but creation is experimental in browsers and needs polyfills for production use.

AI-written summary · about

" chapters (18)

1. 0:00Start
2. 1:01How Do We Currently Build Websites and Web Applications
3. 3:28Shadow Dom
4. 4:10The Web Inspector
5. 5:34Nested Shadow Dom
6. 6:19Create Minimal Shadow
7. 9:18Content Tag
8. 12:00Tags Template and Elements
9. 12:52Comment Template
10. 14:38Custom Html Element
11. 15:50Custom Element
12. 16:35Extending the Unordered List
13. 17:40How Does the Browser Know Which Elements To Put In in each Div and each Unordered List
14. 18:14The Select Attribute
15. 20:58Css Selectors and Specificity
16. 21:25Apply Author Styles
17. 21:56Reset Style Inheritance
18. 24:51Webkit Prefix Tiles

" related talks

• 06mUnlocking the Power of Shadow DOMAnkit Gupta · Conf42 JavaScript 2023
• 13mGhost in the Shadow DOMRyan Seddon · Web Directions Code 2013
• 32mFuture CSS in Web ComponentsPeter Gasston · CSSConf EU 2013
• 42mWeb components and the future of web developmentVarunkumar Nagarajan · Meta Refresh 2013
• 36mWeb components - A whirlwind tour thru the future of the webMartin Naumann · FutureJS 2014
• 42mThe Good, The Bad, The Web ComponentsZach Leatherman · SmashingConf Freiburg 2023
• 42mWorking in the Shadow (DOM) - How to test Web ComponentsDavid Burns · Selenium Conf 2022
• 29mBreak out from the framework: Web Components to the rescueMassimo Artizzu · Intersection Conference 2023