Search code examples
csssassstylesweb-component

Web components in lit-element + SASS

I'am developing some web components (I'm newbie) for an app with [lit-element] 1 (Rather than [open-wc] 2) and I want to create a "global default style" for my web components.

Could someone explain me concretely how to use SASS in a web component from scratch? I have read a lot of documentation, post and others, and nobody explains in a concise way how to do it (and everything I have tried doesn't work).

Thanks in advance.

Solution

  • SASS (a file on your harddisk) has little to do with Custom Elements/Web Components (run in the Browser).

    SASS needs/is a pre processor, to convert (compact) SASS syntax into CSS;
    because the Browser only understands CSS and does not understand SASS.

    It is then up to you how you want to deliver that CSS to the Client

    For now you:

    • Inject a text string <style>[your CSS]</style> in the Component HTML.
    • Include the styles in a template, you cloneNode(true) into your Component:
          <template id="component">
          <style>[your CSS]</style>
      </template>

    More: