Custom Elements （自定义元素）是 Web Components 的一部分，是一种用于创建自定义 HTML 元素的 API。Custom Elements API 可以让开发者创建自定义的 HTML 元素，同时也可以定义这些元素与 JavaScript 的交互方式。Custom Elements 通过使用一组新的 JavaScript class 和 API，让开发者可以定义自己的 HTML 元素，并且使这些元素拥有普通 HTML 元素的一切特性。
Custom Elements 的使用
创建 Custom Elements
Custom Elements 可以用 ES6 的 class 语法来创建自定义元素，通过继承原生 HTMLElement 类，开发者能够在子类中扩展和重写原生元素的行为和属性。例如，下面这段代码可以创建一个叫做“my-element”的自定义元素：
class MyElement extends HTMLElement {
constructor() {
super();
// ...
}
}
customElements.define('my-element', MyElement);这个自定义元素在使用时，就可以在 HTML 中用标签的形式来引用，例如：
<my-element></my-element>
修改元素的行为和样式
通过自定义元素，我们可以修改元素的行为和样式。比如，如果我们想要在元素创建时进行初始化操作，可以重写构造函数（constructor）的方法。例如：
class MyElement extends HTMLElement {
constructor() {
super();
// 添加文本内容
this.textContent = 'Hello, World!';
}
}
customElements.define('my-element', MyElement);还可以使用 HTML 的一些事件来响应用户的行为，比如 click、hover、focus、blur 等等。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---
-- ----------
------------------------------ -- -- -
-------------------- -----------
---
-
-
----------------------------------- -----------定义元素的属性
自定义元素可以具备属性。这些属性可以在元素标签上配置，或者在 JavaScript 中直接设置。下面这个例子定义了一个名为 name 的属性：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
-- --------
--- ------ -
------ --------------------------
-
--- --------- -
------------------------- -----
-
-
----------------------------------- -----------这样，我们就可以在 HTML 中这样使用：
<my-element name="my-name"></my-element>
在 JavaScript 中，我们也可以这样设置：
const myElement = document.createElement('my-element');
myElement.name = 'my-name';定义元素的影子 DOM
在自定义元素内部，还可以定义影子 DOM。影子 DOM 是在自定义元素内部创建的一个 DOM 子树，用于存储元素的样式和结构。当我们想要改变自定义元素的外观时，可以直接修改影子 DOM 中的元素，而不需要改变原有的页面结构。下面这个例子定义了一个包含一个按钮的自定义元素：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---- ---
----- -------- - -----------------------------------
------------------ - -
-------
------ -
------ ------
----------------- -----
------- -----
-
--------
--------
-------------
-----------
------------------- ----- ------ ---
--------------------------------------------------------------
-
-
----------------------------------- -----------上面的代码中，我们创建了一个 button 单元素，将其放到了影子 DOM 内。我们还使用了 shadowRoot 属性来操作自定义元素的影子 DOM。
在 HTML 中，我们可以这样使用：
<my-element>Click me</my-element>
定义元素的方法
我们还可以在自定义元素中定义方法来操作元素，如下例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
-- ----
---------- -
------------------- ---------
-
-
----------------------------------- -----------在 JavaScript 中，我们可以像调用类的方法一样来调用自定义元素的方法：
const myElement = document.createElement('my-element');
myElement.sayHello();Custom Elements 的限制
兼容性
尽管 Custom Elements 规范已经发布多年，但并不是所有的浏览器都支持该标准。目前，除了 IE 和早期版本的 Edge 外，现代浏览器均支持 Custom Elements API。为了更好的兼容性，我们可以使用 Web Components 的 Polyfill 工具，实现对旧版浏览器的兼容。
Shadow DOM 的限制
影子 DOM 的一些限制也同时影响到了 Custom Elements 的开发。它们具体表现在：
- 无法使用类 CSS 的特性选择器
由于影子 DOM 的作用，保护了自定义 DOM 的样式。如果想要使用类 CSS 的特性选择器，并无法通过 ID 和 Class 来进行引用。如果此时对影子 DOM 中的选择器进行样式的修改，不会对标准 HTML 元素产生影响。此时，可以通过添加 CSS 变量来实现。
- 不能从影子 DOM 内部影响外部样式
影子 DOM 的目的在于为自定义元素创建一个封装的 DOM 环境。使用样式，也只是针对好自定义元素内部环境的调整，而无法对外部进行影响。
总结
Custom Elements API 让开发者可以通过 JavaScript 代码编写自定义标签元素，进而实现制定的交互效果并提高元素的可复用和可维护性。尽管其有兼容性和 Shadow DOM 的限制，但随着浏览器的进步并依靠添加 Polyfill，这些问题也将逐渐被解决。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646a1fe4968c7c53b09db56f