关于Web组件:Chrome 67破坏了我的WebComponent?

Chrome 67 broke my WebComponent ??

出于某种奇怪的原因,从Chrome 66到Chrome 67的更新破坏了我的Web应用程序的WebComponents。

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

Chrome

1
2
3
<bj-map ...>
  <img src="...">
</bj-map>

Chrome 67的DOM:

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

组件的类是Map,从HTMLElement扩展。不相关的方法已被删除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

有什么方法可以尝试调试这个神奇的问题?


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

class Map extends HTMLElement不扩展HTMLDivElement,因此您无需在define中指定扩展。

扩展本机HTML元素具有其他详细信息。