Can't get it to work with vue

[Lixus]

This package seems to do exactly what i need for my vue project, but i can't get it to work. I'm not sure if i missed something or if it's not compatible with the versions that i'm using?

I use vue-shadow-dom to add my shadow root.

Any help would be much appreciated. I can add an english readme to your project if you want and if i get it to work. Thanks a lot in advance!

Dependencies

"@vitejs/plugin-legacy": "^2.0.0",
"@vitejs/plugin-vue2": "^1.1.2",  
"sass": "^1.58.3",  
"vite": "^3.0.2",  
"vite-plugin-shadow-dom-css": "^0.0.2",  
"vue": "^2.7.7",  
"vue-shadow-dom": "^1.6.0"

vite.js

...
export default defineConfig({
    plugins: [
        vue2(),
        legacy({
            targets: ["ie >= 11"],
            additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
        }),
        shadowDomCss(),
    ],
    ...
}
...

main.js (Entry Point)

import Vue from "vue";
import { createPinia, PiniaVuePlugin } from "pinia";
import Shadow from "vue-shadow-dom";

import App from "./App.vue";

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

Vue.use(Shadow);

new Vue({
    render: (h) => h(App),
    pinia,
}).$mount("#app");

App.vue

<template>
    <shadow-root>
        <div class="app">
            test
        </div>
    </shadow-root>
</template>

<style style-provider>
.app {
    background-color: #f00;
}
</style>

[Lixus]

For future reference: I got it to work. I just found the example in the code :)
What was missing? The style provider. I use it like this:

App.vue

<template>
    <shadow-root>
        <div ref="appinner">
            test
        </div>
    </shadow-root>
</template>

<script>
import allStyleProvider from "virtual:style-provider?query=~/*";
export default {
    mounted() {
        allStyleProvider(this.$refs.appinner).mount();
    },
};
</script>

<style lang="scss" style-provider>
:host {
    all: initial;
}
</style>

Sub-components also have

<style lang="scss" scoped style-provider>
</style>

It's working great now, thanks for your work!

[aui]

Thank you for the code example. This project is still in an experimental state, if you have better suggestions, welcome to put forward.