Unlocking the Power of Shadow DOM

on YouTube ↗06m

" summary

Defines Shadow DOM as encapsulation used by YouTube, Google Maps and Material UI and shows concrete code: uses attachShadow on a custom element, builds a button inside a shadow root, and toggles closed vs open modes. Demonstrates that open shadow roots are reachable via document.getElementById(...).shadowRoot.querySelector and can have styles changed to green while closed roots throw cannot read property errors and remain blue, proving encapsulation works. Also shows React use on refs and Angular component encapsulation.

AI-written summary · about

" chapters (9)

1. 0:00intro
2. 0:22preamble
3. 0:34what we will cover
4. 0:53what is shadow dom
5. 1:37popular apps using shadow dom
6. 1:59reactjs
7. 2:15angular
8. 2:33demo
9. 5:28thank you

" related talks

• 29mInspector Web and the Mystery of the Shadow DOMAngelina Fabbro · JSConf EU 2012
• 51mShining Light on the Shadow DOMCassondra Roberts · CSS Day 2023
• 42mWorking in the Shadow (DOM) - How to test Web ComponentsDavid Burns · Selenium Conf 2022
• 13mGhost in the Shadow DOMRyan Seddon · Web Directions Code 2013
• 42mI Don’t Need No Stinkin’ Framework - Mastering Shadow DOMMartine Dowden · NDC Sydney 2019
• 32mFuture CSS in Web ComponentsPeter Gasston · CSSConf EU 2013
• 29mBreak out from the framework: Web Components to the rescueMassimo Artizzu · Intersection Conference 2023
• 26mThe complementarity of React and Web ComponentsAndrew Rota · React.js Conf 2015