我正在使用 Web Components v1。
假设有两个自定义元素:
parent-element.html
<template id="parent-element">
<child-element></child-element>
</template>
子元素.html
<template id="child-element">
<!-- some markup here -->
</template>
我试图在parent-element
中使用connectedCallback
来初始化整个父/子DOM结构,当它被附加时,这需要与child-element
中定义的方法进行交互。
然而,似乎在customElement
的connectedCallback
触发时,child-element
没有被正确定义:
parent-element.js
class parent_element extends HTMLElement {
connectedCallback() {
//shadow root created from template in constructor previously
var el = this.shadow_root.querySelector("child-element");
el.my_method();
}
}
由于el
是一个HTMLElement
,而不是像预期的一个子元素
,因此这种方法行不通。
我需要一个回调函数,用于在其模板中的所有自定义子元素正确附加后调用parent-element
。
这个问题中的解决方案似乎不起作用;在child-element
的connectedCallback()
内部,this.parentElement
为null
。
ilmiont