gpt4 book ai didi

javascript - 如何代理自定义元素(Web 组件)

转载 作者:可可西里 更新时间:2023-11-01 01:42:47 24 4
gpt4 key购买 nike

class A extends HTMLElement {
constructor() {
super()
return new Proxy(this, {})
}
}

window.customElements.define('a-element', A)
<a-element></a-element>

我如何代理自定义元素?

当我尝试时:

未捕获的 InvalidStateError:自定义元素构造函数必须首先调用 super(),并且不得返回不同的对象

最佳答案

您可以代理自定义元素的实例

给定以下自定义元素定义:

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 的陷阱运算符(operator):

<script>
var B = new Proxy( A, {
construct() { return new A }
} )
var b2 = new B
document.body.appendChild( b2 )
console.log( b2.innerHTML ) // => "Hello"
</script>

从类代理中获取自定义元素实例代理

如果你想实例化一个Custom Element并直接获取一个Proxy对象,你可以结合以上两种方案。

以下示例显示如何为元素 <a-element> 获取代理这将在控制台中登录每个属性访问。 construct()代理类中定义的陷阱为实例化的自定义元素返回自己的代理。

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 )

关于javascript - 如何代理自定义元素(Web 组件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43300105/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com