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 自定义HTML元素的已连接回调
How to have a 'connectedCallback' for when all child custom elements have been connected

TL; DR;

也许快速（又肮脏？）的解决方法是延迟渲染方法：

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

Answer 2

似乎Price在尚未解析时无法访问与其自身有关的其他元素。如果您认为自定义元素必须能够在DOM中任何地方，而不必依赖于其他元素，则这种说法很有意义。因此，如果没有父项可供选择，则该元素可能无法正常工作。

一种方法是修改PriceToBackgroundColorConverter方法以接受一个参数，该参数将把Setter属性动态设置为自定义元素。然后从DOM中选择connectedCallback元素，然后寻找render。

然后，在自定义元素就绪时，使用customElements.whenDefined方法将tracklist和my-element连接在一起。此方法返回一个Promise，只要定义了自定义元素，该Promise就会解析，并使您能够执行回调。

请参见以下示例：

section

section

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

祝你有美好的一天！

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

2 个答案: