通过创建一个自定义元素类、定义模板、映射模板、再使用自定义标签，即可在 JavaScript 中自定义 html 标签。自定义标签和标准标签类似，可以定义属性和方法，例如创建一个用于输入文本的标签。
如何使用 JavaScript 自定义 html 标签
1. 创建自定义元素
class MyElement extends HTMLElement { // 定义元素的属性和方法 } customElements.define('my-element', MyElement);
2. 定义标签模板
在 HTML 中创建一个模板，定义自定义标签的内容和样式。
<template id="my-element-template"> <div><h1>我的自定义元素</h1></div> </template>
3. 将模板映射到元素
将模板映射到自定义元素类，以便在实例化元素时使用模板。
MyElement.prototype.connectedCallback = function() { const template = document.getElementById('my-element-template'); const clone = template.content.cloneNode(true); this.appendChild(clone); };
4. 使用自定义标签
现在，您可以在 HTML 中像使用标准 HTML 元素一样使用自定义标签。
<my-element>自定义标签内容</my-element>
示例：创建一个文本输入框
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 = ` <input type="text" value="${this._value}"> `; } } customElements.define('text-input', TextInputElement);
现在，您可以在 HTML 中像这样使用自定义文本输入框：
<text-input value="初始值"></text-input>
