google-chrome - 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>

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

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

标签： google-chromeweb-component

Answer 1

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

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

扩展原生 HTML 元素有更多细节。