从 Polymer 到 WebComponents（四）—— 使用 Custom Elements 创建自定义标签
在前面的几篇文章中，我们一直在介绍 Polymer，这是一个 WebComponents 的框架，可以方便地创建和使用 WebComponents。但是，WebComponents 并不只有 Polymer，还有其它的方法创建和使用。本篇文章将介绍一个比较底层的方法——使用原生的 API 来创建自定义标签。我们将通过示例代码来演示如何使用 Custom Elements 创建自定义标签。
首先，我们需要了解几个概念。Custom Elements 是 WebComponents 的一部分，它允许我们创建自定义的 HTML 元素，并在页面上使用它们。它定义了一个接口，我们可以使用它来定义我们的自定义元素。自定义元素必须要注册，以便浏览器知道如何处理它们。注册一个自定义元素需要使用 customElements 对象。
下面是一个例子，它创建了一个自定义元素 my-element。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
------- ---------------------------------
-------
------
-------------------------
-------
--------- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- ---- - -------------------------------
-------------- - ------- --------
-------------------------
-
-
----------------------------------- -----------我们来看看这段代码做了什么。首先，我们定义了一个名为 MyElement 的类，它继承自 HTMLElement。在类的构造函数中，我们使用 attachShadow 方法创建了一个 shadow DOM。然后，我们创建了一个 span 元素，将它的文本内容设置为 “Hello, World!”。最后，我们将 span 元素作为 shadow DOM 的子元素，这样它就成了自定义元素 my-element 的内容。最后一行代码将 MyElement 类注册成 my-element 自定义元素。
要注意的是，我们使用自定义元素时，必须写在 custom-element.js 文件的后面，否则页面上找不到这个元素，因为它还没有注册成自定义元素。
现在，我们来看看这个例子的运行结果。打开这个 HTML 文件，在浏览器中查看，你会看到页面上显示 “Hello, World!” 文字。这个文字是 my-element 元素的内容。如果你在浏览器的元素面板中查看，你会看到 my-element 元素包含了一段 shadow DOM，其中包含了一个 span 元素和它的文本内容。这就是我们通过 Custom Elements 创建自定义元素的方法。
总结
Custom Elements 是创建和使用 WebComponents 的一种底层方法，它允许我们创建自定义的 HTML 元素，并在页面上使用它们。自定义元素必须要注册，以便浏览器知道如何处理它们。注册一个自定义元素需要使用 customElements 对象。在自定义元素的构造函数中，我们通常会创建 shadow DOM，并将一些元素添加进去，以成为自定义元素的内容。
这种方法需要一些 JavaScript 编程技能，但它与 WebComponents 的其它部分（如 Shadow DOM 和 HTML Templates）紧密结合，提供了强大的功能和灵活性。如果你想深入了解 WebComponents 的原理和实现细节，这种方法会更加适合你。
示例代码
custom-element.js
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- ---- - -------------------------------
-------------- - ------- --------
-------------------------
-
-
----------------------------------- -----------index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
------- ---------------------------------
-------
------
-------------------------
-------
-------运行 index.html，在浏览器中查看。你应该看到页面上显示了 “Hello, World!” 文字。如果在浏览器的元素面板中查看，你会看到 my-element 元素包含了一段 shadow DOM，其中包含了一个 span 元素和它的文本内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64face83f6b2d6eab319aac0