自定义元素是 Web 组件的核心。通过使用自定义元素，您可以创建完全定制的 HTML 标记。在本文中，我们将介绍自定义元素，包括如何创建和使用它们。
什么是自定义元素？
自定义元素是由开发者创建的新 HTML 元素，可以使用浏览器的内置元素来继承行为。例如，您可以创建一个自定义按钮元素，使其行为类似于原生 HTML 按钮。
自定义元素有两种类型：autonomous 和 customized。
autonomous 自定义元素
autonomous 自定义元素是完全独立的元素，没有继承自任何内置元素。它们的语法类似于 <x-button>。
要创建一个 autonomous 自定义元素，您需要做以下几个步骤：
创建一个继承自 HTMLElement 的 JavaScript 类。
class MyButton extends HTMLElement { constructor() { super(); // Your code here. } }使用
customElements.define方法将该元素注册为自定义元素，并指定元素名称。customElements.define('my-button', MyButton);在 HTML 中使用该元素。
<my-button></my-button>
可选步骤：您可以添加 Shadow DOM，例如，使按钮外观更加定制化。
-- -------------------- ---- ------- ----- -------- ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ------ - --------------------------------- ------------------ - ------ ----- --------------------------- - -
以上步骤可以将一个简单的 JavaScript 代码块转换为一个可重复使用的自定义元素，可以在其他项目中使用。
customized 自定义元素
customized 自定义元素是继承自 HTML 元素的自定义元素。它们可以重写原生 HTML 元素的行为和样式。
要创建一个 customized 自定义元素，您需要做以下几个步骤：
创建一个继承自原生 HTML 元素的 JavaScript 类。
class MyButton extends HTMLButtonElement { constructor() { super(); // Your code here. } }使用
customElements.define方法将该元素注册为自定义元素，并指定元素名称。customElements.define('my-button', MyButton, { extends: 'button' });在 HTML 中使用该元素。
<button is="my-button">Click me!</button>
可选步骤：您可以添加 Shadow DOM，例如，使按钮外观更加定制化。
-- -------------------- ---- ------- ----- -------- ------- ----------------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ------ - --------------------------------- ------------------ - ------ ----- --------------------------- - -
总结
创建自定义元素是一个非常强大的工具，可以帮助您创建可重用的组件并将其与您的应用程序集成。从注册自定义元素开始，本文提供了一些帮助您入门的指南，自定义元素的自定义程度将取决于您的需求和技能水平。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------------
------- -----------------------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ------ - ---------------------------------
---------------- - ------ -----
-------------------------------
-
-
---------------------------------- ----------
---------
-------
------
-----------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64618ee1968c7c53b02ec09a