相关疑难解决方法(0)

我正在使用Web Components v1.

假设有两个自定义元素:

家长element.html

<template id="parent-element">
    <child-element></child-element>
</template>

儿童element.html

<template id="child-element">
<!-- some markup here -->
</template>

我试图在连接时使用connectedCallbackin parent-element初始化整个父/子DOM结构,这需要与定义的方法进行交互child-element.

但是,似乎child-element没有正确定义当时connectedCallback被解雇customElement:

家长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而不是child-element预期的.

我parent-element的模板中的所有子自定义元素都已正确附加后,我需要回调.

这个问题的解决方案似乎不起作用; this.parentElement在null里面child-element connectedCallback().

ilmiont

规范说：

但是，请注意，connectedCallback 可以被多次调用，因此任何真正一次性的初始化工作都需要一个防护来防止它运行两次。

这是什么意思？是不是说在调用connectedCallback之前可以（由浏览器引擎）调用多次？disconnectedCallback

如果总是有一个connectedCallback对应一个disconnectedCallback，那么这种说法就毫无意义了。

显然，我会清理在connectedCallback中创建的任何内容disconnectedCallback，因此我不会让事情“运行两次”。