Include webpack dist css file in shadow dom

Question

I have recently started to use the shadow dom and as part of this, I include my stylesheets by using the following code:

  const stylesheet = document.createElement('link');
  stylesheet.setAttribute('rel', 'stylesheet');
  stylesheet.setAttribute('href', '/css/shadow-dom.css')

  shadowRoot.appendChild(stylesheet);

However, this means that I have to manually copy, paste and rename my compiled sass file into the css folder from the dist css file that webpack has chunked [name].[contenthash].css - eg I have to manually move and rename

/dist/shadow.cf0ecb9daad8a3e0abea.css

to

/css/shadow-dom.css

Is there a way to read the chunked file directly or reference it when I create my shadow dom so I don't have to manually copy and paste and rename it every time I make a change and rebuild my webpack?

Please note I am unable to remove the content hash as I have had no answers to my other question:

webpack conditional css filename output dependent on entry name

score 0 · Answer 1 · answered Nov 08 '22 at 18:31

You need to use Webpack "style-loader" plugin with insert parameter.

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

Refer to this for more details.

Include webpack dist css file in shadow dom

1 Answers1