Proxy with web component

I'm trying to observe new and updated web component element properties using a proxy. Every time a new property is added to an element, it should be logged.

In the example below, I created a web component that extends a proxy object. It triggers the proxy setter when the property is added directly to the MyTestClass. But it doesn't trigger proxy setter when the property is added to the web component's DOM element ($el in the example below).

Is there a way to achieve this?

// 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; // THIS WORKS - it triggers the setter of the proxy

const $el = document.getElementById('test');
$el.bbb = 2; // THIS DOESN'T WORK - it doesn't trigger the setter of the proxy

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

Via Active questions tagged javascript - Stack Overflow https://ift.tt/hkZRoGI