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

Question

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

DOMException:无法在'Document'上执行'createElement':结果必须没有子节点

违规行很简单:

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

Answer 1

Chrome的原生实现似乎是强制执行polyfill不符合的规范要求.根据规范的" 自定义元素构造函数的要求 "部分:

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

我试图创建的元素在其构造函数中添加了自己的子元素.

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

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

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