使用 Custom Elements 创建修改器和进度条
Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义的 HTML 元素，这些元素可以拥有自己的属性、方法和事件。使用 Custom Elements，我们可以轻松地创建一些常用的 UI 控件，比如修改器和进度条。
本文将介绍如何使用 Custom Elements 创建修改器和进度条，包括如何定义元素的属性、方法和事件，以及如何使用 Shadow DOM 和 CSS 定制元素的样式。
创建修改器
修改器是一种常用的 UI 控件，它可以让用户在一个范围内选择一个数值。使用 Custom Elements，我们可以很容易地创建一个修改器元素。
首先，我们需要定义一个类来表示修改器元素：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ------ - ------------------- ----- ------ ---
-- -- --- --
----- ----- - --------------------------------
---------- - ---------
----------- - -------------------------- -- --
--------- - ------------------------ -- --
--------- - ------------------------ -- ----
-- - --- ----- ------ --- -
--------------------------
-
-- -- ----- --
--- ------- -
------ ---------------------------------------------
-
--- ---------- -
-------------------------------------------- - ----
-
-- -- ------ --
------------------- -
----------------------------------------------------------------- -- -- -
---------------------- -----------------
---
-
-
-- ----
-------------------------------------- --------------上面的代码中，我们首先定义了一个 NumberPicker 类，它继承自 HTMLElement。在构造函数中，我们创建了一个 Shadow DOM，并在其中创建了一个 input 元素。我们还定义了 value 属性和 change 事件。
在 connectedCallback 方法中，我们将 change 事件绑定到 input 元素上，并在事件处理函数中分发了一个 change 事件。
最后，我们通过调用 customElements.define 方法来注册 number-picker 元素。
现在，我们就可以在 HTML 中使用 number-picker 元素了：
<number-picker value="50" min="0" max="100"></number-picker>
上面的代码中，我们创建了一个 number-picker 元素，并指定了它的 value、min 和 max 属性。
通过 JavaScript，我们可以像操作普通的 DOM 元素一样操作 number-picker 元素：
const picker = document.querySelector('number-picker');
picker.value = 75;
picker.addEventListener('change', () => {
console.log(`value changed to ${picker.value}`);
});上面的代码中，我们获取了 number-picker 元素，并修改了它的 value 属性。我们还监听了它的 change 事件，并在事件处理函数中输出了新的值。
创建进度条
进度条是另一种常用的 UI 控件，它可以让用户看到一个任务的进度。使用 Custom Elements，我们可以轻松地创建一个进度条元素。
首先，我们需要定义一个类来表示进度条元素：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ------ - ------------------- ----- ------ ---
-- -- --- --
----- -------- - ------------------------------
-------------------- - -------------------------- -- -----
--------------------- - -------
------------------------------ - -------------------------- -- -------
-- - --- ----- ------ --- -
-----------------------------
-
-- -- ----- --
--- ------- -
------ -------------------------------------------------
-
--- ---------- -
------------------------------------------------ - ----
-
-
-- ----
------------------------------------- -------------上面的代码中，我们定义了一个 ProgressBar 类，它继承自 HTMLElement。在构造函数中，我们创建了一个 Shadow DOM，并在其中创建了一个 div 元素。我们还定义了 value 属性。
在 connectedCallback 方法中，我们将 width 样式绑定到 value 属性上。
最后，我们通过调用 customElements.define 方法来注册 progress-bar 元素。
现在，我们就可以在 HTML 中使用 progress-bar 元素了：
<progress-bar value="50%" color="green"></progress-bar>
上面的代码中，我们创建了一个 progress-bar 元素，并指定了它的 value 和 color 属性。
通过 JavaScript，我们可以像操作普通的 DOM 元素一样操作 progress-bar 元素：
const bar = document.querySelector('progress-bar');
bar.value = '75%';上面的代码中，我们获取了 progress-bar 元素，并修改了它的 value 属性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d30f68a941bf71345d21e7