VueJS2+Vuetify2自定义Web Component启用ShadowDOM渲染异常求助

针对你遇到的问题，核心原因是ShadowDOM的样式隔离特性会阻断Vuetify全局样式的注入，同时Vuetify组件依赖全局初始化的$vuetify实例，以下是针对两款工具的具体修复方案：

一、vue-web-component-wrapper 适配ShadowDOM #

该工具默认启用ShadowDOM，但需要手动注入Vuetify样式并在组件内部初始化Vuetify实例：

1. 编写Vue组件（内部初始化Vuetify） #

<template>
  <!-- 必须用v-app包裹Vuetify组件，确保样式和功能正常 -->
  <v-app>
    <v-card elevation="2">
      <v-card-title>Vuetify ShadowDOM Demo</v-card-title>
      <v-card-text>
        <v-btn color="primary" @click="count++">点击次数: {{ count }}</v-btn>
      </v-card-text>
    </v-card>
  </v-app>
</template>

<script>
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

export default {
  name: 'VuetifyShadowComponent',
  data() {
    return { count: 0 }
  },
  // 组件内部初始化Vuetify实例，避免依赖全局配置
  vuetify: new Vuetify({
    theme: { dark: false }
  }),
  mounted() {
    // 将Vuetify核心样式注入ShadowDOM
    const shadowRoot = this.$el.getRootNode().host.shadowRoot
    if (shadowRoot) {
      const styleEl = document.createElement('style')
      // 直接引入编译后的CSS文本
      styleEl.textContent = require('vuetify/dist/vuetify.min.css').toString()
      shadowRoot.appendChild(styleEl)
      
      // 若使用Roboto字体，需额外注入字体样式
      const fontLink = document.createElement('link')
      fontLink.rel = 'stylesheet'
      fontLink.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
      shadowRoot.appendChild(fontLink)
    }
  }
}
</script>

2. 注册Web Component #

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
import VuetifyShadowComponent from './VuetifyShadowComponent.vue'

const CustomElement = wrap(Vue, VuetifyShadowComponent)
window.customElements.define('vuetify-shadow-component', CustomElement)

二、vue-custom-element 启用ShadowDOM #

该工具默认禁用ShadowDOM，需手动开启并处理样式注入：

1. 注册配置 #

import Vue from 'vue'
import vueCustomElement from 'vue-custom-element'
import Vuetify from 'vuetify'
import VuetifyShadowComponent from './VuetifyShadowComponent.vue'
import 'vuetify/dist/vuetify.min.css'

Vue.use(vueCustomElement)
Vue.use(Vuetify)

Vue.customElement('vuetify-shadow-component', VuetifyShadowComponent, {
  // 开启ShadowDOM
  shadow: true,
  // 初始化组件时注入Vuetify实例
  beforeCreateVueInstance(instance) {
    instance.vuetify = new Vuetify()
    return instance
  },
  // 组件创建后注入样式到ShadowDOM
  createdCallback() {
    if (this.shadowRoot) {
      const styleEl = document.createElement('style')
      styleEl.textContent = require('vuetify/dist/vuetify.min.css').toString()
      this.shadowRoot.appendChild(styleEl)
      
      // 注入字体链接
      const fontLink = document.createElement('link')
      fontLink.rel = 'stylesheet'
      fontLink.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
      this.shadowRoot.appendChild(fontLink)
    }
  }
})

关键注意事项 #

• v-app包裹：所有Vuetify组件必须放在<v-app>内部，否则部分样式（如主题色、布局）无法生效
• 样式注入时机：必须在组件挂载/创建后将样式注入ShadowDOM，避免样式丢失
• 字体依赖：Vuetify默认依赖Roboto字体，需手动将字体链接注入ShadowDOM，否则文字样式异常

内容的提问来源于stack exchange，提问作者Dally