为什么我的 vuetify 应用程序在将其转换为 Web 组件时会失去样式？

Question

我正在尝试使用 vuetify 构建一个 Web 组件。然而，当我将该 Web 组件嵌入到容器中时，shadow-dom 就会失去其样式，结果只是一堆暗灰色的按钮。

我创建了一个简单的例子来说明我正在谈论的内容：

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

Answer 1

当您使用 Veutify 的任何组件时，Veutify 将 CSS 样式添加到文档顶部。因此，当您的组件被包装在 Shadow DOM 中的自定义元素内时，

Veutify

提供的所有样式都无法在 Shadow DOM 中访问。

您可以尝试两种选择：

1. 使用没有影子 DOM 的自定义元素
2. 尝试使用可构造样式表将 Veutify 注入到 Shadow DOM 中。

Answer 2

这似乎适用于 vuetify 3：https://blog.panda-studio.cn/vue_web_component_webpack_compiler

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);
        })
    }
})