在前端开发中，我们经常需要自定义 HTML 元素来满足特定的需求。传统的方法是使用组合和样式来模拟这些元素，但稍有复杂就会变得很困难。不过，现在有了 Custom Elements 标准，我们就可以轻松地创建扩展 DOM 标记了。
什么是 Custom Elements
Custom Elements 是 Web 组件标准的其中一个组成部分。它允许开发人员创建自定义 HTML 元素，并可以在 JavaScript 中控制这些元素的行为。
Custom Elements 规范定义了一组接口，这些接口允许我们定义自己的元素，指定元素的行为，并将其添加到标记中。这样我们就可以在 HTML 中直接使用这些自定义元素，并像使用普通的 HTML 元素一样进行操作。
创建 Custom Elements
要创建 Custom Elements，需要定义一个继承自 HTMLElement 的类，并在类中实现自定义元素的行为和属性。以下是一个简单的例子：
<my-element></my-element>
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
----- -
-------- ------
----------------- -------
-
--------
-------------
--
-
-
----------------------------------- -----------在这个例子中，我们定义了一个 MyElement 类，并将其注册为 my-element 自定义元素。在类构造函数中，我们创建了一个 Shadow DOM，并向其添加了一些样式和插槽。这样，在我们在 HTML 中使用 my-element 标记时，浏览器会自动创建一个 MyElement 实例，并将其添加到 Shadow DOM 中。
通过将样式和插槽添加到实例化元素的 Shadow DOM 中，我们可以确保这些样式和插槽不会与页面中其他元素的样式和插槽混合。这是 Custom Elements 最重要的一点。
自定义属性和方法
要使自定义元素更加灵活和易于使用，我们可以添加自定义属性和方法。这些属性和方法可供 JavaScript 使用，以便在网页中操作自定义元素。例如，我们可以向为我们的 MyElement 类添加一个 name 属性和一个 sayHello 方法：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
----- -
-------- ------
----------------- -------
-
--------
---------- -------------------
--
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
-
---------- -
------------------- ----------------
-
-
----------------------------------- -----------现在我们可以在 HTML 中使用 name 属性来设置 MyElement 的名称，并通过 JavaScript 调用 sayHello 方法来打印问候语。
<my-element name="world">World</my-element>
const element = document.querySelector('my-element');
element.sayHello(); // "Hello, world!"总结
通过使用 Custom Elements，我们可以创建自定义 HTML 元素，并将它们添加到我们的网页中。通过自定义属性和方法，我们可以使这些元素更加灵活和可复用。Custom Elements 是一个很好的方式来提高我们的开发效率和代码复用性。
如果您想了解更多关于 Custom Elements 的信息，可以参考 MDN 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64701e73968c7c53b0e4230e