Invalid name for HTML Custom Elements error

Question

I'm trying to make an HTML page which has the list of all the anime I watched and am about to watch. So, I was trying to make an <anime> tag for convenience purpose. It has name and time attributes. Here is the code for the custom elements:

Expected output: □ □ One Piece (15 Days)

Running this is giving the following error: Uncaught DOMException: CustomElementRegistry.define: 'anime' is not a valid custom element name

I've researched about valid custom element names, and this satisfies all those rules:

1. any letter/symbol except capital letters
2. start with lower case letter
3. hyphens for spaces to separate words (here the name is only one word though)

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

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

    let children = [document.createElement("input"), document.createElement("input"), document.createElement("span"), document.createElement("b")];
    children[0].type = "checkbox";
    children[1].type = "checkbox";
    children[3].innerHTML = name;
    children[2].append(children[3]);
    children[2].append(` ${time}`);
    this.append(children[0], children[1], children[2]);
  }
}

customElements.define("anime", Anime);

<anime name="One Piece" time="15 Days">

Answer 1

Name of the custom element must start with a lowercase letter, contain a hyphen, and satisfy certain other rules listed in the in the specification's definition of a valid name

Syntax

[a-z]* '-' [a-z]*

customElements.define("anime-element", Anime);  //✅

In HTML

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