HTML template存储Vue代码，Web Component插入后Vue未渲染插值问题

问题本质 #

原生自定义Web Component动态插入的DOM内容，Vue不会自动触发编译流程，因此插值语法会原样显示，必须手动触发Vue的挂载逻辑。

手动挂载方案 #

1. 调整template结构 #

给Vue代码添加一个明确的根容器，方便后续挂载：

<template id="size-selector-tpl">
  <div class="size-selector-root">
    <div v-for="swatch in swatches" :key="swatch">{{ swatch }}</div>
  </div>
</template>

2. 修改自定义组件类 #

在插入template内容后，手动创建Vue实例并挂载到插入的根容器上：

class SizeSelector extends HTMLElement {
  connectedCallback() {
    // 克隆template内容并插入组件
    const tpl = document.getElementById('size-selector-tpl');
    const content = tpl.content.cloneNode(true);
    this.appendChild(content);

    // 初始化Vue实例并挂载到内部根节点
    Vue.createApp({
      data() {
        return {
          swatches: ['S', 'M', 'L', 'XL']
        };
      }
    }).mount(this.querySelector('.size-selector-root'));
  }
}

customElements.define('size-selector', SizeSelector);

3. 额外优化点 #

• 避免直接挂载到自定义组件本身，防止Shadow DOM隔离导致的问题
• 可以通过组件属性传递初始数据，比如：

  connectedCallback() {
    // 从组件属性获取初始数据
    const swatchAttr = this.getAttribute('swatches');
    const initialSwatches = swatchAttr ? swatchAttr.split(',') : ['S', 'M', 'L', 'XL'];
    
    // ... 其他代码
    
    Vue.createApp({
      data() {
        return {
          swatches: initialSwatches
        };
      }
    }).mount(this.querySelector('.size-selector-root'));
  }
  

  使用时直接写：<size-selector swatches="XS,S,M,L,XL"></size-selector>

更简洁的替代方案：Vue官方自定义元素 #

如果不需要原生Web Component的特殊特性，直接用Vue提供的defineCustomElement创建Vue驱动的自定义元素，自动处理编译和响应式：

const SizeSelector = Vue.defineCustomElement({
  template: `
    <div class="size-selector">
      <div v-for="swatch in swatches" :key="swatch">{{ swatch }}</div>
    </div>
  `,
  data() {
    return {
      swatches: ['S', 'M', 'L', 'XL']
    };
  },
  // 支持属性绑定到响应式数据
  props: {
    swatches: {
      type: Array,
      default: () => ['S', 'M', 'L', 'XL']
    }
  }
});

customElements.define('size-selector', SizeSelector);

这种方式完全贴合Vue生态，无需手动处理DOM插入和挂载，还能直接使用Vue的响应式、组件生命周期等特性。

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