Simply sharing external stylesheets between DOM and Shadow DOMs

[mangelozzi]

This is a proposal.

Native Web components with the shadowRoot are a fantastic feature for encapsulation. Although some styles one wishes to encapsulate, there are 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 for the main page, 3 times for the buttons, 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 simple/perfomant as something like this (not proposing exactly this, just the concept, similar syntax to @layer):

@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. Leverage the exiting styling conventions.
• 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, it will have to be downloaded once, then javascript executed to apply styles (worse performance than the usual cached external stylsheet).
• However, if I link it to the stylesheet from the main DOM (for speed), and then use a constructable stylesheet for the Shadow DOMs then I would think it's downloaded twice.
• Constructable stylesheet removes support for @import, making it only suitable for inline shippets of CSS.

Any thoughts on the matter?

[tabatkins]

The "multiple downloads" thing isn't problematic if you use appropriate caching headers - only the first request will actually download, and the rest will fetch from cache. (You'll want to do this anyway, so repeated visits to your page don't trigger unneeded downloads.)

Additionally, browsers have internal heuristics for avoiding repeated parsing work when given the same stylesheet multiple times, and definitely apply it in cases like this. (If you use an inline style element in your shadows, for example, it'll only get parsed the first time, and the result reused for later components. I think they even literally share the stylesheet object with copy-on-write semantics.)

That previous paragraph is heuristic, tho; if you want to ensure a single download and parse, yeah, using constructable stylesheets is currently the way to go.