自定义元素和 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() {&nbsp; // Wait for the document to load so the DOM has been parsed.&nbsp; window.customElements.whenDefined('my-element').then(() => {&nbsp; &nbsp; const myElement = document.querySelector('my-element');&nbsp; &nbsp; // Only do something if the element exists on the page.&nbsp; &nbsp; if (myElement !== null) {&nbsp; &nbsp; &nbsp; const tracklist = myElement.closest('section');&nbsp; &nbsp; &nbsp; myElement.render(tracklist);&nbsp; &nbsp; &nbsp; console.log(myElement.tracklist);&nbsp; &nbsp; }&nbsp; });});// Create element.class myElement extends HTMLElement{&nbsp; &nbsp; constructor() {&nbsp; &nbsp; &nbsp; &nbsp; super();&nbsp; &nbsp; &nbsp; &nbsp; this.tracklist = null;&nbsp; &nbsp; }&nbsp; &nbsp; render(tracklist){&nbsp; &nbsp; &nbsp; &nbsp; this.tracklist = tracklist;&nbsp; &nbsp; &nbsp; &nbsp; // following code requires this.tracklist!&nbsp; &nbsp; &nbsp; &nbsp; // ...&nbsp; &nbsp; }}// Define element.window.customElements.define('my-element', myElement);<section>&nbsp; <my-element></my-element></section>如果我不清楚或您有任何疑问，请告诉我。