Support shadow DOM with host stylesheets

[agjohnson]

Currently, all web components in the application are using light DOM instead of the shadow DOM. This means when the element is created, it uses itself as a base for all child elements, where web components through Lit and most other frameworks create a shadow DOM element and surface the child elements through the shadow DOM. This is what enables child slotting, which we currently cannot use with a light DOM approach.

There are a few ways around this, though in my quick attempts at it I have not noticed elements in the shadow DOM working as expected. These methods mostly involve copying the host document stylesheets into the LitElement.sheets property. I'm guessing this doesn't quite work due to timing and how the stylesheets are evaluated.

So, the goal will be a LitElement subclass that copies the host document stylesheets into sheets, so the elements in the custom element shadow DOM use the SUI stylesheets.

Some resources I was using:

• https://lit.dev/playground/#gist=a2647fa2d6497596de238d0802f4f6e1
• Attach Light DOM component styles to the document lit/lit#3541
• https://github.com/webcomponents/polyfills/tree/master/packages/shadycss

[agjohnson]

Also, to archive an initial attempt that didn't seem to quite work:

const promiseStyles = new Promise((resolve) => {
  // Trying on a timeout to ensure stylesheets are loaded? Probably not necessary.
  setTimeout(() => {
    const sheetsDocument = Array.from(document.styleSheets);
    const sheetsAdoptable = sheetsDocument.filter((sheet) => {
      return (sheet.href && sheet.href.endsWith("site.css"));
    }).map((sheet) => {
      const sheetAdoptable = new CSSStyleSheet();
      sheetAdoptable.replaceSync(sheet.cssRules);
      // Also tried `return sheet;` here to no effect
      return sheetAdoptable;
    });
    resolve(sheetsAdoptable);
  }, 1000);
});

/* Not quite a shadow DOM, not quite a light DOM */
class DappledDOMElement extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    promiseStyles.then((styles) => {
      // I suspect async loading of styles might not be supported. This would be easy to test without a complex stylesheet.
      this.styles = styles;
    });
  }
}