在 Web 开发中，Custom Elements 是一个新的技术标准，它可以帮助开发者创建自定义组件，封装业务逻辑，提高代码复用率。在本文中，我们将介绍如何使用 Vue 来构建可复用的关于 Custom Elements 的组件，让你轻松享受到组件化开发的便捷性。
什么是 Custom Elements？
Custom Elements 是一项浏览器的新技术标准，它允许 Web 开发者定义自己的 HTML 标签，创建自定义组件。这样，在开发过程中可以封装业务逻辑，提高代码复用率。
一个 Custom Element 的定义由两个部分组成：
- 标签名称（Custom Element 名称）；
- 定义如何渲染和交互的 JS 类。
在 Vue 中，我们可以使用 Vue CLI 提供的 @vue/cli-plugin-custom-elements 插件，方便地构建和使用 Custom Elements。
开始构建
创建项目
我们使用 Vue CLI 创建一个基础项目，并加入 @vue/cli-plugin-custom-elements 插件：
vue create vue-custom-elements cd vue-custom-elements vue add custom-elements
编写代码
我们以一个简单的计数器组件为例，来说明如何构建 Custom Elements。
首先，在 src 目录下创建一个 Count.vue 文件，编写计数器组件代码：
-- -------------------- ---- -------
----------
-----
------- ----------------------------
-------- ----- ---------
------
-----------
--------
------ ------- -
------ -
------ -
------ -
--
-
--
---------然后，在 main.js 文件中将 Count 组件转化为 Custom Element：
import Vue from "vue";
import wrap from "@vue/web-component-wrapper";
import Count from "./Count.vue";
const CustomElement = wrap(Vue, Count);
window.customElements.define("my-count", CustomElement);上述代码第一行引入了 Vue.js 库，第二行引入 @vue/web-component-wrapper 库，它用于将 Vue 组件转化为 Custom Element。接着，我们将 Count 组件（Vue 组件）传递给 wrap 函数，得到一个能够应用于 Custom Element 的新组件 CustomElement。最后，通过调用 window.customElements.define 函数，将自定义组件注册为一个 HTML 标签 my-count。
使用组件
现在，我们已经成功创建了一个基于 Vue 的 Custom Element，那么在其他页面中我们要如何使用这个组件呢？
在页面中直接按照 HTML 标签的形式引用我们新建的 my-count 即可：
<html>
<body>
<my-count></my-count>
<my-count></my-count>
<my-count></my-count>
<script src="./dist/my-count.js"></script>
</body>
</html>注意：由于我们在 window.customElements.define("my-count", CustomElement); 语句中定义了 my-count 标签，所以在 HTML 中引用组件时必须使用 my-count 标签。
深入理解
上面的例子已经能够演示如何创建和使用一个简单的 Custom Element，但是这个例子还存在一些问题。例如，我们现在只能在 Vue 中使用这个组件，不能在 React、Angular 或者其他框架中使用。接下来，我们将介绍如何让这个组件可以在任何框架中使用。
渲染方式
Custom Elements 支持两种方式渲染自定义组件：
- 插槽投影；
- Shadow DOM。
Vue 默认使用的是插槽投影，它可以让子组件渲染在父组件的固定位置。但是其他框架可能不支持插槽投影，因此我们需要改为使用 Shadow DOM。
在 Vue 中，我们可以使用 @vue/web-component-wrapper 库提供的 VueCustomElement 类来自定义组件的渲染方式：
-- -------------------- ---- -------
------ --- ---- ------
------ ---- ---- -----------------------------
------ ----- ---- --------------
----- ------------- - -----
----
----- ------- ----------- -
------------- -
--------
-- ------ - ------ --- ----
----- ---------- - ------------------- ----- ------ ---
-- ------ --- --- --------- ---- --- ------ ---
----- ------------ - --- -----
------- --- -- ---------
----------
---
-
-
-
---------------------------------------- ---------------如上例所示，我们把 Count 的渲染方式从插槽投影修改为了 Shadow DOM。我们使用 attachShadow 函数创建了一个 Shadow DOM 根节点，并将其赋值给 vueComponent 的 shadowRoot 属性。
这样一来，我们就可以在任何支持 Custom Elements 的框架中使用这个组件了！
参数传递
在 Vue 组件中，通过 props 属性可以实现参数传递。但是，在 Custom Elements 中传递参数则是通过 HTML 属性（Element attribute） 来实现的。
下面是一个在 Vue 组件中定义并使用 props 的例子：
-- -------------------- ---- -------
----------
-----
-------- --- ---------
------
-----------
--------
------ ------- -
------ -
---- ------
-
-
---------在 Custom Elements 中，我们需要通过 HTML 属性来传递相应的参数：
-- -------------------- ---- -------
----- ------------- - -----
----
----- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ------------ - --- -----
---------- -
-- ---- --- ------- ------- -- ---------
---- ------------------------
--
------- --- -- --------------
----------
---
-
-
-
---------------------------------------------- ---------------在这个例子中，我们将 msg 属性改成了一个 HTML 属性 msg，通过调用 getAttribute 方法，将其映射到了组件的 propsData 属性中。
总结
在本文中，我们介绍了如何使用 Vue 构建可复用的 Custom Elements 组件。我们先创建了一个基础的计数器组件，并通过 @vue/cli-plugin-custom-elements 插件将其转化为 Custom Element。接着，我们演示了如何在 HTML 页面中使用新建的组件。最后，我们深入讲解了如何使用 Shadow DOM 渲染 Vue 组件，以及传递参数的方式。
Custom Elements 开放了一个新的世界，能让我们更方便地实现组件化开发。使用 Custom Elements，你可以在不同的 Web 开发框架中共享和复用自定义组件。这种组件化开发的方式可以提高代码的可维护性和重用性，非常值得尝试和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e2d3148841e9894c8804f