feat(css): add support for injecting css into custom elements

[sventschui]

Description

Add support to inject CSS style tags into custom elements.

This is based on #4821

Closes: #4821

Additional context

In our microfrontend framework we're rendering our apps into custom elements. In order to migrate from webpack to vite we need a mechanism similar to style-loader's insert option (https://webpack.js.org/loaders/style-loader/#insert) to inject styles into these custom elements.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • There is (feat(css): allow for custom css container #4821) but it seems abandoned
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[sventschui]

@lukewarlow as you opened a similar PR. Do you need this behaviour also during production builds (i.e. vite build) or only during dev (vite)? For us it is only during dev and making this work for production builds might be much harder. I'd therefore only apply this config for dev builds.

@patak-dev as you commented on my other discussions/PRs, would you mind giving me an indication whether this would be feasible to land or whether I need to look for a solution outside of vite?

[lukewarlow]

I believe we need it in production as well. But even using vite for Dev and Vue CLI still for prod build would improve the experience.

[Niputi]

All of the tests are failing on this line

[sventschui]

They fail for production mode which is not in our scope. One would need to find another way for production mode support. As we worked around this issue I'll close this PR. Anyone is welcome to re-use my work to continue on this.

[lukewarlow]

Having looked into it further my original PR only added it for dev so I don't think we need it for prod so this probably does address our use case. @sventschui

[IamFive]

Having looked into it further my original PR only added it for dev so I don't think we need it for prod so this probably does address our use case. @sventschui

I am courious why you only need this for dev. how you manage this case for prod env?
And my case seems more complex, it's run in web extension content script, so program needs to dynamic create root.

  const container = document.createElement("div"); 
  container.id = "some-id-to-indentify-shadow-root"
  document.body.appendChild(container); 

  const shadow = container.attachShadow({ mode: "open" });
  ReactDOMClient.createRoot(shadow).render(app);

[lukewarlow]

I've just found my original work on the project where we needed this and the reason we only need it for dev is that for production there's a way to get this behaviour by using a Vite plugin with the generateBundle hook injecting the necessary code. The work was never completed so its possible this would have caused issues with the CSS being injected twice I'm not sure.

So while it'd be nice if this functionality worked in both prod and dev, dev was the only place that I think we needed it for our use case.

My understanding of vite is far from complete so it may even be that we could get our plugin to work nicely in dev too but I believe HMR and the fact this plugin hook doesn't run on a dev build was why I made the original PR.

[antfu]

I am not sure about this feature to "alternate" the import globally. Also it does not seem to be flexible when you have multiple shadow roots.

Wondering why you want to do it this implicit way, instead of appending the CSS manually with ?inline

[lukewarlow]

?inline can't be applied (as far as I'm aware) to styles within Vue SFCs. Which is my use case.

[IamFive]

@antfu does ?inline works for css imported by 3rd party lib?

[sventschui]

As we worked around this issue I'll close this PR. Anyone is welcome to re-use my work to continue on this.

[IamFive]

is this feature has been released or any other issue is tracing this issue.
many other similar issues are closed, and maintainers decides to discuss the feature in this thread, but finally this issue is closed without trace?

[hood]

Yes, any news on this? I’m kinda confused on how to obtain the desired behaviour.

[leopsidom]

Is this still under track ? It seems all related threads have been closed

[hood]

I’ve made this Vite plug-in, which fits my needs for injecting my css into webcomponents’ shadow doms: https://github.com/hood/vite-plugin-shadow-style

[bluwy]

The feature request is still open at #11855, it's also on the team discussion board, but we haven't got to discussing it yet.