Support shadow DOM with host stylesheets

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
• https://github.com/lit/lit/issues/3541
• https://github.com/webcomponents/polyfills/tree/master/packages/shadycss

Start by reviewing how the project currently creates web components and how LitElement.sheets handles host document stylesheets, then consult the linked Lit and ShadyCSS resources. Done means a LitElement subclass copies the host stylesheets into the shadow DOM so SUI styles and child slotting work as expected.