Javascript 如何指定运行嵌套web组件构造函数的顺序？

我创建了两个web组件，并将其中一个嵌套到另一个中。 它们都有自己的

构造函数

。我的问题是，我无法控制运行

构造函数的序列。
有什么办法可以让我说出来吗

这是我的密码：

子web组件：

(function () {
    const template = document.createElement('template');
    template.innerHTML = `<div>WC1</div>`;

    class WC1Component extends HTMLElement {

        constructor() {
            super();
            console.log('WC1: constructor()');

            var me = this;

            me._shadowRoot = this.attachShadow({ 'mode': 'open' });
            me._shadowRoot.appendChild(template.content.cloneNode(true));
        }

        connectedCallback() {
            console.log('WC1: connectedCallback');
        }

        test() {
            console.log('test:wc1');
        }

    }

    window.customElements.define('wc-one', WC1Component);

}());

(function () {
    const template = document.createElement('template');
    template.innerHTML = `
    <wc-one id="wc1"></wc-one>
    <div>WC2</div>
    `;

    class WC2Component extends HTMLElement {

        constructor() {
            super();
            console.log('WC2: constructor()');

            var me = this;

            me._shadowRoot = this.attachShadow({ 'mode': 'open' });
            me._shadowRoot.appendChild(template.content.cloneNode(true));
            me._wc1 = me._shadowRoot.querySelector('#wc1');
        }

        connectedCallback() {
            console.log('WC2: connectedCallback');
            this._wc1.test(); // <-- Error: test is undefined!
        }


    }

    window.customElements.define('wc-two', WC2Component);

}());

您可以使用：

setTimeout(() => {
  this._wc1.test();
});

在connectedCallback中，实际上您可以控制构造函数的运行顺序

由于
是由
创建的，因此总是在WC1之前调用WC2构造函数

错误的原因是，当您尝试调用它时，内部组件（WC1）尚未添加到DOM中

您可以侦听
DOMContentLoaded
事件以确保元素正常，或者在
window
上侦听
load
事件，或者实现
window.onload
处理程序@elanz nasiri也在工作

DOMContentLoaded
将首先触发

有其他解决方案，但它们更难实现


window.customElements.define（'wc-one'，类扩展HtmleElement{
构造函数（）{
超级（）
this.attachShadow（{'mode'：'open'}）。innerHTML=`WC1`
}
测试（来源）{
log（'test:wc1'，source）
}
} )
window.customElements.define（'wc-two'，类扩展HtmleElement{
构造函数（）{
超级（）
this.\u shadowRoot=this.attachShadow（{'mode'：'open'}）
这个._shadowRoot.innerHTML=`WC2`
this._wc1=this._shadowRoot.querySelector（'#wc1'）；
}
connectedCallback（）{
setTimeout（（）=>this.\u wc1.test（'setTimeout'））
document.addEventListener（'DOMContentLoaded'，（）=>this.\u wc1.test（'DOMContentLoaded'））
window.onload=（）=>这个._wc1.test（'window.onload'））
window.addEventListener（'load'，（）=>this.\u wc1.test（'load'））
}
}）
如果要控制何时调用构造函数，则需要调用它。不允许HTML解析器为您执行此操作。允许HTML解析器这样做的问题是，您不知道组件何时升级


const template=document.createElement（'template'）；
template.innerHTML=`WC1`；
类WC1组件扩展了HtmleElement{
构造函数（）{
超级（）；
log（'WC1:constructor（）'）；
this.attachShadow（{'mode'：'open'}）；
this.shadowRoot.appendChild（template.content.cloneNode（true））；
}
connectedCallback（）{
log（'WC1:connectedCallback'）；
}
测试（）{
log（'test:wc1'）；
}
}
window.customElements.define（'wc-one'，WC1组件）；
//
//WC2
类WC2Component扩展了HtmleElement{
构造函数（）{
超级（）；
log（'WC2:constructor（）'）；
设wc1=document.createElement（'wc-one'）；
wc1.id='wc1'；
this.attachShadow（{'mode'：'open'}）；
这个。_wc1=wc1；
this.shadowRoot.appendChild（wc1）；
设div=document.createElement（'div'）；
div.textContent='WC2'；
this.shadowRoot.appendChild（div）；
}
connectedCallback（）{
log（'WC2:connectedCallback'）；
这个._wc1.test（）；
}
}
window.customElements.define（'wc-two'，WC2Component）
您可以使用“异步”、“延迟”作为脚本标记。例如，您希望在wc2.js之前加载wc1.js:。但它不是许多js文件的解决方案。您可以查看“gulp”或“webpack”将帮助您更好地管理js文件。@tahereh感谢您接受的答案，如果有帮助，您可以向上投票：-）
setTimeout(() => {
  this._wc1.test();
});