父自定义元素的构造函数中 shadowRoot.innerHTML 中的 Safari NotSupportedError 自定义元素答案

【问题标题】：Safari NotSupportedError Custom Element in shadowRoot.innerHTML in constructor of parent Custom Element父自定义元素的构造函数中 shadowRoot.innerHTML 中的 Safari NotSupportedError 自定义元素
【发布时间】：2017-09-06 17:59:19
【问题描述】：

我正在创建一个自定义元素并将其 shadowRoot 设置为包含其他自定义元素，这会引发 NotSupportedError (DOM Exception 9): A newly constructed custom element must not have child nodes。（请注意，当标记中没有子自定义元素时，它不会抛出错误。）

是否有适当的方法来更改我的构造函数，这样我就不会在 Safari 中抛出这个 NotSupportedError？

有没有更好的方法来设置这些元素及其内容？

为什么只有当我的标记中有另一个自定义元素时才会发生这种情况？

谢谢。以下是相关工作的节选。

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

    var shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<slot name=form><select-provider src="/path/to/endpoint"></select-provider></slot>
`;
}
}
customElements.define('my-control', MyControl);
class SelectProvider extends HTMLElement{
constructor(){
    super();

    var shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<slot></slot>
`;
}
/* omitted handling of src, loading url */
render(){/* rewrite select with options */}
}
customElements.define('select-provider', SelectProvider);
</script>
<my-control><span>this custom element throws and error in Safari</span></my-control>

【问题讨论】：

您的广告位标签应该是空的，因为它们是插入点。
@Supersharp 插槽中的内容是没有提供内容时的默认内容。换句话说，这是有效且理想的用途，也是命名插槽的原因。您是否看到 NotSupportedErrors 根据您的建议随着槽位调整而消失？
你是对的，但是当你删除它时，你仍然在 Safari 中得到错误吗？
@Supersharp 是的，错误消失了，但当插槽为空时不会，只有当插槽不再有自定义元素时。换一种说法：我可以在槽中放置任何标记，但是当它有另一个自定义元素时，就会抛出这个错误。

标签： safari web-component custom-element domexception

【解决方案1】：

我的孩子 select-provider 在构造函数中执行 this.appendChild 会引发此错误。否则它会按预期工作。为了解决这个问题，我只是把它移到了connectedCallback。

【讨论】：

你能提供你所做的代码sn-p吗？在哪里可以定义connectedCallback？
而且...这是我正在寻找的链接。 developer.mozilla.org/en-US/docs/Web/Web_Components/…
这对我使用 Web 组件的工作也很有帮助：developers.google.com/web/fundamentals/web-components 包括最佳实践。与原始问题相关的关键要点通常是避免对除 shadowRoot 之外的自定义元素进行任何更改（没有 DOM 更改），可以在构造函数中执行任何操作。我通常将事件侦听器添加到自定义元素并在我的构造函数中填充 shadowRoot，在连接的回调中处理任何影响非阴影 dom 的更复杂的渲染/dom/事件。