Open estellegr opened 1 year ago
After searching, I found that in my In my dist/Header.css
I've got this :
.header[data-v-e0f4b3c9]{display:flex;align-items:center;column-gap:1.6rem;padding:1.6rem;border-bottom:1px solid #e5e5e5}
Turns out the attribute generated by the scoped attribute is given to the component children as the following (look for the attribute data-v-e0f4b3c9
)
If I set the attribute data-v-e0f4b3c9
to the header div, it works :
Anybody has a workaround to set the attribute data-v-e0f4b3c9
to the correct node ?
an awful workaround is to use a <div>
as the parent in the meanwhile 😅
i met the same problem. I have to use css syntex without scoped in component project, but it may invoke other repeat css name problem
没错,老夫也遇到了。而且正如3楼老外哥说的,还需要如vue2保持根元素唯一。
After searching, I found that in my In my
dist/Header.css
I've got this :.header[data-v-e0f4b3c9]{display:flex;align-items:center;column-gap:1.6rem;padding:1.6rem;border-bottom:1px solid #e5e5e5}
Turns out the attribute generated by the scoped attribute is given to the component children as the following (look for the attribute
data-v-e0f4b3c9
)If I set the attribute
data-v-e0f4b3c9
to the header div, it works :Anybody has a workaround to set the attribute
data-v-e0f4b3c9
to the correct node ?
I have the same problem, how did you solve it? please help!
When I import a remote component into my host app, css inside a styled tag with the scoped attribute does not get loaded. However, when I use the module attribute (or no attribute at all) it works fine.
Versions
Reproduction
remote/src/Header.vue
host/src/components/Home.vue
remote/vite.config.ts
host/vite.config.ts
What is Expected?
When using
<style module>
or<style>
I get the correct CSS :What is actually happening?
With
<style scoped>
I don't have any styling :Thanks for your help 🙏