Issues with style-loader lazyloading for multiple elements in shadow-dom

Question

I'm currently working with webpack and style-loader to inject my styles into components that use shadow-dom. However, the issue happens when I try to use multiple instances of the element (the styles stop injecting). I was able to properly solve this issue with another component by adding the unuse function to my disconnectCallback for that component. Unfortunately, for this component below, I expect it to appear multiple times at once on a page. Am I doing something wrong?

Component.tsx:

import React from 'react';
import { createRoot } from 'react-dom/client';

// Styles
import styles from '../styles/contentScript.css';

// Images
const icon = chrome.runtime.getURL('assets/icon.png');

export default class CustomButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });

        // Functions
        this.handleShow = this.handleShow.bind(this);
    }

    handleShow = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        ...
    };

    connectedCallback() {
        // Inject Styles
        styles.use({ target: this.shadowRoot });

        // Inject Component into ShadowRoot
        createRoot(this.shadowRoot).render(this.render());
    }

    render() {
        return (
            <div className='absolute inset-0'>
                <button className='main-button group' onClick={this.handleShow}>
                    <img src={icon} className='w-7' />
                    <span className='main-button-tooltip group-hover:scale-100'>
                        Open Popup
                    </span>
                </button>
            </div>
        );
    }

    disconnectedCallback() {
        styles.unuse();
    }
}

customElements.define('custom-button', CustomButton);

webpack.config.js

// Imports...
module.exports = {
    entry: {
        ...
    },
    module: {
        rules: [
            {
                use: 'ts-loader',
                test: /\.tsx?$/,
                exclude: /node_modules/,
            },
            {
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'lazyStyleTag',
                            insert: function insertIntoTarget(element, options) {
                                var parent = options.target || document.head;
                                parent.appendChild(element);
                            },
                        },
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                indent: 'postcss',
                                plugins: [tailwindcss, autoprefixer],
                            },
                        },
                    },
                ],
                test: /\.css$/i,
            },
            {
                type: 'asset/resource',
                test: /\.(png|jpg|jpeg|gif)$/i,
            },
        ]
    },
    resolve: {
        ...
    },
    plugins: [
        ...
    ],
    output: {
        filename: '[name].js',
        clean: true,
    },
    optimization: {
        ...
    },
}

I should also note (in case it's important) I am using tailwind for styling so I've included postcss and autoprefixer. This is also for a chrome extension so I'm creating this component in my contentScript. I have also tried it without the unuse call in my disconnectCallback and faced the same issue.

Answer 1

to follow the discussion on github, if you're only browser target is Chrome, then I really suggest you to use the CSSStyleSheet class.

In that case, you should drop from your webpack configuration the style-loader, as it's not needed anymore:

                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'lazyStyleTag',
                            insert: function insertIntoTarget(element, options) {
                                var parent = options.target || document.head;
                                parent.appendChild(element);
                            },
                        },
                    },

Then modify the configuration of the css-loader to have the option exportType = "css-style-sheet" ( https://webpack.js.org/loaders/css-loader/#exporttype ).

In this way, the exported element is already an object of type CSSStyleSheet, and you can use it directly on your web component:

import sheet from "./styles.css" assert { type: "css" };

document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Normally, the 'postcss' step should not pose problems.

No need anymore to use "use / unuse" then (because that's an API of style-loder that you should remove with this solution)