我刚刚开始使用 Web 组件,我似乎无法弄清楚为什么我的 attributeChangedCallback 没有触发;
我一直在将它与我创建的组件进行比较,其中一切都正常工作。
我检查过的事情:
但是如果我尝试在 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>
属性必须小写,将“isOpen”改为“isopen”就可以了
请参阅SO答案:html5数据属性不区分大小写吗?
您对 eval 的使用很有创意;但有一个
toggleAttribute
方法:您的代码会运行,因为您只与
constructor
中的 ShadowRoot 交互。connectedCallback
(现在不在您的代码中)运行。