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.