无法构造'CustomElement'：结果必须没有父项

Question

我正在使用Web Components创建自定义HTML元素

我通过REST服务检索了一些JSON数据，并希望根据响应动态创建自定义元素。

class LibraryFolders extends HTMLElement {
    async connectedCallback() {
        // Load folders
        const foldersResponse = await fetch('/wp-json/prodes-media-library/v1/folders');
        const foldersResponseJson = await foldersResponse.json();

        foldersResponseJson.forEach(folder => {
            document.createElement('library-folder');
        });
    }
}

customElements.define('library-folders', LibraryFolders);

这正常工作，当使用createElement创建元素时，它将在名为constructor的customElement类中调用[C0

LibraryFolder

我试图归档的是

class LibraryFolder extends HTMLElement {
    constructor() {
        super();

        // logs <library-folder></library-folder>
        console.log(this);

        // This results eventually into the following error:
        // Failed to construct 'CustomElement': The result must not have a parent
        document.querySelector('#folders').appendChild(this);
    }
}

customElements.define('library-folder', LibraryFolder);

中的library-folder被触发后，将<div id="folders"></div>元素追加到名为constructor的元素。

但是，当尝试导致以下错误时：

未捕获的DOMException：无法构造'CustomElement'：结果必须没有父项在HTMLDocument.createElement（：1：1536）在HTMLDocument.document.createElement（：292：44）在（URL）在Array.forEach（）在HTMLElement.connectedCallback（URL）

我在这里做错了什么？与其他类似错误不同，文档中没有有关此错误的信息。

Answer 1

感谢class LibraryFolder将我送往正确的方向。

将自身添加到DOM的元素很奇怪。 （一方面，它不能独立于特定的页面结构工作。）

---

问题是，我试图使用自己的@pointy将element添加到DOM，我还发现，如果设法使其在constructor内部工作，将导致。

超出最大调用堆栈大小。

我设法通过在类内部创建一个函数来解决此问题，该函数以后可以调用以将element附加到DOM。

constructor

然后在

class LibraryFolder extends HTMLElement {
    constructor() {
        super();
    }

    appendToDom() {
        // Moved this outside the constructor
        document.querySelector('#folders').appendChild(this);;
    }
}

customElements.define('library-folder', LibraryFolder);

类中调用该函数。

LibraryFolders