Add support for using lazyStyleTag use() from a JavaScript module (injecting into multiple shadow DOMs)

Feature Proposal

When using lazyStyleTag and use({ target: shadowRoot }) inside a shared JavaScript module, only the first call to use injects a style element. The other shadow elements that call use() have no styles. I’ve duplicated the module and loaded each and the problem does not exist. There may be other options such somehow forcing separate module instances, but I’m not sure.

In index.js, I believe the following condition prevents use() from injecting duplicate styles:

if (!(refs++)) {
    update = API(content, options);
}

https://github.com/webpack-contrib/style-loader/blob/master/src/index.js#L131

One possible solution is to give an id to each injected style element, instead of having a global refs value.

Feature Use Case

loading JS modules injected into shadow elements, so modules can be loaded dynamically.

Please paste the results of npx webpack-cli info here, and mention other relevant information

System: OS: macOS 12.1 CPU: (4) x64 Intel® Core™ i5-8210Y CPU @ 1.60GHz Memory: 122.11 MB / 16.00 GB Binaries: Node: 14.18.1 - /usr/local/bin/node npm: 6.14.15 - /usr/local/bin/npm Browsers: Chrome: 101.0.4951.64 Chrome Canary: 104.0.5071.0 Firefox: 98.0.1 Safari: 15.2 Safari Technology Preview: 15.4 Packages: css-loader: ^6.7.1 => 6.7.1 css-modules-typescript-loader: ^4.0.1 => 4.0.1 styles-loader: ^4.0.1 => 4.0.1 ts-loader: ^9.3.0 => 9.3.0 webpack-cli: ^4.9.2 => 4.9.2

[mditullio]

Thanks for the suggestion about dynamic import, I will look onto it.

For the polyfill of adoptedStyleSheets, I tried this lib: https://github.com/calebdwilliams/construct-style-sheets But there are some issues regarding Safari: https://github.com/calebdwilliams/construct-style-sheets/issues/110 But in general, to polyfill it, no other way than replicating style tags in each component instance.

So, for now, I decided to use Shadow DOM for intranet-only needs (just supporting Edge / Chrome), waiting for Apple updating its browsers… Safari is the new IE11 🐢

[alexander-akait]

@mikeaustin Tha main problem style-loader is not extract CSS, it is for CSS in runtime code, anyway if you can use mini-css-extract-plugin and dynamic import(...) (alternative solution - set runtime: false and implement own logic for loading), but yes, CSSStyleSheet is right solution (that is bad it has a bad support right now, it was design for Shadow DOM). You have written polyfill is not wroking, can you desribe what is broken? Maybe you can create own small polyfill if you don’t need extra complex logic