[csswg-drafts] Simply sharing external stylesheets between DOM and Shadow DOMs (#8112)

mangelozzi has just created a new issue for https://github.com/w3c/csswg-drafts:

== Simply sharing external stylesheets between DOM and Shadow DOMs ==
This is a proposal.

Native Web components with the `shadowRoot` are a fantastic feature for encapsulation. However although some styles one wishes to encapsulate, some styles one would like to pierce the shadow DOM.

I have a shared external CSS stylesheet to ensure a constant look/feel of all components. 
I use an external stylesheet in my component, unfortunately that means every stamped out component must re-download the stylesheet. Say I have 3 x `<my-button>`, and 20 x `<my-link>` on a page, that means the stylesheet will be downloaded/parsed once of the main page, 3 times for button, and 20 times for the links, a total of 24 times.

I have looked into constructable style sheets, but I don't think its as good as a simple solution, something like (not proposing exactly this, just the concept, similar syntax to `@layer`):
```css
@pierce {
   /* These styles apply to the usual DOM and pierce the shadow DOM */
  * {
      border-width: 2px;
  }
}
```

Some of my thoughts/assumptions about it:

- The advantage of this approach is the styles can be placed in an external stylesheet, downloaded once, parsed and cached in memory so its super fast.
- Its simple and declarative. I havent completely wrapped my heading around constructable stylesheets.
- If I wish to use the same stylesheet in the DOM and a shadow DOM with constructable stylesheets, will it have to be downloaded once, then javascript executed to apply styles? (worse performance than the usual cached external stylsheet).
   - If I link it to the stylesheet from the main DOM, and then use a constructable stylesheet for the Shadow DOMs then it's downloaded twice.

Any thoughts on the matter?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8112 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 21 November 2022 10:34:20 UTC