You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
How do i apply style.css to components shadow-root?
I'm working on adopting vue incrementally into a legacy non-vue application via custom web components. With large components I prefer to extract the logic into multiple files instead of one large .vue file. The problem I'm running into is some of my styles from my style.css aren't being applied to the shadow-root.
Here is a minimum reproduction based on modified default vite/vue scaffold. The structure of the web component is made up like this:
-- VueVite.vue # style.css not applied even if i rename to VueVite.ce.vue
-- HelloWorld.vue # style.css not applied even if i rename to HelloWorld.ce.vue
I export DemoTest.ce.vue for consumption as <demo-hello></demo-hello>. The idea is that once the legacy application is ~95% vue, we'll make the jump to full vue and instead of refactoring DemoTest.ce.vue, HelloWorld.vue, and VueVite.vue, I'll only need to refactor/rename DemoTest.ce.vue (and main.ts).
The only work around I can think of is to rename all .vue sub components into .ce.vue, export them all as individual custom web components and apply styles to each of them via <style></style> in each component file. There are a few issues with that including, still not knowing how to use style.css with sub-components, and will make consuming the custom components in another application more verbose/complicated. i.e. the html for minimum example would be:
<body>
<vue-vite></vue-vite>
<hello-world></hello-world>
... or 3, 4, etc more tags that might make up a large component
</body>
instead of :
<body>
<demo-hello></demo-hello>
</body>
Is there a better way or work around where I can have my style.css file apply styles to the custom web component and the components it consumes?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
How do i apply
style.cssto componentsshadow-root?I'm working on adopting vue incrementally into a legacy non-vue application via custom web components. With large components I prefer to extract the logic into multiple files instead of one large
.vuefile. The problem I'm running into is some of my styles from mystyle.cssaren't being applied to the shadow-root.Here is a minimum reproduction based on modified default vite/vue scaffold. The structure of the web component is made up like this:
-- VueVite.vue # style.css not applied even if i rename to VueVite.ce.vue
-- HelloWorld.vue # style.css not applied even if i rename to HelloWorld.ce.vue
I export
DemoTest.ce.vuefor consumption as<demo-hello></demo-hello>. The idea is that once the legacy application is ~95%vue, we'll make the jump to fullvueand instead of refactoringDemoTest.ce.vue,HelloWorld.vue, andVueVite.vue, I'll only need to refactor/renameDemoTest.ce.vue(andmain.ts).The only work around I can think of is to rename all
.vuesub components into.ce.vue, export them all as individual custom web components and apply styles to each of them via<style></style>in each component file. There are a few issues with that including, still not knowing how to usestyle.csswith sub-components, and will make consuming the custom components in another application more verbose/complicated. i.e. thehtmlfor minimum example would be:instead of :
Is there a better way or work around where I can have my
style.cssfile apply styles to the custom web component and the components it consumes?Beta Was this translation helpful? Give feedback.
All reactions