Vue next - Support for shadowMode

[tcnijmeijer]

What problem does this feature solve?

Currently the next branch does not yet support the shadowMode option which is necessary to make proper use of the vue-web-component-wrapper possible. When will support for this option be added to the Vue3 compatible next branch?

Without this option it wouldn't make much sense to try and use the web-component-wrapper as the styles of the components wouldn't be injected in the shadowRoot of the web-component made.

What does the proposed API look like?

It would basically work the same as the Vue2 compatible vue-loader.

I wouldn't mind contributing to the solution here, but I'm not sure what the intended way of going about solving this issue is. Is it the intention to re-use the vue-style-loader, or is there another approach you guys have in mind? I was thinking perhaps the CSS-injection could be integrated into vue-loader in all cases instead of letting style-loader handle this in some cases but not in other cases.

[tcnijmeijer]

I gave adding the suggested support a shot myself. See: #1850

[sherlock1982]

Without this option I can't say it really supports Web Components.
There's no point to inject styles for child components in a head tag :-)
Also would be nice to have <style module> support back.
Otherwise web components will be too much affected by global styles.

[DrJume]

For the mean time (hopefully not long) you can use a defineCustomElement() with Vue 3:

• https://stackoverflow.com/questions/69797635/how-do-i-create-a-vue-3-custom-element-including-child-component-styles/69806588
• https://stackoverflow.com/questions/69808113/how-to-use-vue-router-and-vuex-inside-custom-element-from-root