Web 组件 - attributeChangedCallback 未触发

Question

我刚刚开始使用 Web 组件，我似乎无法弄清楚为什么我的 attributeChangedCallback 没有触发；

我一直在将它与我创建的组件进行比较，其中一切都正常工作。

我检查过的事情：

1. 正在改变的 attr 的拼写（“isOpen”）
2. attributeChangedCallback 的拼写（为了确定，从字面上复制了它正在工作的另一个组件），
3. 确保其observedAttributes（复数）和正确的属性设置在那里，
4. 检查了 setter 和 getter 是否工作正常，并且在toggleStatus 函数中我可以记录 isOpen 属性，并看到它按预期更改。

但是，如果我尝试在 attributeChangedCallback 中执行任何操作（示例只是记录名称），它不会触发。

我确信我错过了一些非常简单的东西？

class HamburgerMenu extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" width="164" height="102" fill="none">
      <g stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
        <path id="top" d="M10 92L154 92"/>
        <path id="middle" d="M10 50.8L154 50.8"/>
        <path id="bottom" d="M10 10L154 10"/>
      </g>
    </svg>`;
    this.svg = this.shadowRoot.querySelector("svg");
    this.svg.addEventListener("click", this.toggleStatus.bind(this));
  }

  static get observedAttributes() {
    return ["isOpen"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(name, oldValue, newValue);
  }

  get isOpen() {
    return this.getAttribute("isOpen");
  }

  set isOpen(val) {
    if (val) {
      this.setAttribute("isOpen", val);
    } else {
      this.removeAttribute("isOpen");
    }
  }

  toggleStatus() {
    this.setAttribute("isOpen", String(!eval(this.getAttribute("isOpen"))));
  }
}

if (!window.customElements.get("hamburger-menu")) {
  window.customElements.define("hamburger-menu", HamburgerMenu);
}

<hamburger-menu></hamburger-menu>

Answer 1

• 属性必须是小写，将“isOpen”更改为“isopen”，它将起作用，
  请参阅SO答案：html5数据属性是否不区分大小写？

• 您对 eval 的使用很有创意；但有一个toggleAttribute方法：
  参见： https: //developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

• 您的代码会运行，因为您只与 constructor .
  对于其他 DOM 相关代码，您可能必须等到connectedCallback（现在不在您的代码中）运行。
  有关生命周期，请参阅：https://andyogo.github.io/custom-element-reactions-diagram/