Web组件是一项由 W3C 推出的新技术，允许开发者创建可重用的自定义元素。Vue.js 是一个流行的前端框架，提供了方便的组件化开发方式。本文将介绍如何将 Vue 组件打包成 Web 组件/自定义元素，以实现更好的重用性。
什么是 Web 组件？
Web 组件是一种自定义元素，可以在任何支持 HTML 的环境中使用。它们是独立的、可重用的，有助于将代码库分解为更小的、易于管理的部分，促进了开发人员之间的合作和共享。Web 组件由三个基本技术组成：自定义元素、影子DOM 和 HTML 模板。
自定义元素是指由开发者自己定义的 HTML 标签，例如 <my-component>。影子DOM 允许开发者在自定义元素内部创建私有 DOM 树，并通过 CSS 隔离其样式和行为。HTML 模板则允许开发者在自定义元素内部创建可复用的模板。
如何将 Vue 组件打包成 Web 组件？
Vue.js 2.x 提供了一个名为 vue-custom-element 的插件，可以将 Vue 组件打包成 Web 组件。该插件在 Vue.js 3.x 中已经废弃，取而代之的是 @vue/web-component-wrapper。
下面我们将使用 @vue/web-component-wrapper 将一个简单的 Vue 组件打包成 Web 组件。
步骤 1：安装依赖
首先，我们需要安装 @vue/web-component-wrapper：
npm install @vue/web-component-wrapper
步骤 2：创建 Vue 组件
在本例中，我们将创建一个简单的 Vue 组件，其中包含一个输入框和一个按钮，用于添加待办事项。请注意，在组件定义中，我们使用了 props 和 emits 属性来定义组件的输入和输出：
-- -------------------- ---- -------
----------
-----
------ ----------- ------------------
------- -------------------- -------------
------
-----------
--------
------ ------- -
----- ------------
------ -
------------- -
----- ------
-------- -- -- --
-
--
------ -------------
------ -
------ -
-------- --
-
--
-------- -
--------- -
---------------------- -------------
------------ - --
-
-
-
---------步骤 3：封装为 Web 组件
接下来，我们将使用 @vue/web-component-wrapper 将该组件封装为 Web 组件。在封装过程中，我们需要手动注册自定义元素，并将 Vue 组件实例挂载到该元素上：
import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
import TodoInput from './TodoInput.vue'
const CustomElement = wrap(Vue, TodoInput)
window.customElements.define('todo-input', CustomElement)步骤 4：在 HTML 中使用 Web 组件
现在，我们可以在任何支持自定义元素的环境中使用 <todo-input> 标签来渲染该组件。例如，在普通的 HTML 页面中，我们可以添加以下代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- --- --------- --------------- ------- -------------------------------------------- ------- ------------------------------ ------- ------ ------------------------- ------- -------
完整示例代码
下面是完整的示例代码，包括
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6629