Web Components Club

Skip to main content

004: Shadow DOM

The shadow DOM has always sounded like some sort of superhero to me. I've totally discounted it (wrongly) as a poorly supported bleeding-edge thing, but that's certainly not the case.

While looking around for resources, I found this handy post by Eric Bidelman on the Google Developers site/blog. Instead of regurgitating what I've read, you should go ahead and read it.

The way I see it, the shadow DOM is like an iframe* , but allows a bit more access in either direction. I know that's a pretty crude summary, but I think it's actually a reasonably accurate analogy.

A quick example of what I've learned

I've made a real quick prototype that by default, will render a heading and a paragraph. If everything is supported, I change the colour of the paragraph and also render a button that's clickable.

It's a super simple prototype, but it contains:

  • Scoped styles
  • Global styles
  • Slots and "light DOM"
  • Progressive enhancement
  • CSS Custom Properties

Check out the CodePen demo: https://codepen.io/hankchizljaw/pen/ZREjYg/.

Thoughts about existing projects

I can't help but think how useful this will be for rendering components on Astrum, which I help maintain at my day job. I think that the shadow DOM and scoping can help with not just CSS, but also an Astrum component's state which we are aiming to implement after a core application rebuild.

For now, I feel pretty good about this portion of learning. I think the next steps are that I need to make something meatier with web components because I learn best by doing, rather than reading.

Stay tuned.