HTML标签：自定义标签_html自定义标签-CSDN博客

本文链接：https://blog.csdn.net/wangnanofspirit/article/details/139638019

自定义HTML标签通常是通过Web Components技术中的Custom Elements规范来实现的。

1. 创建自定义元素类

使用JavaScript的类（Class）来定义一个新的自定义元素。
这个类需要继承自HTMLElement或其子类（如HTMLButtonElement、HTMLInputElement等，如果你想要继承现有元素的话）。
在类的构造函数中，调用super()方法，以确保正确地继承父类的属性和方法。

示例：

class MyCustomTag extends HTMLElement {
  constructor() {
    super(); // 必须首先调用 super 方法
    // 在这里添加自定义标签的功能
  }
}

2. 注册自定义元素

使用customElements.define()方法来注册自定义元素。
这个方法接受两个参数：自定义元素的名称（字符串）和对应的类。

示例：

customElements.define('my-custom-tag', MyCustomTag);

现在，<my-custom-tag>就可以作为一个有效的HTML标签在HTML文档中使用了。

3. 使用自定义元素

在HTML文档中使用<my-custom-tag>标签。
你可以像使用其他HTML标签一样，为自定义元素添加属性、设置样式等。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义标签示例</title>
  <script>
    class MyCustomTag extends HTMLElement {
      constructor() {
        super(); // 必须首先调用 super 方法
        // 在这里添加自定义标签的功能
        // 例如，创建一个文本节点并添加到自定义元素中
        this.appendChild(document.createTextNode('这是一个自定义标签'));
      }
    }
    customElements.define('my-custom-tag', MyCustomTag);
  </script>
</head>
<body>
  <my-custom-tag></my-custom-tag>
</body>
</html>