0

Is it possible to apply framework styles to nested lit-element? An idea is to disable shadow dom. I tried this.

    createRenderRoot() {
      return this;
    }

It does not do what I need. I see that I can recompile styles into components. But right now I am looking for an easier solution. There is a solution - Specify the render root. This solution rid of shadowRoot. Styles were applied but , does not work.

Victor Shelepen
  • 1,966
  • 2
  • 16
  • 41

4 Answers4

1

If you want to use global styles you'll have to disable Shadow DOM in the whole app tree: if a single component has a shadow root its whole subtree won't be affected by external styles.

Anyway, as you noticed, slots only work with shadow DOM enabled. In this case using a common style library/framework is still possible, see for example Sharing Styles, Using Bootstrap in Web Components, Importing external stylesheets.

Umbo
  • 3,042
  • 18
  • 23
1

Yes, but disabling shadow DOM is the wrong way to do it it.

LitElement used adopted stylesheets, which let you load/create the CSS once, but apply it to the shadow DOM of the component. You can create this globally, apply it in each component, and effectivly have styles that are shared by all your components, but (critically) don't apply to any external component you load or any external app that loads your component.

You can do something like:

// common-styles.js
export const styles = css`...`;

// any-component.js
import { styles } from 'common-styles.js';
...
static get styles () { return [styles]; }

As the styles object is shared it doesn't download or parse again - all your components get a reference to the same styles, rather than global styles cascading down.

Keith
  • 150,284
  • 78
  • 298
  • 434
0

It works as designed. The version above does not use ShadowDom. So styles are applied. In my case, all components while style bubbling has to disable ShadowDom. But another issue appears.

createRenderRoot() {
  /**
   * Render template without shadow DOM. Note that shadow DOM features like
   * encapsulated CSS and slots are unavailable.
   */
    return this;
 }

But I need slots.

Victor Shelepen
  • 1,966
  • 2
  • 16
  • 41
0

It depends on what properties you want to share.

You can share these properties from the parent element:

  • color
  • font-family and other font-* properties
  • All CSS custom properties (--*)

Just you need to define these properties in the parent element's :root selector.

For more information: https://lit.dev/docs/components/styles/#inheritance

coolr
  • 1