Как я могу использовать Primevue в Customelements? ⇐ CSS

[Anonymous]

У меня есть пользовательский элемент Vue 3, в котором я хочу использовать Primevue & Primeflex и т. Д.
, поэтому я сначала создаю компонент, использую расширение. Наконец, я использую его в index.html, чтобы увидеть, работает ли он в браузере. < /P>
работает в некоторой степени, но не полностью. Например, я не уверен, как перевести app.use (primevue) для моего случая.
//customElement.ce.vue

Test




import { defineComponent } from "vue";
import AutoComplete from "primevue/autocomplete";

export default defineComponent({
name: "customElement",
props: {
msg: String,
},
components: { AutoComplete },
setup: () => {
console.log(JSON.stringify(theme));
return { PrimeVue };
},
styles: [],
});


< /code>
//main.ts
import { createApp, defineCustomElement } from "vue";
import App from "./App.vue";

//PrimeVue
import PrimeVue from "primevue/config";
import "/node_modules/primeflex/primeflex.css";
import "primevue/resources/primevue.min.css";
import "primevue/resources/themes/saga-blue/theme.css";

//CustomElement
import customElement from "@/components/customElement.ce.vue";

const customElementWC = defineCustomElement(customElement);
customElements.define("custom-element", customElementWC);

//Setup VueApplication for testing/reference, this works as expected.
const app = createApp(App);
app.use(PrimeVue);
app.mount("#app");
< /code>
//index.html (for testing)











We're sorry but doesn't work
properly without JavaScript enabled. Please enable it to
continue.

//test app
//the custom Web Component




< /code>
So I can see that the PrimeVue-Autocomplete is being shown, but the styles are not working.
So the question is:
How can I use all of PrimeVue in a custom Component?
Or in other words: How do I setup a Vue 3 CustomElement with PrimeVue?

Подробнее здесь: https://stackoverflow.com/questions/708 ... omelements