Chapter 10. Shadow CSS rough edges
This chapter covers
- The widely unsupported :host-context() selector
- The deprecated ::shadow and /deep/ Shadow DOM CSS selectors
- CSS Variables
- Polyfilling the Shadow DOM
- Design systems
In the last two chapters, I painted a fairly rosy picture of the Shadow DOM. Don’t worry, I won’t take it back! As amazing as the Shadow DOM is, though, there are some caveats you should know about. Unfortunately, these caveats are likely the most confusing part of Web Components. Between deprecated features, features that lack support in certain browsers, or just needing to know how to navigate browsers that don’t support the Shadow DOM at all, it can all be a bit tricky.
The first rough edge to get to know is the :host-context() selector. It’s not deprecated per se—it’s just not supported in any browser except Chrome. Also, it gets a little worse. Webkit/Safari stated back in 2016 that they will never support it because they claim it’s an anti-pattern (https://bugs.webkit.org/show_bug.cgi?id=160038). The folks at Firefox likewise feel that it’s not a great thing to implement in the Gecko engine because of the performance implications. Firefox has opened up a ticket (https://github.com/w3c/csswg-drafts/issues/1914) on the W3C specification that wonders what the best course of action is with a nod to the Chrome/Blink code base, pointing out the performance tradeoffs on their side.