什么是 Custom Elements？
Custom Elements 是 Web Components 套件的一部分，是一个可以用于创建自定义 HTML 元素的 API。
使用 Custom Elements API，您可以创建带有自定义行为的 HTML 标记。您可以将其添加到现有的网站中以增强功能，或者开发自己的 Web 应用程序。
Custom Elements 采用“类构造函数”的形式，因此您可以定义新元素的方法和属性。
初步入门
要创建一个自定义元素，您需要使用customElements.define()方法，它采用两个参数：
- 元素名称
- 包含自定义元素行为的类
例如，要创建名为my-element的自定义元素，您可以创建一个类并将其分配给元素：
class MyElement extends HTMLElement {
constructor() {
super();
// code goes here
}
}
customElements.define('my-element', MyElement);上面的代码将 MyElement 类分配给my-element元素。该类功能为空，但是您可以添加您自己的方法和属性。
要使用自定义元素，您可以在 HTML 中包含它：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------- ---------------
-------
------
-------------------------
------- -----------------------------
-------
-------但是，您应该在 Custom Elements 支持的浏览器中使用 polyfill 来指定这些元素的行为。此处我们使用 Polyfill.io 嵌入标签进行 polyfill，以支持旧版本的浏览器。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------- ---------------
------- ----------------------------------------------------------
-------
------
-------------------------
------- -----------------------------
-------
-------现在，您可以通过在 MyElement 类的构造函数中添加自定义行为来扩展自定义元素。
下面，我们按照这种方式添加一个文本属性、一些根据其属性值更改的样式，在元素被插入到文档中时自动注册事件，并自定义connectedCallback()方法。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
--------- - --------------------------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
---------- -
----------------- -----
-------- -----
-
-------------- -
----------------- -----
-
--------------- -
----------------- -----
-
--------
---- ------------------------------------
--
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
----- --------- - --------------------------------------------
-------------------------------------
----------------------------------
-
------------------- -
------------------------------ -- -- -
------------------- ---------
---
-
--- ----------- -
------------------------- -------
-
--- ------ -
------ --------------------------
-
--- ------------ -
-------------------------- -------
-
--- ------- -
------ ---------------------------
-
-
----------------------------------- -----------进阶应用
通过与 Custom Elements 的结合使用，您可以创建一个功能强大的 Web 应用程序。
下面是一个使用 Custom Elements、Fetch API 和 Web Component 的示例代码片段，使用 Github API 获取一个用户的存储库：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
-- -
----------- -----
------- --
-------- --
-
-- -
-------- -----
------------ -------
------- ---- --
-
------- -
------ -----
------- -----
------------- -----
-
--------
---------
--
------------------------------------------------------------------------
-------------- -- ----------------
----------- -- -------------------------
-
------------------ -
----- -- - ------------------------------------
------------------ -- -
----- -- - -----------------------------
----- --- - ------------------------------
----- - - ----------------------------
----------------------- -----------------------
------------------------- ----------
------------- - ----------
---------------------- ---------------
--------------------
------------------
-------------------
---
-
--- ----------- -
------------------------- -------
-
--- ------ -
------ --------------------------
-
-
------------------------------------- -------------现在，您可以在任何页面上包含<github-repos>标记，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---- ---------------
------- ----------------------------------------------------------
-------
------
------------- ------------------------------
------- -------------------------------
-------
-------总结
Custom Elements 使得开发者可以创建自定义 HTML 元素，这为 Web 开发者提供了更好的灵活性和可扩展性。
使用 Custom Elements，您可以编写具有特定行为和功能的自定义元素，一旦定义，您可以轻松地在 HTML 中重复使用它们。
Custom Elements 能够让人轻松写出更好的 Web 应用程序，并且在未来可能成为 Web 规范的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ff4c448841e9894e18d8a