Chrome 67 破坏了我的 WebComponent

Question

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

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

Chrome 66 的 DOM:

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

Chrome 67 的 DOM:

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

组件的 class 是 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

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

class Map extends HTMLElement 未扩展 HTMLDivElement 因此您无需在 define.

中指定扩展

Extending native HTML elements 有更多详细信息。

Chrome 67 破坏了我的 WebComponent

Chrome 67 broke my WebComponent

google-chrome

web-component