Search code examples
javascriptimagesafariweb-componentcustom-element

How to properly extend HTMLImageElement

Extending HTMLImageElement directly works okay for Chrome, Firefox etc.

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

However it does not work at Safari which says super() is an illegal constructor. According to MDN Image() is the proper constructor for HTMLImageElement (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement). I tried to extend Image as well. However even though it does not print out any errors, it just does not behave as a CustomElement.

Any ideas on how to create a custom element on top of HTMLImageElement that can work for both Chrome and Safari?

Solution

  • There are 2 different flavored Web Components:
    details see Web Components : extending native elements

    • Autonomous Elements (extend from HTMLElement)
    • Customized Built-In Elements (extend from any Element)

    But Apple/WebKit will not implement the latter as stated in 2016:

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