无法使用代理捕获自定义元素上的访问器调用?

Question

我正在使用customElements.define 注册一些自定义元素，并希望在成员访问器上自动设置陷阱，以便我可以在事件更改时发出事件

class State extends HTMLElement {
public someValue = 1;
public constructor() {
super();
console.log('State constructor');
}
}
const oProxy = new Proxy(State, {
get(target, prop: string) {
console.log(`GET trap ${prop}`);
return Reflect.get(target, prop);
},
set(target, prop: string, value: any) {
console.log(`SET trap ${prop}`);
return Reflect.set(target, prop, value);
}
});
customElements.define('my-state', oProxy);
const oStateEl = document.querySelector('my-state');
console.log(oStateEl.someValue);
console.log(oStateEl.someValue = 2);
console.log(oStateEl.someValue);

我的浏览器似乎对上述代码没有问题，并且在设置元素时我可以看到一些陷阱输出

GET trap prototype
GET trap disabledFeatures
GET trap formAssociated
GET trap prototype

但是当我手动获取/设置值时，不会触发陷阱。 这可能吗？

Answer 1

我最终所做的是将所有成员变量值移动到私有对象，并在自定义元素挂载到 DOM 上后立即为每个变量动态定义一个 getter/setter，就像这样......

//
class State extends HTMLElement {
protected _data: object = {}
public connectedCallback() {
// Loop over member vars
Object.getOwnPropertyNames(this).forEach(sPropertyKey => {
// Ignore private
if(sPropertyKey.startsWith('_')) {
return;
}
// Copy member var to data object
Reflect.set(this._data, sPropertyKey, Reflect.get(this, sPropertyKey));
// Remove member var
Reflect.deleteProperty(this, sPropertyKey);
// Define getter/setter to access data object
Object.defineProperty(this, sPropertyKey, {
set: function(mValue: any) {
console.log(`setting ${sPropertyKey}`);
Reflect.set(this._data, sPropertyKey, mValue);
},
get: function() {
return this._data[sPropertyKey];
}
});
});
}
}
// 
class SubState extends State {
public foobar = 'foobar_val';
public flipflop = 'flipflop_val';
public SubStateMethod() { }
}
//
window.customElements.define('sub-state', SubState);
//
const oState = document.querySelector('sub-state') as SubState;
oState.foobar = 'foobar_new_val';

这样我仍然可以像往常一样在对象上获取/设置值，打字稿很高兴成员变量存在，并且可以在访问成员时触发自定义事件 - 同时允许自定义元素存在于 DOM 就绪的标记中