HierarchyRequestError 4 в IE и Edge при манипулировании DOM - PullRequest
Новая
       15

HierarchyRequestError 4 в IE и Edge при манипулировании DOM

0 голосов
/ 23 января 2019

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

1 Ответ

0 голосов
/ 24 января 2019

Наконец-то я понял это.

Ошибка произошла из-за неправильной иерархии, которая была сгенерирована во время выполнения.

Я решил проблему, просто переместив <slot/> за пределы <div>

...