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

Answer 1

• 属性必须小写，把“isOpen”改成“isopen”就可以了
  请参阅 SO 答案:are html5 data attributes case insensitive?

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

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