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>之外来解决了这个问题

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

1 个答案: