this plugin can't support style by .css file??

EranGrin commented 4 months ago

Hello can you provide the content and the .css file and where are you trying to use it or import it

WulfP commented 4 months ago

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.

EranGrin commented 3 months ago

@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.

EranGrin commented 3 months ago

The last release, 1.4.1 has a bugfix for the ':root', ':host' issue

EranGrin / vue-web-component-wrapper

this plugin can't support style by .css file?? #18