I want the ability to create a style-permeable shadowRoot

[aarongustafson]

Creating a custom component with Shadow DOM prevents page styles from leaking into the shadow tree and component styles from leaking out. In many cases, however, the former negatively impacts the reusability of components. In order integrate a custom component using Shadow DOM into an existing page design, style properties that are not inherited across the shadow boundary must either be redeclared within the component to match the global page styles or exposed with CSS custom properties or part attributes on elements.

All of these approaches make theme-ing and consuming custom components difficult, especially when it comes to button and input elements within components. The first approach requires editing component definitions, which is not maintainable and violates the goal of encapsulation. The remaining two approaches (custom properties and parts) require the component author to explicitly declare what internals of a component may be styled using arbitrary names. Consumers must then write style rules for each of the property names for all used components and these names must be documented for each component. (Components originating from a single author may be more consistent in naming.)

Encapsulating styles so that they do not leak out of a component is generally more desirable than preventing styles from leaking in. I want to be able to specify an option when creating a shadow tree that permits global page styles to affect component children while still preventing component styles from leaking out. This can be specified alongside the "mode" option passed to attachShadow, as it effectively does the same thing for styles as "mode" does for scripting. For example, something like:

const shadow = elem.attachShadow({mode: 'open'; stylable: true});

This would allow page styles to target all elements, such as buttons, on a page, including within allowed shadow trees, with a simple element selector.

Currently, to achieve such styling and theme-ing, requires complex style rules using custom properties and, eventually, parts. When authoring custom elements, I typically avoid using shadowRoots for this reason.

---

https://webwewant.fyi/wants/5ec5ec7fea96a22a685d8c93/