什么是 Custom Elements？
Custom Elements 是一种 Web 标准，它允许开发者创建自定义的 HTML 元素，这些元素可以拥有自己的行为和属性。这些自定义元素可以像普通的 HTML 元素一样使用，并且可以通过 JavaScript 进行扩展和操作。
使用 Custom Elements 可以让开发者创建更加灵活和可复用的 Web 组件，而不需要依赖特定的框架或库。
如何创建 Custom Elements？
创建 Custom Elements 有两种方式：继承 HTMLElement 类和使用 document.registerElement() 方法。本文将介绍使用 document.registerElement() 方法创建 Custom Elements。
创建 Custom Elements 步骤
- 定义 Custom Elements 名称和行为
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------------- -----------
-
------------------- -
---------------------- -------------
-
---------------------- -
---------------------- ----------------
-
------------------------------ --------- --------- -
---------------------- --------- - - ---- - - ------- ---- - - -------- - - -- - - -------- - -----
-
-上面的代码定义了一个名为 MyElement 的 Custom Elements，它继承了 HTMLElement 类，并重写了一些生命周期方法：
- constructor(): 当 Custom Elements 被创建时调用。
- connectedCallback(): 当 Custom Elements 被插入到文档中时调用。
- disconnectedCallback(): 当 Custom Elements 从文档中移除时调用。
- attributeChangedCallback(name, oldValue, newValue): 当 Custom Elements 的属性值被修改时调用。
- 注册 Custom Elements
customElements.define('my-element', MyElement);上面的代码使用 customElements.define() 方法注册了 MyElement。
第一个参数是元素名称，必须包含一个连字符，例如 my-element。
第二个参数是 Custom Elements 类型。
- 使用 Custom Elements
<my-element></my-element>
上面的代码使用了自定义的 my-element 元素。
如何操作 Custom Elements？
使用 Custom Elements 可以像普通的 HTML 元素一样操作，例如：
const element = document.querySelector('my-element');
element.setAttribute('name', 'value');
element.removeAttribute('name');
element.classList.add('class');
element.classList.remove('class');
element.addEventListener('click', () => {});
element.removeEventListener('click', () => {});如何在 Custom Elements 中使用 Shadow DOM？
Shadow DOM 是一个 Web 标准，它允许开发者创建封装的 DOM 树，并将其附加到一个元素上。使用 Shadow DOM 可以让开发者创建更加封装和安全的 Web 组件。
在 Custom Elements 中使用 Shadow DOM 有两种方式：使用 attachShadow() 方法和继承 ShadowRoot 类。
使用 attachShadow() 方法
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
----- -
-------- ------
------- --- ----- ------
-
--------
----------- ------------
--
-
-上面的代码在 MyElement 中创建了 Shadow DOM，并将其附加到 MyElement 上。其中，mode 参数可以是 open 或 closed，open 表示可以通过 JavaScript 操作 Shadow DOM，closed 表示不能。
继承 ShadowRoot 类
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
------------------------- - -
-------
----- -
-------- ------
------- --- ----- ------
-
--------
----------- ------------
--
-
-上面的代码继承了 ShadowRoot 类，并在 connectedCallback() 中创建了 Shadow DOM。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
----- -
-------- ------
------- --- ----- ------
-
--------
----------- ------------
--
-
------------------- -
---------------------- -------------
-
---------------------- -
---------------------- ----------------
-
------------------------------ --------- --------- -
---------------------- --------- - - ---- - - ------- ---- - - -------- - - -- - - -------- - -----
-
-
----------------------------------- -----------
----- ------- - -------------------------------------
---------------------------- ---------
--------------------------------
-------------------------------
----------------------------------
--------------------------------- -- -- ----
------------------------------------ -- -- ----
---------
-------
-------结论
Custom Elements 是一种强大的 Web 标准，它可以让开发者创建更加灵活和可复用的 Web 组件，而不需要依赖特定的框架或库。使用 Custom Elements 可以让开发者更加自由地设计和开发 Web 应用程序，同时也可以提高代码的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67625722856ee0c1d400499a