It appears that one of the last commits to the 5.1.9 version of the plugin added a "shadowMode" flag that was passed down to the vue compiler and assembler, and caused the bundled css (in the .js output) to inject into a shadowdom instead of the head.
I'd really like this to work, with v6. It appears(?) that v5.1.9 doesn't work with Vue3? At least, I get errors when I try to use it that seem to imply that. (Pardon me if this isn't true, I'm very new to Vue).
I don't actually want to build a full blown web component, but I do want to use the shadowdom to avoid having the CSS in the web app that I'm embedded vue components into not bleed into the Vue components CSS.
FWIW, I'm trying to use rollup and vue3 to build a set of components to a JS file that I can pull into another app. Everything is working great EXCEPT for the side effects of the main app CSS; it's a huge app that I didn't write, and has complicated CSS.
Also, I'd be perfectly happy to add in some other plugins (like postcss) if they can help me accomplish this, but I'm not experienced with any of them.
What does the proposed API look like?
Adding a
shadowMode: true
option to the rollup vue config (as was done in 5.1.9), and having that pass down to the underlying system, would be great.
(Current workaround: generate a separate CSS file, and read it in when I read the js, and inject into a style element. But this is awkward in the general case, I think)
What problem does this feature solve?
It appears that one of the last commits to the 5.1.9 version of the plugin added a "shadowMode" flag that was passed down to the vue compiler and assembler, and caused the bundled css (in the .js output) to inject into a shadowdom instead of the head.
I'd really like this to work, with v6. It appears(?) that v5.1.9 doesn't work with Vue3? At least, I get errors when I try to use it that seem to imply that. (Pardon me if this isn't true, I'm very new to Vue).
I don't actually want to build a full blown web component, but I do want to use the shadowdom to avoid having the CSS in the web app that I'm embedded vue components into not bleed into the Vue components CSS.
FWIW, I'm trying to use rollup and vue3 to build a set of components to a JS file that I can pull into another app. Everything is working great EXCEPT for the side effects of the main app CSS; it's a huge app that I didn't write, and has complicated CSS.
Also, I'd be perfectly happy to add in some other plugins (like postcss) if they can help me accomplish this, but I'm not experienced with any of them.
What does the proposed API look like?
Adding a
option to the rollup vue config (as was done in 5.1.9), and having that pass down to the underlying system, would be great.
(Current workaround: generate a separate CSS file, and read it in when I read the js, and inject into a style element. But this is awkward in the general case, I think)