阴影dom不依附在htmlbuttonelement继承的类上

Question

我试图将阴影DOM附加到此处，但是它不附加，并且不支持domexpection操作，但是当从htmlelement或htmlspanelement继承时，它起作用了！ 因此，问题是，当从htmlbuttonelement继承时，我可以将阴影DOM附加到此，如果是的，那么为什么不这样做！ 这是我的代码： -

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);

Answer 1

这将永远不会在Safari中起作用，因为Apple自2016年以来表示，他们永远不会实现自定义的内置元素，他们仅实现了htmlelement触发

create button 代码> ConnectedCallback ;您不能在构造函数（除Shadowdom内容）中执行DOM操作，因为DOM中还不存在元素（this）。

另外，请注意this._dom不需要，您可以免费从thisever> entachshadow（）免费获得this.shadowroot

要清楚this。 classList是问题

Answer 2

好吧， @danny-365csi-engelman 也是正确的
我发现此答案。

根据答案，我们可以在几个元素上连接Shadow dom，并且按钮不退出这些元素。

我只是从 htmlelement 类而不是 htmlbuttonelement 类继承。
之后，一切都很好！

如果您想检查当前源代码go 在这里。