Vue组件转Web Component时出现attachShadow空值读取错误求助

Vue组件被构建为Web Component后，内部DOM会被封装在自身的Shadow DOM中，document.getElementById('stream')无法全局定位到组件内部的元素，导致shadowElement为null，调用attachShadow时抛出错误。另外代码还存在两处语法/变量错误：getUserMedia后多了一个闭合括号，以及未定义的newVideo变量。

方案1：用Vue的ref获取组件内部元素 #

Vue组件内的DOM元素应通过ref引用，而非全局DOM查询，这样能正确访问Web Component封装内的元素：

1. 修改模板，给根元素添加ref：

<template>
  <div ref="streamContainer">
    <button @click="startStreaming">Start Streaming</button>
  </div>
</template>

2. 修正方法中的DOM操作与语法错误：

methods: {
  startStreaming() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(function(mediaStream) {
        const videoElement = document.createElement('video')
        // 通过this.$refs获取组件内的元素
        const container = this.$refs.streamContainer
        container.attachShadow({ mode: "open" }).appendChild(videoElement)

        videoElement.srcObject = mediaStream
        // 修正未定义的newVideo，改为videoElement
        videoElement.play()
      }.bind(this)) // 绑定this，确保then回调中能访问Vue实例的$refs
      .catch(error => alert(error))
  }
}

方案2：用Vue模板语法替代手动DOM操作（更推荐） #

遵循Vue响应式开发思路，直接在模板中声明video元素，通过数据驱动控制显示，避免手动操作DOM：

1. 修改模板：

<template>
  <div>
    <button @click="startStreaming">Start Streaming</button>
    <!-- 通过v-if控制video元素的显示，添加autoplay自动播放 -->
    <video v-if="stream" ref="videoPlayer" autoplay playsinline></video>
  </div>
</template>

2. 修正方法逻辑：

data() {
  return {
    stream: null
  }
},
methods: {
  async startStreaming() {
    try {
      this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      this.$refs.videoPlayer.srcObject = this.stream
    } catch (error) {
      alert(error.message)
    }
  }
}

额外注意 #

• Vue 3构建Web Component时默认启用Shadow DOM，Vue 2需要在vue.config.js中配置shadowMode: true才能开启。
• 调用video.play()时，多数浏览器要求必须由用户交互触发（比如点击按钮），当前代码通过按钮点击触发，符合浏览器安全限制。

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