Support for Web Components, Shadow DOM, adoptedStyleSheets

[fregante]

Context

I want to generate a standalone component to be loaded in a shadow DOM.

It seems that this gets me most of what I need:

• own JS chunk
• standalone CSS chunk that includes all the CSS dependencies (sub-imports of other .css files)

import shadow from 'react-shadow';

/// partial, pseudo-code

const {Component} = await import('./Component');

return <shadow.div><Component/></shadow.div>

At this point, a Component.css file is being generated and appended to document.head.

**The problem is that this stylesheet should be inside shadow.div

Feature Proposal

I'm not sure what would be the best way to achieve this, but perhaps:

• add a magic comment to the import() to disable the automatic injection of the stylesheet
  e.g. import(/* webpackCss: no-inject */ './Component');
• return the URL as an additional property, so that it can be handled autonomously
  e.g. const {Component, __miniCssUrl} = await import('./Component');

Related links

• adoptedStyleSheets could be later used to inject the stylesheet in the shadow DOM: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets
• you can see here how they currently load the CSS (i.e. as string in JS, mostly) https://github.com/Wildhoney/ReactShadow
• similar request in Path of extracted css file #110
• part of this request Async loading of CSS bundle #204

[alexander-akait]

Currently possible only with css-loader https://github.com/webpack-contrib/css-loader?tab=readme-ov-file#exporttype

[fregante]

The TL;DR of this issue is: can I specify anything other than document.head as a dynamic chunk CSS injection point?

This is possible via style-loader so perhaps it's possible to let style-loader deal with dynamic chunks:

• https://webpack.js.org/loaders/style-loader/#function

[fregante]

Currently possible only with css-loader webpack-contrib/css-loader#exporttype

Indeed, the main challenge is that all the existing solutions seem to be around the way the CSS file is imported, but I need to act on the generated CSS chunk instead, as a whole, not on a specific real CSS file.

[alexander-akait]

Indeed, the main challenge is that all the existing solutions seem to be around the way the CSS file is imported, but I need to act on the generated CSS chunk instead, as a whole, not on a specific real CSS file.

How do you imagine this if you have about 100 components?

[fregante]

It's not an issue with the number of components but rather 100 imports of one component, because each import would need to disable/alter the import() magic comment.

In my project there would be a single import() of the private component (seen above) and a wrapped component that returns a shadow DOM component with the stylesheet pre-loaded.

I'm not super convinced about the solution suggested above, I think that from webpack's viewpoint it's difficult to know in what context the code is being imported.

As a better solution, I think I'd have to move Component.tsx to webpack's entry points and then load the stylesheet myself, however any sub-import() calls would still load the stylesheet in the main document.

The easiest solution is to wrap the component in an iframe so that document.head is always the right component, but iframes are hard to deal with.

[alexander-akait]

@fregante Can you provide a small example how do you see it (using github repo), maybe I can provide solution right now, because specification clearly says what you should write https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets#examples,

What can I do here? Just allow to this plugin autogenerate:

// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("Your CSS code");

But you don't need this plugin, because css-loader already can do it, extra async import will decrease your perf...

[alexander-akait]

Another solution - you can do it on own side using fetch(new URL("./file.css", import.meta.url)) and make CSSStyleSheet by default, not sure we support new URL(...) here right now, but it is not a big problem

[fregante]

The only way to do it in this scenario would be for import('./component.tsx') to return something is not exported by component.tsx, e.g.

// component.js
import './some-style.css'
import './some-other-style.css'

const {__stylesheet} = await import('./component.js')

const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
shadow.adoptedStyleSheets = [__stylesheet];

[fregante]

you can do it on own side using fetch(new URL("./file.css", import.meta.url))

That's the issue, I don't have a file.css, the file to load is what import() will generate after resolving all the dependencies of component.js

Best I can do is use import(/* webpackChunkName: "file" */ "./component.js") and then expect file.css to live in dist as well. But the issue is that mini-css-extract-plugin is still loading file.css in document.head

[alexander-akait]

You can disable runtime logic here using https://github.com/webpack-contrib/mini-css-extract-plugin?tab=readme-ov-file#runtime

[fregante]

Thank you, finally got around checking that out. Unfortunately that disables the injection for all generated bundles.

any sub-import() calls would still load the stylesheet in the main document

I don’t think there's really a comprehensive solution here that works with nested import() statements, because two import("./more.js") calls will only load the file and CSS once, even if they appear in two "contexts"

---

For truly isolated components, webpack needs to export a distinct configuration per component. This way I could set runtime: false and deal with the loading.

In this scenario, I could also ask mini-css-extract-plugin to accept a custom inject function so that all of its injections will be in the right host (it would be a feature request)

[fregante]

It turns out, my first feature request was still the best way to achieve this:

add a magic comment to the import() to disable the automatic injection of the stylesheet
e.g. import(/* webpackCss: no-inject */ './Component');

In the PR linked above you can see I'm manually detecting and disabling the injected stylesheet. It still won't supported nested import()s, but it's something.

In my case I want to preserve the behavior so that a missed stylesheet can be detected and reported as an error, but if it might be useful to others.

[alexander-akait]

Why do not use new URL("./file.css", import.meta.url), I can improve supporting it

[fregante]

What's "./file.css"? Where should I use that URL? How would it fix/avoid the issue?