HierarchyRequestError 4 on IE and Edge on DOM manipulation

Question

I am developing a web component using stencilJS. I am using a slot for rendering the HTML, but I need to modify the HTML before it gets rendered, for that, I am using querySelector and appendChild function to manipulate DOM. This is working fine on Chrome but throws Hierarchy Error on IE and Edge. Here is my code:

render function in TSX:

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

Code to manipulate 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)
    })
  }

The above code works perfectly on chrome but throws an error in IE on the line

container.appendChild(elem)

Answer 1

Finally, I got hold of this one.

The error was occurring because of the incorrect hierarchy that was generated during run-time.

I solved the problem just by moving <slot/> outside of the <div>