Search code examples
javascriptcssweb-componentlit

lit styles when render root is lightdom

So I have the following styles:

  static styles = [css, icons];

Then I set the renderRoot to lightdom:

protected createRenderRoot(): Element | ShadowRoot {
    return this;
}

With this the style is not applied and I have to manually add:

render() {
  return html`
 <style>
       ${css.cssText}
       ${icons.cssText}
 </style>

If I remove the createRenderRoot, the styles work without setting the <style> tag in the render function.

Can anyone tell me what I've done wrong? Or why this is happening?

Solution

  • The default behavior of lit's createRenderRoot is to create a shadow root and add the styles set in the static styles property to said shadow root.

    So, when you override createRenderRoot to use this as the root (ergo, not use shadow DOM at all) you are also removing the code that would add the styles too.

    The main reason for this is that styles can only be scoped if they're inside shadow DOM. Adding them to a custom element not using shadow DOM would also make those styles apply to any other node that matched the CSS selectors used.

    This basically leaves you with two options:

    1. Keep using only light DOM and move your styles to global stylesheets in a CSS file.
    2. Use shadow DOM

    More info: https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot