在现代的 Web 应用程序中，自定义标记语言和自定义组件已经成为了一种非常强大的工具。 Custom Elements 正是其中一种，它允许开发者创建出独特的、功能强大的 web 组件。在本篇文章中，我们将通过实例，学习如何使用 Custom Elements 自定义一个静音开关按钮。
1. Custom Elements 简介
Custom Elements 是 Web Components 规范的一部分，它允许我们创建全新的标记语言和组件，并在全局命名空间内使用它们。Custom Elements API 提供了基础的组件化 API：customElements.define，用来定义自定义元素，并且其 API 支持攸关生命周期、属性、方法、事件等，支持扩展内置 HTML 标签元素，能够为各种常规的 HTML 标记赋予更丰富的特性和行为。
2. 自定义静音开关按钮实现
首先，我们需要创建一个 Custom Element，用来表示静音开关按钮。我们需要提供以下内容：
- 自定义元素的名称，这个名称将被用于在 HTML 中实例化并配置元素。
- 该元素需要具有的行为、属性和样式。
-- -------------------- ---- -------
--------- --------------------------
-------
---------- -
-------- -----
---------------- -------
------------ -------
--------- ---------
------ -----
------- -----
------- --- ----- ------
-------------- -----
----------- ------
------- --------
-
---- -
--------- ---------
----- ----
---- ----
------ -----
------- -----
-------------- ----
----------- ------
----------- --------- -----
-
------------- ---- -
---------- ----------------
-
--------
---- ------------------
---- ------------------
------
-----------
--------
----- -------- - --------------------------------------------------------
----- ---------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
------- - ------
-
---------- -
------- - ---------
----- --------- - --------------------------------------------
---------------------------------
-
-
------------------------------------ ------------
---------我们创建了一个 <mute-switch> 元素，它具有一个 toggleOn 方法和一个 on 属性，使用该方法可以切换静音状态，使用属性可以查询当前是开启还是关闭。我们为这个元素定义了一些样式，并添加到了一个 Shadow DOM 中，保护了自定义元素的样式。在 Shadow DOM 内部，我们使用了 <template> 元素，包含了定义元素的基础 HTML。
所有此元素实例创建后都会在 Shadow DOM 内部发现构建完成的 HTML，可以在标准 HTML 中像这样使用：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------ ------------ ------- ------------------------------ ------- ------ --------------------------- ------- -------
3. 结论
使用 Custom Elements API 实现自定义组件很容易，开发者可以在独立的全局命名空间内使用自定义标记，创建更强大、复杂或直接和应用程序需求相匹配的组件。使用 Shadow DOM 可以更好的隔离样式和节点，使元素更容易打包、共享、复用。在实践中，我们需要思考组件的实现细节，考虑到组件设计的易用性、可扩展性、可维护性等等，这样才能更具有实际意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729918e2e7021665e24f28b