前言
在实际项目中，很多时候都需要用到一些自定义的组件。此时，我们要么自己手写一遍，要么使用第三方的 UI 库，然而前者会浪费很多时间，而后者的样式定制又会非常麻烦，特别是在多人开发的产品中，更多的时候我们需要自己实现一个轻量级的组件库。
而自定义组件一般涉及到 DOM 操作，这里就推荐一种前端技术——Custom Elements，是的，新时代的 Web 组件标准来了。
什么是 Custom Elements
Custom Elements 是由浏览器原生支持的一门技术，它使得开发者可以定义自己的 HTML 元素，扩展现有的 HTML 元素，并能够像使用标准 HTML 元素一样使用它们。换句话说，Custom Elements 是一种让我们可以自定义 HTML element 的技术。
Custom Elements 叧可以创建一些内置 Web API 和浏览器 UI 部件，并能够实现一些自定义的行为。
实现 Input 组件
定义 Input 元素
在定义 Input 元素之前，我们需要先导入Web Components 的主要 API：CustomElementRegistry、HTMLElement、ShadowRoot。
const { customElements, HTMLElement, ShadowRoot } = window;CustomElementRegistry 中有两个关键方法：
- define(name, constructor)：用来定义一个新的自定义元素，并返回一个构造函数；
- get(name)：用来获取当前文档和上下文中配置的自定义元素命名的元素构造函数。
下面，我们就来定义一个名为 InputElement 的自定义元素。
class InputElement extends HTMLElement {
constructor() {
super(); //调用父类构造方法
}
}
customElements.define('wc-input', InputElement);上面的代码中，我们继承了 HTMLElement 构造函数，并且用 customElements.define 方法注册了 wc-input。在这一步，定义 Input 元素已经完成了。
添加 Shadow DOM
接下来，让我们为 InputElement 添加 Shadow DOM。Shadow DOM 是一种独立的 DOM 树结构，它从主 DOM 树中抽象出来，可以用于封装自定义组件的内部实现。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
-------- ----------
----- ---------- - ------------------- ----- ------ ---
-- -- ------ --- ---
----- ------- - ------------------------------
----------------------------- -----------
--------------------------------
-- -- ----- --
----- ----- - --------------------------------
--------------------------- ----------------
---------------------------
-
-
--------------------------------- --------------在上面的代码中，我们通过 attachShadow 方法将 Shadow DOM 树附加到 InputElement 上，然后创建一个名为 wrapper 的 div 节点，并设置属性 class 为 wrapper。接着，我们通过 appendChild 方法将它添加到 Shadow DOM 树上。
然后，我们在 wrapper 节点内部再次创建一个名为 input 的元素，并设置属性 class 为 custom-input，然后再将其添加到 wrapper 内部，并在屏幕上显示出来。
添加 CSS 样式
既然我们已经定义了一个 InputElement 元素，我们就需要为它添加一些样式。
-- -------------------- ---- ------- -------- - -------- ----- ------------ ------- ----------------- ------- -- -- ------ -------- ---- -------------- ---- - ------------- - ------- ----- ------ ----- -------- ----- ---------- ----- -
我们为 Wrapper 节点设置了一些 CSS 样式，如 display: flex 使得它成为了一个 flex box，align-items: center让它的子元素垂直居中，background-color、 padding 和 border-radius 为它的样式提供了一些装饰性质，其中 border-radius 是为了更好的 UI 设计。
同时，我们也在 Input 元素添加了一些自定义的样式。
添加事件
现在我们已经实现了一个基本的 Input 组件，但是，我们在实际项目开发中必须考虑到组件的可用性。这时，我们就可以为 Input 元素添加事件来提高其互动性。
在本案例中，我为 Input 元素添加了两个事件：focus 和 blur。当用户进入输入框时，将会触发 focus 事件；当用户离开输入框时，则会触发 blur 事件。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
-------- ----------
----- ---------- - ------------------- ----- ------ ---
-- -- ------ --- ---
----- ------- - ------------------------------
----------------------------- -----------
--------------------------------
-- -- ----- --
----- ----- - --------------------------------
--------------------------- ----------------
------------------------------- -- -- -
------------------ --------
---
------------------------------ -- -- -
------------------ -------
---
---------------------------
-
-
--------------------------------- --------------在代码中，我们先添加了两个事件的监听器，然后我们在输入框中使用 console.log 输出事件的触发。
属性数据绑定
Custom Elements 还支持自定义属性，我们可以使用自定义属性来绑定数据，通过属性的更改去改变组件状态，最后从当前输入框获取相应的数据。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ------- - ------------------------------
----------------------------- -----------
--------------------------------
----- ----- - --------------------------------
--------------------------- ----------------
------------------------------- -- -- -
---------------------------- ----
---
------------------------------ -- -- -
--------------------------------
---
---------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----- ----- - ---------------------------------------
----------- - ---------
-
-
--- ------- -
----- ----- - ---------------------------------------
------ ------------
-
--- ------------ -
-------------------------- -------
-
-
--------------------------------- --------------代码中可以看到，为了绑定数据，我们：
使用
this.setAttribute方法设置名为value的自定义属性；通过事件
attributeChangedCallback监听到value属性的变更，并在其中将输入框的值更新为属性的值；使用
this.getAttribute获取属性值。
通过这种方式，我们可以将数据从当前产生 Input 的组件地址传递，并使其与原始组件同步属性数据。
使用 Input 组件
到这里，我们已经完成了一个简单的 Custom Elements Input 组件，现在我们现在就来简单使用一下定义好的自定义组件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- -------------
-------
---- -
-------- -----
---------------- -------
------------ -------
------- ------
-
--------
-------
------
--------- -------------------------
-------
-------以上是通过自定义标签 wc-input 来使用 Custom Elements 实现的浏览器兼容性，目前除 IE 外，其它现代浏览器都支持 Custom Elements。
总结
最终，自定义元素依然是标准的 DOM 对象，遵守 web 标准，他可以处理复杂逻辑、样式和 DOM 集成的详细细节。并且 Custom Elements 在浏览器的响应式设计、跨设备布局等应用场景，均具备不同的价值。 Custom Elements 底层 API 的机制使其更加自由。自定义元素可以注册为现有 element 的子元素，其他元素也可以充当 shadow DOM 中的自定义元素的宿主。
当然，这篇文章中的 Input 组件只是做为一个示例来说明 Custom Elements 的基础用法，底层原理还很复杂，如果让你开发一个真正的组件库以及项目，还需要更多丰富的实践和经验积累。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7a8c448841e98944253bb