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

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