I Don’t Need No Stinkin’ Framework - Mastering Shadow DOM

on YouTube ↗42m

" summary

Builds a working blink component using plain ES6: a class that extends HTMLElement, attaches an open shadow DOM, uses slots for injected content, imports component CSS via @import, and toggles animation with a button. Exports as a module, publishes to NPM (retroblink) and GitHub, and demos in Chrome; works in Angular/React/Vue with a trivial import or schema tweak. Notes: IE11 unsupported, module imports require HTTP/HTTPS, deprecated deep selectors are unsafe, and component styling and IDs remain fully encapsulated by the shadow root.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 0:47Martine Dowden
3. 3:16Shadow DOM
4. 24:31Shadow Piercing Combinators
5. 35:37Shadow Tree

" related talks

• 20mBringing Back the Blink TagMartine Dowden · AntarctiConf 2020
• 29mBreak out from the framework: Web Components to the rescueMassimo Artizzu · Intersection Conference 2023
• 32mRise above the FrameworkMike Hartington · JSCamp 2018
• 37mThe world of Web ComponentsNishu Goel · AzConf 2020
• 36mBuilding framework agnostic UI with Web ComponentsPiotr Nalepa · 4Developers Katowice 2019
• 29mInspector Web and the Mystery of the Shadow DOMAngelina Fabbro · JSConf EU 2012
• 43mFrameworks and the Future of the Web PlatformRob Wormald · BuzzJS 3.1 2018
• 01h 18mA Deep Look At Angular ElementsManfred Steyer · ng-conf 2019