如何在HTML中使用vue-custom-element与Vue3创建Vue Widget

你遇到的两个错误核心原因是版本不兼容：你引入的是Vue 3的CDN资源（默认cdn.jsdelivr.net/npm/vue指向最新Vue 3），但vue-custom-element@3.3.0是为Vue 2设计的。Vue 3移除了全局Vue对象，换成了createApp等API，自然不存在Vue.use和Vue.customElement这些全局方法。

方案一：适配Vue 2 + vue-custom-element（复用你原有代码逻辑） #

把Vue的CDN换成Vue 2的稳定版本，就能正常使用vue-custom-element的全局方法：

<!-- 引入Vue 2.x稳定版 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 适配Vue2的vue-custom-element -->
<script src="https://cdn.jsdelivr.net/npm/vue-custom-element@3.3.0/dist/vue-custom-element.min.js"></script>
<!-- 旧浏览器兼容补丁 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>

<script>
  // 现在可正常注册自定义元素
  Vue.customElement('test-widget', {
    template: `<div>Hello World!</div>`
  });
</script>

<!-- 页面中使用自定义组件 -->
<test-widget></test-widget>

方案二：Vue 3原生实现Web Component（更优方案） #

如果想使用Vue 3，推荐用官方原生支持的defineCustomElement方法（Vue 3.2+可用），无需额外依赖库，更轻量：

<!-- 引入Vue 3生产版 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>

<script>
  const { defineCustomElement } = Vue;

  // 定义Vue组件并转为自定义元素
  const TestWidget = defineCustomElement({
    template: `<div>Hello World from Vue 3 Web Component!</div>`
  });

  // 注册到浏览器自定义元素列表
  window.customElements.define('test-widget', TestWidget);
</script>

<!-- 使用自定义元素 -->
<test-widget></test-widget>

• 自定义元素标签名必须包含连字符（比如test-widget，不能是testwidget），这是Web Component的强制规范。
• 如果需要兼容IE11等老旧浏览器，方案一需要保留document-register-element补丁，方案二则需额外引入ES6+语法的polyfill。

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