自定义元素能否监听Dataset/Data-*属性变化？求确认可行方案

明确结论 #

自定义元素的原生attributeChangedCallback无法监听通过dataset API修改的data-*属性变化——只有当你直接调用setAttribute('data-xxx', 'value')修改属性时，才会触发回调。如果是通过element.dataset.xxx = 'value'这种方式修改属性，必须借助DOM Mutation Observer才能监听变化。

你的替代方案更合理 #

你提到的「直接使用真实属性而非dataset」是自定义元素场景下的最优解：自定义元素本身支持原生属性监听，无需额外引入Observer，代码更简洁也更符合组件设计逻辑。

针对你示例代码的问题修正 #

你的代码里observedAttributes声明了监听data-clicked，但在#menuClicked中用menu.dataset.clicked修改属性，这种方式不会触发attributeChangedCallback。要让回调生效，需要把dataset操作改成直接调用setAttribute，同时注意DOM属性值都是字符串类型，需要调整类型判断逻辑：

修正后的#menuClicked方法

#menuClicked(e) {
    var menu = e.target.classList.contains("menu_btn") ? e.target : e.target.closest(".menu_btn");
    if (menu.hasAttribute('data-clicked')) {
        menu.addEventListener("animationend", 
            (e) => menu.classList.remove('menuClick'), 
            {"once": true}
        );
        menu.classList.add('menuClick');
        // 直接用setAttribute修改，触发attributeChangedCallback
        const isClicked = menu.getAttribute('data-clicked') === 'true';
        menu.setAttribute('data-clicked', String(!isClicked));
    }
}

修正后的attributeChangedCallback

attributeChangedCallback(name, oldValue, newValue) {
    if (!this.isConnected) return;

    if (newValue == null) {
        this[name] = "";
        delete this[name];
        return;
    }

    // DOM属性值都是字符串，判断是否为合法的布尔字符串
    if (!['true', 'false'].includes(newValue)) {
        throw new Error(`${this.tagName}, Illegal value. [${name}] must be "true" or "false".`);
    }
    // 转成布尔值绑定到实例
    this[name] = newValue === 'true';
}

更优的自定义属性方案 #

如果是自定义元素，完全可以抛弃data-*，直接定义专属属性，代码更清晰：

static get observedAttributes() {
    return ['clicked']; // 监听自定义属性
}

connectedCallback() {
    console.log('Connected ' + this.isConnected);
    if (!this.isConnected) return;
    this.#button.addEventListener("click", this.#menuClicked);
    // 初始化属性默认值
    if (!this.hasAttribute('clicked')) {
        this.setAttribute('clicked', 'false');
    }
}

disconnectedCallback() {
    this.#button.removeEventListener("click", this.#menuClicked);
}

attributeChangedCallback(name, oldValue, newValue) {
    if (!this.isConnected) return;
    if (newValue == null) {
        this.clicked = false;
        return;
    }
    this.clicked = newValue === 'true';
    // 这里可以添加属性变化后的业务逻辑
}

#menuClicked(e) {
    var menu = e.target.classList.contains("menu_btn") ? e.target : e.target.closest(".menu_btn");
    // 直接切换自定义属性
    const newState = String(!(menu.getAttribute('clicked') === 'true'));
    menu.setAttribute('clicked', newState);
    
    menu.addEventListener("animationend", 
        (e) => menu.classList.remove('menuClick'), 
        {"once": true}
    );
    menu.classList.add('menuClick');
}

若坚持使用dataset的监听方案 #

如果必须保留data-*属性，就需要用Mutation Observer监听属性变化：

connectedCallback() {
    console.log('Connected ' + this.isConnected);
    if (!this.isConnected) return;
    
    this.#button.addEventListener("click", this.#menuClicked);
    
    // 初始化Mutation Observer
    this.#observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.type === 'attributes' && mutation.attributeName.startsWith('data-')) {
                const attrName = mutation.attributeName;
                const newValue = this.getAttribute(attrName);
                // 这里处理data属性变化后的逻辑
                console.log(`${attrName} updated to: ${newValue}`);
            }
        });
    });
    
    // 监听当前元素的属性变化
    this.#observer.observe(this, { attributes: true });
}

disconnectedCallback() {
    this.#button.removeEventListener("click", this.#menuClicked);
    // 销毁观察者，避免内存泄漏
    this.#observer.disconnect();
}

内容的提问来源于stack exchange，提问作者McMurphy