logoalt Hacker News

hunterloftis • today at 4:15 AM • 2 replies • view on HN

> It'd be perfect it just had a switch to inherit everything the page already has.

It does! <https://lit.dev/docs/components/shadow-dom/>

By default, Lit renders into shadow DOM. This carries benefits like encapsulation (including the style encapsulation you mention). If you prefer global styles, you can render into light DOM instead with that one-line switch.

However, shadow DOM is required for slotting (composing) components, so typically what I'd recommend for theming is leveraging the array option of each component's styles:

    static styles = [themeStyles, componentStyles]
Then you define your shared styles in `themeStyles`, which is shared across all components you wish to have the same theme.

Replies

gitaarik • today at 5:35 AM

I also made a simple lib to make it easy to implement common styles in your Lit components:

https://github.com/gitaarik/lit-style

g0wda • today at 4:28 AM

oh nice! I didn't know that you can just make it use light dom.

  protected createRenderRoot() {
    return this;
  }
And that's what it takes! I like using tailwind/utility classes so for the styles I'd need to have layers of compiled css files rather than one giant one.
➕ show 1 reply