По какой-то странной причине обновление с Chrome 66 до Chrome 67 сломало WebComponents моего веб-приложения.
Карта вверху определяется с помощью настраиваемого элемента WebComponent. Следует отметить, что он не отображается через теневой DOM. Он отображается напрямую путем добавления дочернего <img> к моему компоненту карты.
DOM Chrome 66:
<bj-map ...>
<img src = "...">
</bj-map>
DOM Chrome 67:
<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
Есть ли способы решить эту магическую проблему?
@abraham Вот и все! (Если вы напишете это как ответ, я могу принять это как правильное).





Удалите { extends: 'div' } из customElements.define('bj-map', Map, { extends: 'div' }).
class Map extends HTMLElement не расширяет HTMLDivElement, поэтому вам не нужно указывать расширение в define.
Расширение собственных HTML-элементов имеет дополнительную информацию.
Есть ли ошибки в Chrome DevTools? Попробуйте удалить
{ extends: 'div' }, карта расширяетHTMLElement, а неHTMLDivElement.