自定义元素和 connectedCallback() ：在触发函数之前等待父节点可用

Question

我正在使用自定义元素，非常好。但我面临一个问题：当调用connectedCallback()函数时，节点似乎还没有在 DOM 中的位置，因此我无法访问它的父节点 - 我需要它们。class myElement extends HTMLElement{    constructor() {        super();        this.tracklist =    undefined;    }    connectedCallback(){        this.render();    }    render(){        this.tracklist = this.closest('section');        // following code requires this.tracklist!        // ...    }window.customElements.define('my-element', myElement);在调用 render() 之前，如何确定父节点可访问？

Answer 1

这是一个已知问题：

connectedCallback不不意味着你的元素或不完全解析。
自定义元素缺少parsedCallback方法

查看所有答案：

• 自定义 HTMLElement connectedcallback-of-a-custom- htmlelement 的 connectedCallback() 中的 textContent 为空

• 当所有子自定义元素都已连接时，如何使用“connectedCallback”

TL; 博士;

接受的方法是延迟渲染方法：

 connectedCallback(){ 
     setTimeout(this.render);
 }

Answer 2

connectedCallback当它尚未被解析时，似乎无法访问与其自身相关的其他元素。如果您认为自定义元素必须能够存在于 DOM 中的任何位置而不依赖于另一个元素，那么这种类型是有意义的。因此，如果没有要选择的父元素，则该元素可能无法正常工作。

一种方法是修改render方法以接受一个参数，该参数将tracklist动态设置属性到自定义元素。然后my-element从 DOM 中选择元素并查找section.

然后在自定义元素准备好时使用该customElements.whenDefined方法将section和连接my-element在一起。此方法会返回一个 Promise，该 Promise 会在定义自定义元素时解析并让您能够执行回调。

请参阅下面的示例：

// Do something whenever the element is ready.

window.addEventListener('load', function() {

  // Wait for the document to load so the DOM has been parsed.

  window.customElements.whenDefined('my-element').then(() => {

    const myElement = document.querySelector('my-element');

    // Only do something if the element exists on the page.

    if (myElement !== null) {

      const tracklist = myElement.closest('section');

      myElement.render(tracklist);

      console.log(myElement.tracklist);

    }

  });

});

// Create element.

class myElement extends HTMLElement{

    constructor() {

        super();

        this.tracklist = null;

    }

    render(tracklist){

        this.tracklist = tracklist;

        // following code requires this.tracklist!

        // ...

    }

}

// Define element.

window.customElements.define('my-element', myElement);

<section>

  <my-element></my-element>

</section>

如果我不清楚或您有任何疑问，请告诉我。