Custom Elements 是 Web Components 的一部分，它可以让我们定义自己的 HTML 元素，并为其添加新的行为和属性。在本文中，我将介绍如何使用 Custom Elements 实现复选框和单选框的功能。
复选框
复选框是一种允许用户选择多个选项的表单控件。在 Custom Elements 中，我们可以使用以下代码来创建一个复选框：
-- -------------------- ---- -------
--------- -----------------------
-------
----- -
-------- -------------
-
----- -
------------- ----
-
----- -
------- --------
-
--------
-------
------ ----------------
-------------
--------
-----------
--------
----- -------------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------------
----- --------------- - -----------------
------------------- ----- ------ ------------------------------------------------
----- ----- - ---------------------------------------
-------------------------------- -- -- -
---------------------- --------------------- -
-------- -----
------- -
-------- --------------
-
----
---
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
----- ----- - ---------------------------------------
-- ----- --- --------- -- ------------- --- --------- --- ------ -
------------- - --------- --- ------
-
-
--- --------- -
----- ----- - ---------------------------------------
------ --------------
-
-
---------------------------------------- ----------------
---------这段代码中，我们首先在模板中定义了一个包含 label 和 input 元素的模板，其中 label 用于显示文本，input 用于实现复选框的功能。在 CustomCheckbox 类中，我们通过构造函数创建了一个 shadow DOM，然后将模板内容添加到 shadow DOM 中。同时，我们还为 input 元素添加了一个 change 事件，以便在值发生变化时向外部发送 change 事件。
在 CustomCheckbox 类中，我们还定义了一个 observedAttributes 属性，用于监听 checked 属性的变化。在 attributeChangedCallback 函数中，我们检查 checked 属性的值是否发生了变化，并将新值应用到 input 元素中。最后，我们还定义了一个 checked getter，用于获取当前复选框的状态。
使用 CustomCheckbox 元素时，我们可以像这样设置其 checked 属性：
<custom-checkbox checked>选项一</custom-checkbox> <custom-checkbox>选项二</custom-checkbox> <custom-checkbox>选项三</custom-checkbox>
单选框
单选框是一种类似复选框的表单控件，用于允许用户从多个选项中选择一个。在 Custom Elements 中，我们可以使用以下代码来创建一个单选框：
-- -------------------- ---- -------
--------- --------------------
-------
----- -
-------- -------------
-
----- -
------------- ----
-
----- -
------- --------
-
--------
-------
------ -------------
-------------
--------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------
----- --------------- - -----------------
------------------- ----- ------ ------------------------------------------------
----- ----- - ---------------------------------------
-------------------------------- -- -- -
---------------------- --------------------- -
-------- -----
------- -
------ ------------
-
----
---
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
----- ----- - ---------------------------------------
-- ----- --- --------- -- ------------- --- --------- --- ------ -
------------- - --------- --- ------
-
-
--- ------- -
----- ----- - ---------------------------------------
------ ------------
-
--- ---------- -
----- ----- - ---------------------------------------
----------- - ----
-
--- --------- -
----- ----- - ---------------------------------------
------ --------------
-
-
------------------------------------- -------------
---------这段代码与 CustomCheckbox 的实现类似，不同之处在于我们定义了一个 value 属性和 setter。这样，我们就可以为每一个单选框设置一个唯一的值，在选中一个选项时，可以使用 value 属性获取选项的值。
使用 CustomRadio 元素时，我们可以像这样设置其 value 和 checked 属性：
<custom-radio value="1" checked>选项一</custom-radio> <custom-radio value="2">选项二</custom-radio> <custom-radio value="3">选项三</custom-radio>
总结
在本文中，我们学习了如何使用 Custom Elements 来创建复选框和单选框。Custom Elements 的强大之处在于它可以让我们在不修改现有 HTML 元素的情况下，添加新的行为和属性。这使得我们可以更加灵活地创建自定义表单控件，以满足各种不同的需求。我希望这篇文章对你有所启发，可以让你更好地了解 Custom Elements 的使用和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484282148841e989434ff6d