this plugin can't support style by .css file??
Closed this issue · 4 comments
Hello can you provide the content and the .css file and where are you trying to use it or import it
I fond a way to add styles exclusivly to shadowDom, but there might be better solutions.
explude css-imports from main.ts and add to App.vue:
<template>
<div ref="container">
...
</div>
</template>
<script setup lang="ts">
import styles from '@.....css?inline'
const container = ref(null)
onMounted(async () => {
const sheet = new CSSStyleSheet()
sheet.replaceSync(styles.replaceAll(':root', ':host')) // depends on css, sometimes :host is already included
const pn = container?.value?.parentNode
pn && pn.adoptedStyleSheets.push(sheet)
})
...
</script>
Now <body> is not modified (aka polluted) by internal styles of added web components.
@WulfP quite neat solution regarding the :root issue in shadow dom, I might add something like this to the package.
@shwull you can surly import style.css, as you can in the vite example, we use style.css to import css framework globally
in the style.css vite allows us to use @import syntax to import all css content globally.
I hope this makes it more clear, I might add more details in the dcos regarding the css handling.
The last release, 1.4.1 has a bugfix for the ':root', ':host' issue