javascript - 自定义元素和 connectedCallback() : wait for parent node to be available before firing a function

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 方法

查看所有答案:

• > textContent empty in connectedCallback() of a custom HTMLElement connectedcallback-of-a-custom-htmlelement
• > How to have a 'connectedCallback' for when all child custom elements have been connected

TL;DR;

可接受的方法是延迟渲染方法:

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