javascript-当所有子自定义元素都已连接时,如何具有“ connectedCallback”

我正在使用Web Components v1.

假设两个自定义元素：

家长element.html

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

儿童element.html

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

我正在尝试在父元素中使用connectedCallback来初始化整个父/子DOM结构,该结构在连接时需要与子元素中定义的方法进行交互.

但是,似乎在为customElement触发connectedCallback时未正确定义子元素：

家长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,而不是预期的子元素.

一旦其模板中的所有子自定义元素都已正确附加,我就需要一个用于父元素的回调.

this question中的解决方案似乎无效.在子元素connectedCallback()中,this.parentElement为null.

ilmiont

解决方法:

connectedCallback存在计时问题.在升级其任何自定义元素子级之前,它会首次被调用. &LT儿童组件>调用connectedCallback时,它只是一个HTMLElement.

要获取已升级的子元素,您需要在超时后进行.

运行以下代码,并查看控制台输出.当我们尝试调用孩子的方法时,它会失败.同样,这是因为创建Web组件的方式.以及何时调用connectCallback的时间.

但是,在setTimeout内,对子方法的调用有效.这是因为您花了时间让子元素升级到自定义元素.

Kinda stupid if you ask me. I wish there was another function that was called after all children were upgraded. But we work with what we have.

class ParentElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = '<h2>Parent Element</h2><child-element></child-element>';
  }
  
  connectedCallback() {
    let el = this.shadowRoot.querySelector("child-element");
    console.log('connectedCallback', el);
    try {
      el.childMethod();
    }
    catch(ex) {
      console.error('Child element not there yet.', ex.message);
    }
    setTimeout(() => {
      let el = this.shadowRoot.querySelector("child-element");
      console.log('setTimeout', el);
      el.childMethod();
    });
  }
}

customElements.define('parent-element', ParentElement);


class ChildElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = '<h3>Child Element</h3>';
  }

  childMethod() {
    console.info('In Child method');
  }
}

customElements.define('child-element', ChildElement);

<parent-element></parent-element>

标签：html,javascript,web-component,native-web-component
来源： https://codeday.me/bug/20191010/1886750.html