A Short Simple Video Explaining the Shadow DOM and Web Components

I’ve been playing around with the shadow DOM and web components, so I thought I’d put together a quick video explaining the advantages:


You can starting experimenting with these concepts today using Chrome Canary. Just make sure you enable the Shadow DOM and scoped style flags by typing “chrome://flags” into your location bar:

If you want to check out the code used in this example, you can download it here.

If you want to learn more about the shadow DOM and web components, here are the resources I used: