介绍
Web Components 是一种用于创建可重用的自定义元素的技术。Custom Elements 是 Web Components 的一部分，它使得我们能够创建新的 HTML 元素并在多个应用程序和页面上共享它们。
Custom Elements 的目的就是将 HTML 实现组件化，让组件的使用和封装变得更加简单、易于维护。在此过程中，我们需要关注一些细节问题，如命名规范、全局状态等，本文将会提供详细的指导。
本文将首先介绍 Custom Elements 的基础概念，然后根据需求情况，提供通用的 Web Components 的实现方案，最后讨论如何在 Vue、React 等框架中使用 Web Components。
基础概念
Custom Elements 是指通过编写 JavaScript 代码创建一组自定义标签，在 Web 应用中使用它们可以简化代码的编写和维护。一个组件由以下几部分组成:
- 元素名：组件的元素名称，需要满足自定义元素规范，即包含一个短横线，如 my-element。
- Shadow DOM 树：组件内部的 DOM 结构，没有被页面中其它部分的样式和脚本修改的能力。
- Attributes 定义：定义组件的属性，主要用于传递数据和响应属性变化。
- 生命周期钩子：用于自定义元素的属性更改、捆绑和卸载。
- 方法和事件：组件内部的自定义方法和事件，用于与外部交互。
构建通用的 Web Components
在构建通用的 Web Components 时，我们需要注意如下几点：
命名规范
为了确保代码的可重用性，元素名称应该足够独特、具有语义和可读性。
例如，若我们要创建一个叫做“评分星级”的元素，则其名称应该为“star-rating”。
class StarRating extends HTMLElement {}
customElements.define('star-rating', StarRating);封装样式
为了避免 CSS 样式的全局污染，我们使用 Shadow DOM 树来封装样式。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
----- -
-------- -------------
---------- -----
-
------- -
-------- -----
---- ----
------ -----
-
--
--------------------------
----- ------ - ------------------------------
--------- - ---------
---------------- - --------
---------------------------
-
-
------------------------------------ ------------构建属性
属性允许外部传入数据，并根据属性的变化执行相应的操作。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
----- -
-------- -------------
---------- -----
-
------- -
-------- -----
---- ----
------ -----
-
--
--------------------------
----- ------ - ------------------------------
--------- - ---------
---------------- - --------
---------------------------
----- ----- - --------------------------------
-------------------------- ---------
------------------------- -----
------------------------- -----
--------------------------- -----
------------------------------- -- -- -
----- ----- - -------------------------------- - -- - ------------ - --------------------- - ---
---------------- - ------
---
--------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----- ----- - ---------------------------------------
----------- - -------------------
----------------------- ----------------
-
-
-
------------------------------------ ------------生命周期钩子
生命周期钩子允许我们重载元素在各个阶段的方法，例如构造函数、属性更改方法、元素卸载方法等。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
----- -
-------- -------------
---------- -----
-
------- -
-------- -----
---- ----
------ -----
-
--
--------------------------
----- ------ - ------------------------------
--------- - ---------
---------------- - --------
---------------------------
----- ----- - --------------------------------
-------------------------- ---------
------------------------- -----
------------------------- -----
--------------------------- -----
------------------------------- -- -- -
----- ----- - -------------------------------- - -- - ------------ - --------------------- - ---
---------------- - ------
---------------------- ---------------------------------- - ------- - ------ --------------------- - ----
---
--------------------------
-
------------------- -
--------------------------
-
---------------------- -
-----------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----- ----- - ---------------------------------------
----------- - -------------------
----------------------- ----------------
-
-
-
------------------------------------ ------------方法和事件
我们使用 CustomEvent 来绑定自定义事件，方便我们与自定义元素进行交互。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
----- -
-------- -------------
---------- -----
-
------- -
-------- -----
---- ----
------ -----
-
--
--------------------------
----- ------ - ------------------------------
--------- - ---------
---------------- - --------
---------------------------
----- ----- - --------------------------------
-------------------------- ---------
------------------------- -----
------------------------- -----
--------------------------- -----
------------------------------- -- -- -
----- ----- - -------------------------------- - -- - ------------ - --------------------- - ---
---------------- - ------
---------------------- ---------------------------------- - ------- - ------ --------------------- - ----
---
--------------------------
-
------------------- -
--------------------------
-
---------------------- -
-----------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----- ----- - ---------------------------------------
----------- - -------------------
----------------------- ----------------
-
-
--- ------- -
------ ---------------------------
-
--- --------------- -
-------------------------- ----------
-
-
------------------------------------ ------------在框架中使用 Web Components
在框架中使用 Web Components 主要有两个问题需要解决：
- 如何在框架中加载 Web Components？
- 如何从 Web Components 与框架进行交互？
Vue 中使用 Web Components
在 Vue 中使用 Web Components 需要先进行 Web Components 的引入。在 main.js 中，我们需要引入一个 Web Components 的 polyfill，然后再全局注册 Web Components。
-- -------------------- ---- ------- ------ --- ---- ------ ------ ---------------------------------------------------------------- ------ --------------------------- ------------------------ - ------ --- ----- ------- - -- ------- ------------------
上述代码中，我们引入 Web Components 的 polyfill，并全局注册 star-rating 组件。在组件中，我们可以使用 CustomEvent 来与 Vue 进行交互。
mounted() {
this.$refs.input.addEventListener('star-rating-changed', event => {
this.$emit('star-rating-changed', event.detail.value);
});
},React 中使用 Web Components
在 React 中使用 Web Components 需要在 JSX 中引入 Web Components，并使用 ref 来获取 Web Components 的实例。然后我们可以使用 ref.current 操作 Web Components，并在 Web Components 中使用 CustomEvent 和 React 进行交互。
-- -------------------- ---- -------
------ ------ - ------- --------- - ---- --------
------ ------------
------ ----------------------------------------------------------------
------ ---------------------------
-------- ----- -
----- ------------- - -------------
------------ -- -
------------------------------------------------------------- ----- -- -
--------------------------------
---
-- ----
------ -
---- ----------------
------------ ------------------- ------------------------
------
--
-
------ ------- ----结论
Custom Elements 是 Web Components 的一部分，它可以让我们按需加载自定义的 HTML 元素。在构建通用的 Web Components 时，我们需要关注元素的命名规范、样式封装、属性定义、生命周期钩子、方法和事件。同时，在框架中使用 Web Components 时，我们需要解决 Web Components 的加载和 Web Components 与框架的通信问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f263baa44b36ee5765cee2