使用 Custom Elements 创建修改器和进度条
Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义的 HTML 元素，这些元素可以拥有自己的属性、方法和事件。使用 Custom Elements，我们可以轻松地创建一些常用的 UI 控件，比如修改器和进度条。
本文将介绍如何使用 Custom Elements 创建修改器和进度条，包括如何定义元素的属性、方法和事件，以及如何使用 Shadow DOM 和 CSS 定制元素的样式。
创建修改器
修改器是一种常用的 UI 控件，它可以让用户在一个范围内选择一个数值。使用 Custom Elements，我们可以很容易地创建一个修改器元素。
首先，我们需要定义一个类来表示修改器元素：
// www.javascriptcn.com code example
class NumberPicker extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
const shadow = this.attachShadow({ mode: 'open' });
// 创建 DOM 元素
const input = document.createElement('input');
input.type = 'number';
input.value = this.getAttribute('value') || 0;
input.min = this.getAttribute('min') || 0;
input.max = this.getAttribute('max') || 100;
// 将 DOM 元素添加到 Shadow DOM 中
shadow.appendChild(input);
}
// 定义 value 属性
get value() {
return this.shadowRoot.querySelector('input').value;
}
set value(val) {
this.shadowRoot.querySelector('input').value = val;
}
// 定义 change 事件
connectedCallback() {
this.shadowRoot.querySelector('input').addEventListener('change', () => {
this.dispatchEvent(new Event('change'));
});
}
}
// 注册元素
customElements.define('number-picker', NumberPicker);上面的代码中，我们首先定义了一个 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，我们可以轻松地创建一个进度条元素。
首先，我们需要定义一个类来表示进度条元素：
// www.javascriptcn.com code example
class ProgressBar extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
const shadow = this.attachShadow({ mode: 'open' });
// 创建 DOM 元素
const progress = document.createElement('div');
progress.style.width = this.getAttribute('value') || '0%';
progress.style.height = '100%';
progress.style.backgroundColor = this.getAttribute('color') || 'blue';
// 将 DOM 元素添加到 Shadow DOM 中
shadow.appendChild(progress);
}
// 定义 value 属性
get value() {
return this.shadowRoot.querySelector('div').style.width;
}
set value(val) {
this.shadowRoot.querySelector('div').style.width = val;
}
}
// 注册元素
customElements.define('progress-bar', ProgressBar);上面的代码中，我们定义了一个 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