HTML自定义元素报错：‘anime’不是有效自定义元素名称的问题

报错核心原因 #

自定义元素的名称必须包含至少一个连字符（-），这是W3C自定义元素规范的强制要求——目的是避免与原生HTML标签冲突，同时防止未来新增的原生标签和自定义标签重名。你使用的anime是单单词，没有连字符，不符合合法命名规则，因此浏览器抛出CustomElementRegistry.define: 'anime' is not a valid custom element name错误。

解决方法 #

只需将自定义元素名称修改为包含连字符的格式（比如anime-item、my-anime等），同时对应更新JS和HTML代码即可。以下是两种可行的修正方案：

方案1：独立自定义元素（推荐）

这种方式直接创建独立的自定义标签，无需依赖原生内置元素：

class AnimeItem extends HTMLElement {
  constructor() {
    super();

    const name = this.getAttribute("name");
    const time = this.getAttribute("time");

    // 创建元素
    const checkbox1 = document.createElement("input");
    checkbox1.type = "checkbox";
    const checkbox2 = document.createElement("input");
    checkbox2.type = "checkbox";
    const nameContainer = document.createElement("span");
    const boldName = document.createElement("b");
    
    // 设置内容，匹配预期输出格式
    boldName.textContent = name;
    nameContainer.append(boldName);
    nameContainer.append(` (${time})`);

    this.append(checkbox1, checkbox2, nameContainer);
  }
}

// 注册带连字符的自定义元素
customElements.define("anime-item", AnimeItem);

对应的HTML代码：

<anime-item name="One Piece" time="15 Days"></anime-item>

方案2：自定义内置元素（继承原生div）

如果你需要继承HTMLDivElement的特性，可以使用这种方式，注册时需指定extends选项：

class AnimeDiv extends HTMLDivElement {
  constructor() {
    super();

    const name = this.getAttribute("name");
    const time = this.getAttribute("time");

    const checkbox1 = document.createElement("input");
    checkbox1.type = "checkbox";
    const checkbox2 = document.createElement("input");
    checkbox2.type = "checkbox";
    const nameContainer = document.createElement("span");
    const boldName = document.createElement("b");
    
    boldName.textContent = name;
    nameContainer.append(boldName);
    nameContainer.append(` (${time})`);

    this.append(checkbox1, checkbox2, nameContainer);
  }
}

// 注册继承div的自定义元素
customElements.define("anime-div", AnimeDiv, { extends: "div" });

对应的HTML代码：

<div is="anime-div" name="One Piece" time="15 Days"></div>

补充说明 #

• 自定义元素命名规则完整要求：必须包含至少一个连字符，仅由小写字母、数字、连字符、下划线组成，且不能以数字、连字符开头（冒号用于命名空间，不推荐使用）。
• 方案1的独立自定义元素更符合你直接使用自定义标签的需求，代码更简洁直观。

内容的提问来源于stack exchange，提问作者Zayaan