为什么我的Vuetify应用将其变成Web组件时会丢失其样式？

Question

我正在尝试使用Vuetify构建Web组件。但是，当我将该Web组件嵌入容器中时，Shadow-Dom失去了其样式，结果只是一堆暗淡的灰色按钮。

我创建了一个简单的示例，说明了我在说什么：

https：//github.com /spierepf/vuetify-webcomponent-poc

Answer 1

当您使用其任何组件时，将CSS样式添加到文档顶部。因此，当您的组件被包裹在Shadow dom内的自定义元素中时，则在Shadow dom中无法访问veutify提供的所有样式。

您可以尝试两种选项：

1. 使用自定义元素而无需Shadow dom
2. 尝试使用构造样式表。

Answer 2

这似乎适用于Vuetify 3： nofollow noreferrer“> htttps://blog..panda-panda-studio.cn/vue_comcomcom_webp_comcpond/ >

import LayoutVue from './layouts/LayoutVue.vue';
import { nextTick, createApp } from 'vue';

const myCustomLightTheme = {
    dark: false,
    colors: colors,
}

const vuetify = createVuetify({
    components: {
        VLayout,
        VAppBar,
        VNavigationDrawer,
        VMain,
        VContainer,
        VList,
        VListItem,
        // core journal components end
    },
    directives: {
        // resize,
    },
    icons: {
        defaultSet: 'fa',
        aliases,
        sets: {
            fa,
        },
    },
    theme: {
        defaultTheme: 'myCustomLightTheme',
        themes: {
            myCustomLightTheme,
        },
    },
})

customElements.define('layout-component', class extends HTMLElement {
    constructor() {
        super();
        nextTick(() => {
            var block_data = this.data || {};
            var app = createApp(LayoutVue, {
                data: block_data,
            }).mount(this);

            app.use(vuetify);
        })
    }
})