通过创建一个自定义元素类、定义模板、映射模板、再使用自定义标签，即可在 JavaScript 中自定义 HTML 标签。自定义标签和标准标签类似，可以定义属性和方法，例如创建一个用于输入文本的标签。
如何使用 JavaScript 自定义 HTML 标签
1. 创建自定义元素
class MyElement extends HTMLElement {
// 定义元素的属性和方法
}
customElements.define('my-element', MyElement);2. 定义标签模板
在 HTML 中创建一个模板，定义自定义标签的内容和样式。
我的自定义元素
3. 将模板映射到元素
将模板映射到自定义元素类，以便在实例化元素时使用模板。
MyElement.prototype.connectedCallback = function() {
const template = document.getElementById('my-element-template');
const clone = template.content.cloneNode(true);
this.appendChild(clone);
};4. 使用自定义标签
现在，您可以在 HTML 中像使用标准 HTML 元素一样使用自定义标签。
自定义标签内容
示例：创建一个文本输入框
class TextInputElement extends HTMLElement {
constructor() {
super();
this._value = '';
}
static get observedAttributes() {
return ['value'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'value') this._value = newValue;
}
connectedCallback() {
this.render();
}
render() {
this.innerHTML = `
`;
}
}
customElements.define('text-input', TextInputElement);现在，您可以在 HTML 中像这样使用自定义文本输入框：
