defineCustomElements styles are not applied #4171
Description
Version
3.2.0-beta.4
Reproduction link
https://stackblitz.com/edit/vue-zhkjiz?file=src/main.js
Hint: Stackblitz doesnt reload the DOM for this when you change some code you need to reload the tab in the browser otherwise element are already defined
Steps to reproduce
Create a new Vue3 Component with the vu3 cli
my preset :
{
"useTaobaoRegistry": false,
"packageManager": "yarn",
"presets": {
"vue3-tsc": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-typescript": {
"classComponent": true,
"useTsWithBabel": true
},
"@vue/cli-plugin-eslint": {
"config": "prettier",
"lintOn": [
"commit"
]
},
"@vue/cli-plugin-unit-jest": {},
"@vue/cli-plugin-e2e-cypress": {}
},
"vueVersion": "3",
"cssPreprocessor": "dart-sass"
}
}
}then modify main.ts to
import { defineCustomElement} from "vue";
import App from "./App.vue";
customElements.define("mbmxp-vue3-component", defineCustomElement(App));which creates then a webcomponent with shadow-dom open all fine
but now the Problem is the styles from the scss file are not apply to the webcomponent because the styles are moved into the <head> and not into <webcomponent-tag> this is the reason why its not working
What is expected?
Styles are moved to the shadow dom and in the example the headline should be red
What is actually happening?
styles are added to the <head> and not applied to the shadow dom
Hi, I just wanted to thank you for the new defineCustomElement feature, unfortunately it doesn't quite work with the styles, some of which are not stored correctly in the DOM and therefore don't reach the shadow dom.
