developers:

This is my first question after so many years as a simple viewer in Stackoverflow.

My trouble is: I'm trying to use scss stylesheets with LitElement components, encapsulated into a React project. The webpack config of my repository injects stylesheets in the header of the page (and it's something I can't change due to other projects in my repository), but I find that my ShadowRoot doesn't get the styles from the header (I tried to acceed to :host, :root, shadowroot... from the .scss file, but it never worked), and I realized that, initially, I can select the target I want to append to my stylesheet configuring the style-loader module in my webpack config and sending the target I want to include the stylesheet in with the .use() function, but I guess it only works with HTMLElement component, not with mine witch extends from LitElement.

This is my config of module.exports in webpack.config.js:

            rules: [
                {
                    test: /\.css|\.s(c|a)ss$/,
                    include: [
                        path.resolve(__dirname, 'src/componentsLit/'),
                        path.resolve(__dirname, 'src/pagesLit/'),
                        path.resolve(__dirname, 'src/widgetsLit/'),
                    ],
                    use: [
                        'lit-scss-loader',
                        'extract-loader',
                        {
                            loader: 'style-loader',
                            options: {
                                //injectType: 'lazyStyleTag',
                                insert: function insertIntoTarget(element, options) {
                                    var parent = options.target || document.head;
                                    parent.appendChild(element);
                                },
                            },
                        },
                        'css-loader',
                        'sass-loader',
                    ],
                },
            ],
        },

This is what I'm trying to render in my component:

import { html, css, LitElement } from 'lit-element';
import { nothing } from 'lit-html';
import myStyles from './myStyles.scss';

export class myCustomElement extends LitElement {
    static get is() {
        return 'my-customelement';
    }

    static get properties() {
        return {
            [...]
        };
    }

    static get styles() {
        /*var style = css([require('./myStyles.scss')]);
        return [style];*/
    }

    constructor() {
        super();

        [...]
    }

    firstUpdated() {
        myStyles.use({ target: this.shadowRoot });
    }

    [...]

}
customElements.define(myCustomElement.is, myCustomElement);

I get that the function use() is not avaliable for LitElement, and as I see in the style-loader doc, is the way to select where I want to place the <style></style> markdown.

Any alternative to insert stylesheets from scss with this configuration? Thanks.

CodePudding user response：

Have you checked out lit-style-loader? Perhaps it would integrate with your configuration. https://www.npmjs.com/package/lit-style-loader

CodePudding user response：

Firstly we can revise how load css at lit

CSS 'in the Lit'

When rendering the component we can load the sit can be:

import { html, css, LitElement } from 'lit-element';
import { nothing } from 'lit-html';
import {myStyles} from './styles.js';

export class myCustomElement extends LitElement {

static styles = myStyles;

... all the code in the file

and in styles.js you can:

import {css} from 'lit';

export const myStyles = css
  :host {... the css  

Because the Lit encapsule the css inside the shadow dom (the specific element) not in the main (head, body,div). Each component have their css stylesheet.

Accesing the CSS at shadow Dom Style file

We can access with simple CSS variable names by the way:

1) in the element style definition (shadowDOM):

/* mystyle.js, define the "inner" Element style */
    import {css} from "pathtolit/lit-all.min.js";

export const styles = css`
/** GENERIC AND CONTAINER ELEMENTS **/
:host * { some css; }
.xyz{ some css; }
a {
  background-color: var(--x-color);
  color:var(--w-color);
}

2) in the element "render" definition (structure) you don't need define nothing of style, only call the styles (static styles = styles;)

import { LitElement,css,html,} from "pathtolit/lit-all.min.js";
import {styles} from './styles.js';

class selectstyle extends LitElement {
  static styles = styles;

  render() {
    return html`
    <div>
  <ul class"xyz">
    <li><a>test<a></li>
  </ul>
  </div>
    `;
  }
}
customElements.define("x-element", myCustomElement );

3) in the html file (coded, rendered, cgi responce, or any way that is produced) we can define normally:

<style>
    :root{
 --x-color: #fbff00;
 --w-color: #33fffa;
    }
  .container {
    
    align-content: center;
    vertical-align: middle;
    background-color: antiquewhite;
    color: red;
  }
</style>
</head>
<body>
  <div >
    <x-element></dx-element>
  </div>

• You can try the recomentation of Brendan Baldwin or the JS api of sass.
• But here are a small article about css variable and scss its very clear (string interpolation).
• and here is an unresolved question with another css framework and lit

Disclaimer:*

• The original source of my responce is in: https://lit.dev/tutorials/carousel
• i don't use sass =(