如何正确扩展 HTMLImageElement答案

【问题标题】：How to properly extend HTMLImageElement如何正确扩展 HTMLImageElement
【发布时间】：2021-03-18 13:04:18
【问题描述】：

直接扩展 HTMLImageElement 适用于 Chrome、Firefox 等。

export default class CustomImg extends HTMLImageElement {
    constructor() {
        super();
    }
}

但是它在 Safari 中不起作用，它说 super() 是一个非法的构造函数。根据 MDN Image() 是 HTMLImageElement (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) 的正确构造函数。我也尝试扩展 Image 。然而，即使它没有打印出任何错误，它也不会像 CustomElement 那样运行。

关于如何在 HTMLImageElement 之上创建适用于 Chrome 和 Safari 的自定义元素的任何想法？

【问题讨论】：

标签： javascript image safari web-component custom-element

【解决方案1】：

有 2 种不同风格的 Web 组件：
详情见Web Components : extending native elements

自治元素（从 HTMLElement 扩展）
定制的内置元素（从任何元素扩展）

但 Apple/WebKit 不会如 2016 中所述实现后者：

https://github.com/WICG/webcomponents/issues/509

【讨论】：