HierarchyRequestError 4 в IE и Edge при манипуляции с DOM

Я разрабатываю веб-компонент с помощью 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)