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

Question

我正在使用 stencilJS 开发一个网络组件。我正在使用插槽来呈现 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)

Answer 1

终于拿到了这个。

错误是由于在运行期间生成的层次结构不正确造成的。

我只是将 <slot/> 移到 <div>

之外就解决了这个问题

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

HierarchyRequestError 4 on IE and Edge on DOM manipulation

internet-explorer

dom-manipulation

web-component

typescript

stenciljs