-
Notifications
You must be signed in to change notification settings - Fork 4.8k
-
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:
# DemoTest.ce.vue
...
<template>
<div id="app">
<VueVite />
<HelloWorld msg="Vite + Vue" />
</div>
</template>
-- 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?
Beta Was this translation helpful? Give feedback.