前言
对于前端开发者来说，自定义元素是一个很有用的工具，可以用来解决诸如样式复用、交互性、可维护性等问题。Custom Elements 是一个 Web 标准，可以定制 HTML 标签并创建自定义元素，本篇文章将通过构建一个自定义的时间选择器来介绍 Custom Elements 的基本内容。
自定义元素
在 Custom Elements 规范下，自定义元素以“-”为前缀，可以配合 Shadow DOM 和 HTML Templates 来创建定制化的元素。下面我们来看一下如何创建自定义元素。
定义自定义元素
定义自定义元素需要用到一个类，这个类继承自 HTMLElement，因此可以将自定义元素看作是一种 HTML 元素。
class MyElement extends HTMLElement {
constructor() {
super();
}
}注册自定义元素
定义完自定义元素之后，需要将其注册。使用自定义元素时，需要先在文档中注册元素，然后才能在 HTML 中使用它们。
customElements.define('my-element', MyElement);自定义元素的名称必须包含一个连字符（-）并且不能与现有的 HTML 元素名称相同。一旦注册了自定义元素，它就可以在 HTML 中使用了。
<my-element></my-element>
至此，我们已经完成了第一个自定义元素的创建过程，接下来我们将创建一个时间选择器。
创建时间选择器
HTML 模板
创建自定义元素的第一步是创建其 HTML 模板，本文使用 Template Literal （模板字符串）来创建 HTML。模板字符串允许我们使用 ${} 插入变量，从而使代码更加简单和易于维护。
-- -------------------- ---- -------
----- -------- - -
-------
----- -
-------- -----
--------------- ----
---------------- -------
------------ -------
-
----- -
------- - ----
-
----- -
---------- -----
-
--------
------ ------------------------
------ ------------- --------- --------- ------- ---------
------ ----------------------------
------ ------------- ----------- --------- ------- ---------
--属性和方法
时间选择器需要具有一些属性和方法，我们需要在自定义元素中实现这些。下面是该时间选择器的属性和方法列表：
- hour: 小时数
- minute: 分钟数
- get value(): 获取时间选择器的值
- set value(val): 设置时间选择器的值，val 是一个包含小时分钟的对象
实现代码如下：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-- -- ---
----- ------ - --------------------------------
--------------------------- ----------
------------------------- --------
-------------------------- -----
-------------------------- ------
------------ - ----
----- -------- - --------------------------------
----------------------------- ----------
--------------------------- ----------
---------------------------- -----
---------------------------- ------
-------------- - ----
----- --------- - --------------------------------
----------------------------- --------
--------------------- - --------
----- ----------- - --------------------------------
------------------------------- ----------
----------------------- - ----------
----- ------- - ------------------------------
-------------------------------
----------------------------
---------------------------------
------------------------------
-- ----
----- ----- - -
----- -
-------- -----
--------------- ----
---------------- -------
------------ -------
-
----- -
------- - ----
-
----- -
---------- -----
-
--
-- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-----------------------
--------------------
--
-----------------------------------------------------
-- ----
--------------------------------- -- -- -
------------------------- --------------
---
----------------------------------- -- -- -
--------------------------- ----------------
---
-
------ --- -------------------- -
------ -------- ----------
-
--- ------- -
----- - ----- ------ - - -----
------ - ----- ------ --
-
--- ---------- -
----- - ----- ------ - - ----
--------- - -----
----------- - -------
------------------------- ------
--------------------------- --------
-
--- ------ -
------ ------------------------------------
-
--- --------- -
------------------------- -----
-
--- -------- -
------ --------------------------------------
-
--- ----------- -
--------------------------- -----
-
------------------------------ --------- --------- -
-- --------- --- --------- -
----- - ----- ------ - - -----------
---------------------- --------------------- - ------- - ----- ------ - ----
-
-
-
------------------------------------ ------------使用时间选择器
我们已经定义了一个自定义元素 "time-picker"，现在可以在 HTML 中使用它了。
<time-picker hour="6" minute="30"></time-picker>
time-picker 元素被创建后将会在界面上呈现一个时间选择器。
事件处理
当时间选择器的值发生改变时，我们需要通知外部代码。为了实现这个功能，我们可以在 attributeChangedCallback 函数中触发自定义的 change 事件，然后通过 addEventListener 函数使用该事件。
const timePicker = document.querySelector('time-picker');
timePicker.addEventListener('change', handleChange);
function handleChange(event) {
console.log(event.detail);
}总结
通过本文我们了解了如何使用 Custom Elements 创建自定义元素，并通过一个例子介绍了如何构建时间选择器。希望这篇文章对大家有所帮助，欢迎大家尝试自己编写更多的自定义元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651975c895b1f8cacd19ecd7