# Eschewing Shadow DOM

DevFeed: [Eschewing Shadow DOM](<https://devfeed.tech/articles/eschewing-shadow-dom-31224.md>)

Original publisher: [Read original article](<https://every-layout.dev/blog/eschewing-shadow-dom/>)

Author: Heydon Pickering

Published: 2019-06-14T00:00:00Z

Content type: article

Language: en

Sources: [The Every Layout Blog](<https://devfeed.tech/sources/the-every-layout-blog.md>)

Topics: [Web Components](<https://devfeed.tech/topics/web-components.md>), [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [React](<https://devfeed.tech/topics/react.md>), [styled-components](<https://devfeed.tech/topics/styled-components.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [custom](<https://devfeed.tech/tags/custom.md>), [element](<https://devfeed.tech/tags/element.md>), [react](<https://devfeed.tech/tags/react.md>), [styled-components](<https://devfeed.tech/tags/styled-components.md>)

## AI overview

An examination of styling problems encountered with Shadow DOM, including inconsistent universal styles, limited inheritance, slot restrictions, and specificity issues. The author proposes an experimental alternative for web components that namespaces and embeds prop-derived instance styles in the document head.

## Source excerpt

Regarding styling, Shadow DOM is really good at one thing: preventing per-component styles from leaking out and affecting other parts of the document. Unfortunately, Shadow DOM also has a very opinionated way of preventing styles being applied from the parent document. Here is a roundup of the quirks and associated issues I've encountered: Shadow DOM styling issues Universal styles Some universal styles (using the * selector) are applied, and others are not. The color property appears to pierce shadow boundaries, but I've had no luck with box-sizing. Having to set box-sizing: border-box for each component is redundant. Inheritance Document styles are inherited in Shadow DOM. But inheritance only gets you so far, especially since not all properties are inheritable by default anyway. I've tried hacking things together with the explicit inherit keyword, but that seems to have no effect. Using the following is no good, because it forces every node to inherit every property from the parent. If <my-component> had display: flex applied, every one of the component's descendants would adopt it. * { all: inherit; /* yikes */ } Slot restrictions For performance reasons, the ::slotted() selector, which allows you to style the Light DOM content of your component from within your Shadow DOM, only lets you affect child elements and not descendants at depth. This is a bit restrictive. Worse, you cannot seem to use sibling combinators like + or ~. None of the following works: ::slotted(*) + * /* Nope */ ::slotted(* + *) /* Nope */ ::slotted(*) + ::slotted(*) /* Nope */ Specificity In making layout components, I like to take a progressive approach: style the component and its Light DOM nodes in my document stylesheet, then enhance with instance-specific styles via props (attributes) in Shadow DOM. For a component instance that looks like this... <my-component itemWidth="10rem"></my-component> ...I would apply the itemWidth value in the Shadow DOM using interpolation: ` <style> ::slot