The goal is to have a base class A extending HTMLElement
that customizes getters and setters. Then class B would extend class A and do stuff.
The way to do this is by wrapping class A with a proxy (not the instance, but the class) so B can extend A.
I tried to return a Proxy in the constructor, but I get custom element constructors must call super() first and must not return a different object
<!DOCTYPE html>
<body>
<script>
window.onerror = function (error, url, line) {
document.getElementById('error').innerHTML = document.getElementById('error').innerHTML + '<br/>' + error;
};
</script>
<div id="error">Console errors here:<br /></div>
<my-b-element></my-b-element>
<script type="module">
class A extends HTMLElement {
constructor() {
super();
return new Proxy(this, {
get(target, name, receiver) {
let rv = Reflect.get(target, name, receiver);
console.log(`get ${name} = ${rv}`);
// do something with rv
return rv;
},
set(target, name, value, receiver) {
if (!Reflect.has(target, name)) {
console.log(`Setting non-existent property '${name}', initial value: ${value}`);
}
return Reflect.set(target, name, value, receiver);
}
});
}
}
class B extends A {
constructor() {
super();
}
}
customElements.define("my-b-element", B);
document.querySelector('my-b-element').nonExistentProperty = 'value1';
</script>
</body>
</html>
In case it helps anyone, here's how it's done without any proxy.