class A extends HTMLElement {
constructor() {
super()
return new Proxy(this, {})
}
}
window.customElements.define('a-element', A)
<a-element></a-element>
class A extends HTMLElement {
constructor() {
super()
return new Proxy(this, {})
}
}
window.customElements.define('a-element', A)
<a-element></a-element>
Вы можете либо Proxify класс, либо экземпляр Custom Element.
Учитывая следующее определение пользовательского элемента:
class A extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
this.innerHTML = 'Hello'
}
}
customElements.define( 'a-element', A )
Прокси для экземпляра пользовательского элемента
Создайте прокси из ссылки на экземпляр (здесь: ae
):
<a-element id="ae"></a-element>
<script>
var b1 = new Proxy( ae, {
get ( target, value ) { return target[value] }
} )
console.log( b1.innerHTML ) // => "Hello"
</script>
Прокси для класса пользовательских элементов
Определите ловушку construct
, чтобы поймать оператор new
:
<script>
var B = new Proxy( A, {
construct() { return new A }
} )
var b2 = new B
document.body.appendChild( b2 )
console.log( b2.innerHTML ) // => "Hello"
</script>
Получить экземпляр экземпляра пользовательского элемента из класса Proxy
Если вы хотите создать пользовательский элемент и получить один объект Proxy напрямую, вы можете объединить оба решения выше.
В следующем примере показано, как получить прокси для элемента <a-element>
, который будет регистрировать в консоли каждый доступ к свойствам. Ловушка construct()
, определенная в классе Proxy, возвращает себя прокси для управляемого пользовательского элемента.
class A extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
this.innerHTML = 'Hello'
}
}
customElements.define( 'a-element', A )
var P = new Proxy( A, {
construct () {
return new Proxy ( new A, {
get ( target, value ) {
if ( value == 'element' )
return target
console.info( `proxy: property ${value} for <${target.localName}> is "${target[value]}"` )
return target[value]
}
} )
}
} )
var p = new P
document.body.appendChild( p.element )
console.log( p.innerHTML )