Namespacing CSS for legacy browser support

[jbuckner]

We recently relaunched our home page with Lit and are using the @webcomponentsjs/webcomponentjs polyfill to help with older browser support. When the polyfill (ShadyCSS I believe?) flattens the DOM, the styles that were once encapsulated in the component's ShadowDOM become global and cause all sorts of UI issues.

One thing I was thinking that would help with it is name spacing the css in the components, for instance, this:

@customElement('my-component')
export class MyComponent extends LitElement {
  static get styles() {
    return css`
      h1 { color: green }
    `;
  }
}

would become this:

static get styles() {
  return css`
    my-component h1 { color: green }  // prefixed with the component name
  `;
}

I don't want to do the manually for each component so my question was.. is anyone aware of any tools out there that I could integrate into my build process to namespace the styles for a particular component?

[jbuckner]

ShadyCSS was actually working correctly, but we didn't have the polyfill-support.js library loaded. We added the polyfill-support.js library and now all of the css is being scoped properly.