Vue.js项目集成第三方自定义Web Component（carcutter-web-player）报错

我尝试将第三方自定义Web Component（carcutter-web-player）集成到Vue CLI及Vite项目的Vue组件中。该组件在标准HTML页面、启用CUSTOM_ELEMENTS_SCHEMA的Angular项目中均可正常运行，但在Vue项目中控制台报错。我已经通过index.html的script标签引入第三方JS，给组件添加v-pre指令（Vite项目在vite.config.js中配置）以排除Vue的处理，仍出现如下错误：

bundle.min.js:3 Uncaught TypeError: Cannot set properties of undefined
(setting 'borderRadius')
at T._applyAttributes (bundle.min.js:3:11650)
at T.init (bundle.min.js:3:7009)
at T.connectedCallback (bundle.min.js:3:7149)
at insert (runtime-dom.esm-bundler.js:16:1)
at mountElement (runtime-core.esm-bundler.js:5545:1)
at processElement (runtime-core.esm-bundler.js:5455:1)
at patch (runtime-core.esm-bundler.js:5323:1)
at mountChildren (runtime-core.esm-bundler.js:5583:1)
at processFragment (runtime-core.esm-bundler.js:5797:1)
at patch (runtime-core.esm-bundler.js:5309:1)

不清楚问题根源，缺乏调试方向，寻求解决办法。

1. 明确告知Vue识别自定义元素 #

Vue默认会解析所有标签为Vue组件，仅靠v-pre可能无法完全规避属性处理逻辑干扰，需明确配置自定义元素：

• Vue CLI项目：在vue.config.js中添加：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: tag => tag === 'carcutter-web-player'
        }
        return options
      })
  }
}

• Vite项目：在vite.config.js中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'carcutter-web-player'
        }
      }
    })
  ]
})

2. 确保第三方JS加载时机正确 #

错误出现在connectedCallback阶段，可能是Vue挂载元素时第三方JS未完全加载：

• 将第三方JS的<script>标签放在index.html的<head>中并添加defer属性，保证脚本在DOM解析完成后、Vue初始化前加载。
• Vite项目可尝试动态导入，确保脚本加载完成后再渲染组件：

<template>
  <div v-if="isScriptLoaded">
    <carcutter-web-player></carcutter-web-player>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const isScriptLoaded = ref(false)

onMounted(async () => {
  await import('/path/to/bundle.min.js') // 替换为实际第三方JS路径
  isScriptLoaded.value = true
})
</script>

3. 调试自定义元素内部逻辑 #

错误提示Cannot set properties of undefined (setting 'borderRadius')，说明_applyAttributes方法中访问的对象未定义：

• 打开浏览器开发者工具的Sources面板，找到bundle.min.js后点击格式化按钮（{}），定位到T._applyAttributes方法，查看是哪个DOM元素或实例对象未被正确获取。
• 检查属性传递是否符合组件要求：Vue会自动转换驼峰属性为短横线格式，若组件期望特定格式的属性值，可直接在模板中使用原生属性写法，或通过v-bind:attr.prop绑定原生属性。

4. 绕过Vue模板直接渲染自定义元素 #

若上述方法无效，可通过原生JS在Vue外部创建并挂载组件：

<template>
  <div ref="playerContainer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const playerContainer = ref(null)

onMounted(() => {
  const player = document.createElement('carcutter-web-player')
  // 按需添加属性或事件监听
  player.setAttribute('border-radius', '8px')
  playerContainer.value.appendChild(player)
})
</script>

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