Leverage the pattern of "Constructable Stylesheet Objects" for shared CSS

[theengineear]

The general spec lives here: https://wicg.github.io/construct-stylesheets/#proposed-solution

Here's a Google article on it: https://developers.google.com/web/updates/2019/02/constructable-stylesheets

Here's how LitElement incorporates it: https://lit-element.polymer-project.org/guide/styles#static-styles Something to keep an eye on!

Here's the motivation section from that spec for reference:

Most web components uses Shadow DOM. For a style sheet to take effect within the Shadow DOM, it currently must be specified using a style element within each shadow root. As a web page may contain tens of thousands of web components, this can easily have a large time and memory cost if user agents force the style sheet rules to be parsed and stored once for every style element. However, the duplications are actually not needed as the web components will most likely use the same styling, perhaps one for each component library.

Some user agents might attempt to optimize by sharing internal style sheet representations across different instances of the style element. However, component libraries may use JavaScript to modify the style sheet rules, which will thwart style sheet sharing and have large costs in performance and memory.

Food for thought:

// Helper method to create a stylesheet to be included via adoptedStylesheets.
static createStyleSheet(string) {
  const styleSheet = new CSSStyleSheet();
  styleSheet.replaceSync(string);
  return styleSheet;
}

[theengineear]

See #33.

[theengineear]

Now that “Import Attributes” is available — we really just need to add some ergonomics to declaring an array of style-sheets to be adopted upon initialization.