IE 上的 HierarchyRequestError 4 和 DOM 操作上的 Edge答案

【问题标题】：HierarchyRequestError 4 on IE and Edge on DOM manipulationIE 上的 HierarchyRequestError 4 和 DOM 操作上的 Edge
【发布时间】：2019-06-16 20:44:59
【问题描述】：

我正在使用 stencilJS 开发一个 Web 组件。我正在使用一个插槽来呈现 HTML，但我需要在呈现 HTML 之前对其进行修改，为此，我使用 querySelector 和 appendChild 函数来操作 DOM。这在 Chrome 上运行良好，但在 IE 和 Edge 上引发层次结构错误。这是我的代码：

TSX 中的渲染函数：

    render () {
      return (
       <div class={`column-${this.column}`}>
         <slot/>
       </div>
     )
   }

操作 DOM 的代码：

componentDidLoad () {
    const container = this.element.shadowRoot.querySelector(`.column-${this.column}`) ?
      this.element.shadowRoot.querySelector(`.column-${this.column}`) : this.element.querySelector(`.column-${this.column}`)
    Array.from(this.element.children).forEach(node => {
      const elem = document.createElement('div')
      elem.appendChild(node)
      container.appendChild(elem)
    })
  }

上面的代码在 chrome 上完美运行，但是在 IE 中抛出错误就行了

container.appendChild(elem)

【问题讨论】：

ShadowRoot -> Browser Compatibility
@Andreas，我同意IE和Edge不支持ShadowDOM的观点，但错误不是因为ShadowRoot。我已经控制台记录了容器，它在 IE 上得到了它。当我尝试调用 appendChild() 时抛出错误
您正在尝试使用 shadowRoot.querySelector 将值分配给容器。你能尝试用简单的JS代码在IE中做一个测试，做同样的事情来检查它是否有效吗？

标签： typescript internet-explorer web-component dom-manipulation stenciljs

【解决方案1】：

最后，我抓住了这个。

由于运行时生成的层次结构不正确而发生错误。

我只是通过将<slot/> 移出<div> 解决了这个问题

【讨论】：

从您的上一篇文章中，我可以看到您已经解决了您的问题。我建议您在 24 小时后将您自己的解决方案标记为该问题的可接受答案，这可能会在未来帮助其他社区成员解决类似问题。感谢您的理解。