I am trying to attach shadow dom to this but it does not attach and gives a error DOMExpection operation is not supported but when inherit from HTMLElement or HTMLSpanElement it works! So question is can i attach shadow dom to this when inherit from HTMLButtonElement if yes then how else not why! here is my code :-

class Home_Button extends HTMLButtonElement {
  constructor() {
    super();
    this._dom = this.attachShadow({ mode: "open" });
    this.createButton();
  }

  createButton() {
    this.classList.add("contents");
    const style = document.createElement("style");
    style.textContent = `
      .sentToHome{
        margin: 1%;
        padding: 1%;
        border-radius: 5px;
        border: 1px solid black;
      }

      .homeLink{
        text-decoration: none;
        color: green;
      }
    `;
    const anchor = document.createElement("a");
    anchor.innerText = "<< Home";
    anchor.setAttribute("href", "/");
    anchor.setAttribute("class", "homeLink");
    const button = document.createElement("button");
    button.setAttribute("class", "sentToHome");
    button.appendChild(anchor);
    this._dom.append(style, button);
  }
}

customElements.define("simple-btn", Home_Button, { extends: "button" });
const sentToHomeBtn = new Home_Button();
document.body.appendChild(sentToHomeBtn);