如何通过Proxy监听Web Component实例的属性新增与更新？

你想要实现的是监听Web Component实例的属性新增和更新操作，每次修改时记录日志。当前你用Proxy代理了Web Component的类，只能监听到类本身的属性修改，无法触发实例（DOM元素）的属性变更监听，下面提供几种可行的解决方案：

问题复现代码 #

JavaScript代码 #

// init minimal test web component
class MyWebComponent extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = '<div>test</div>';
    }
}

// init simple proxy
const MyProxy = new Proxy(MyWebComponent, {
    set(target, property, value){
        console.log(property, value);
    }
});

class MyTestClass extends MyProxy {}
customElements.define('my-web-component', MyTestClass);

MyTestClass.aaa = 1; // 触发Proxy的setter，正常打印日志

const $el = document.getElementById('test');
$el.bbb = 2; // 无法触发Proxy的setter，无日志输出

HTML代码 #

<my-web-component id="test" />

解决方案 #

1. 在Web Component构造函数中用Proxy包装实例 #

直接在实例创建时就用Proxy包裹，这样所有对实例的属性修改都会被监听：

class MyWebComponent extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
        
        // 用Proxy包装当前实例，返回代理对象
        return new Proxy(this, {
            set(target, property, value) {
                console.log(`实例属性 *${property}* 被设置为: ${value}`);
                // 执行实际的属性赋值
                target[property] = value;
                // 返回true表示设置成功
                return true;
            }
        });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = '<div>test</div>';
    }
}

customElements.define('my-web-component', MyWebComponent);

const $el = document.getElementById('test');
$el.bbb = 2; // 现在会触发日志：实例属性 *bbb* 被设置为: 2

注意：返回Proxy实例不会破坏Web Component的生命周期，浏览器会正确处理代理后的对象作为DOM元素使用。

2. 获取实例后用Proxy单独包装 #

如果不想修改Web Component类，可以在获取DOM实例后，用Proxy包装该实例，后续通过代理对象操作属性：

// 原Web Component类保持不变
class MyWebComponent extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = '<div>test</div>';
    }
}

customElements.define('my-web-component', MyWebComponent);

const $el = document.getElementById('test');
// 包装实例
const proxiedEl = new Proxy($el, {
    set(target, property, value) {
        console.log(`实例属性 *${property}* 被设置为: ${value}`);
        target[property] = value;
        return true;
    }
});

proxiedEl.bbb = 2; // 触发日志输出
// 注意：直接操作$el.bbb = 3 不会触发监听，必须使用proxiedEl

3. 监听HTML属性变更（标准Web Component方式） #

如果你的需求是监听HTML属性（即通过setAttribute设置的属性，对应DOM元素的标签属性），可以使用Web Component内置的attributeChangedCallback：

class MyWebComponent extends HTMLElement {
    // 声明需要监听的HTML属性列表
    static get observedAttributes() {
        return ['bbb', 'aaa'];
    }

    constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = '<div>test</div>';
    }

    // 属性变更时触发的回调
    attributeChangedCallback(name, oldValue, newValue) {
        console.log(`HTML属性 *${name}* 变更: 旧值=${oldValue}, 新值=${newValue}`);
    }
}

customElements.define('my-web-component', MyWebComponent);

const $el = document.getElementById('test');
$el.setAttribute('bbb', 2); // 触发日志：HTML属性 *bbb* 变更: 旧值=null, 新值=2

说明：这种方式监听的是HTML属性，而非JS对象的属性，适合需要同步DOM属性与组件内部状态的场景。

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