无法在'Document'上执行'createElement':结果不能有子项

时间:2016-10-21 16:42:06

标签: custom-element

我现在通过polyfill使用自定义元素v1一段时间了。 Chrome 54(具有原生v1实现的第一个版本)在初始化元素时开始抛出错误:

  

DOMException:无法在'Document'上执行'createElement':结果不能包含子项

违规行很简单:

let el = document.createElement('my-custom-element');

1 个答案:

答案 0 :(得分:13)

Chrome的原生实现似乎是强制执行polyfill不符合的规范要求。根据规范的“Requirements for custom element constructors”部分:

  

元素不得获得任何属性或子元素,因为这违反了使用createElement或createElementNS方法的消费者的期望。

我试图创建的元素在其构造函数中将子元素添加到自身。

解决方案是遵循规范的建议:

  

通常,应尽可能将工作推迟到connectedCallback - 尤其是涉及获取资源或呈现的工作。但是,请注意,connectedCallback可以被多次调用,因此任何真正一次性的初始化工作都需要一个防护来阻止它运行两次。

也就是说,在连接的回调中添加子节点并使用标志来确保元素仅在第一次连接时初始化。