未能构造“CustomElement”：结果不能有父级
我正在使用Web组件创建自定义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创建元素时，它调用customElement类中名为LibraryFolder的constructor。
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>的元素中，只要class LibraryFolder中的constructor被触发。
但是，当尝试这样做时，会出现以下错误：
Uncaught :未能构造'CustomElement'：结果不能有父 ( HTMLDocument.createElement :1:1536) ( HTMLDocument.document.createElement :292:44) .=‘2’>(网址) Array.forEach () 在HTMLElement.connectedCallback (网址)
我在这里做错什么了？与其他类似的错误不同，文档中没有关于此错误的信息。
回答 1
Stack Overflow用户
发布于 2020-01-02 15:56:54
感谢@尖送我到正确的方向。
将自己添加到DOM中的元素会很奇怪。(首先，它不会独立于特定的页面结构工作。)
问题是，我试图使用自己的constructor将元素添加到DOM中，我还发现，如果您设法让它在它将生成的constructor中工作。
超过最大调用堆栈大小。
我设法通过在类中创建一个函数来解决这个问题，这个函数可以在后面调用，以将元素附加到DOM中。
class LibraryFolder extends HTMLElement {
constructor() {
super();
}
appendToDom() {
// Moved this outside the constructor
document.querySelector('#folders').appendChild(this);;
}
}
customElements.define('library-folder', LibraryFolder);然后在LibraryFolders类中调用该函数。
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 => {
const node = document.createElement('library-folder');
// Now it works correctly :)
node.appendToDom();
});
}
}
customElements.define('library-folders', LibraryFolders);补充一下，根据规格，这个错误是正确的。If result’s parent is not null, then throw a "NotSupportedError" DOMException.
Chrome没有给出正确的错误，但是如果您在Firefox中尝试它，您将得到指定的错误
有关更多详细信息，请访问https://dom.spec.whatwg.org/#dom-document-createelement
https://stackoverflow.com/questions/59565868
复制相似问题
腾讯云开发者
