Chrome 67打破了我的WebComponent

Question

由于一些奇怪的原因，Chrome 66到Chrome 67的更新破坏了我的网络应用程序的WebComponents。

顶部的地图是通过WebComponent自定义元素定义的。应该注意，它不是通过影子DOM渲染的。它通过将子<img>附加到我的地图组件来直接呈现。

Chrome 66的DOM：

<bj-map ...>
  <img src="...">
</bj-map>

Chrome 67的DOM：

<bj-map ...></bj-map>

该组件的课程为Map，从HTMLElement延伸。已删除不相关的方法。

class Map extends HTMLElement {

  connectedCallback () {
    this.render()
  }

  render () {
    const src = this.getMapSource()

    this.innerHTML = `
      <img src="${src}"></img>
    `
  }
}

customElements.define('bj-map', Map, { extends: 'div' })

export default Map

我有什么办法可以尝试调试这个神奇的问题吗？

Answer 1

从{ extends: 'div' }删除customElements.define('bj-map', Map, { extends: 'div' })。

class Map extends HTMLElement未延伸HTMLDivElement，因此您无需在define中指定扩展名。

Extending native HTML elements还有其他详细信息。