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

Question

我正在使用 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)

Answer 1

最后，我抓住了这个。

由于在运行时生成的层次结构不正确，因此发生错误。

<slot/>我只是通过移动到外面解决了这个问题<div>