extending html form element

Question

First time trying to extend a specific html element, in my case a form. I have some experience with "normal" custom elements / web components, derived from HTMLElement.

The base code for demo purposes:

customElements.define('my-form', class extends HTMLFormElement {
    constructor() {
        console.log('my-form()');
        super();
    }

    connectedCallback() {
        console.log('my-form::cc()');
        super.connectedCallback();
    }
}, {extends: 'form'});

If I insert the new element as <my-form>[form content]</my-form>, the element will be an instance of HTMLElement, but not an instance of HTMLFormElement, from which it was derived. Why? Also the code in constructor() and connectedCallback() are never called. Why ? It is definitely not a form, because it doesn't have the .elements propriety.

Using <form is="my-form"> seems to work somehow, constructor and cc() are called, the object is an instance of HTMLFormElement, the only error I get is TypeError: (intermediate value).connectedCallback is not a function at HTMLFormElement.connectedCallback.

Frankly I would prefer the first option (because in the second one I cannot use custom attributes and call it valid html). But what am I doing wrong ?

FYI, Customized Built-In Elements (anything but HTMLElement) will never be supported in Apple browsers — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Nov 30, 2021 at 11:34

Danny '365CSI' Engelman · Accepted Answer · 2024-04-26 08:37:52Z

4

<form is="my-form"> is the correct and only notation for a Customized Built-In Element (extends HTMLFormElement)

<my-form> is the notation for an Autonomous Element (extends HTMLElement)

The latter is the only version of Custom Elements supported in Safari. Apple have, since 2016, stated they will never implement Customized Built-In Elements.

HTMLFormElement does NOT have a connectedCallback method; that is why you get an error when you call that method on the super Element.

If you extend from HTMLFormElement and you use <my-form> it is in no way related to your definition; you create an HTMLUnknownElement, which by default is an HTMLElement.

So the general advice

Stick to Autonomous Elements extends from HTMLElement (unless you want to keep a polyfill updated yourself for ever and ever)

edited Apr 26, 2024 at 8:37

answered Nov 30, 2021 at 18:07

Danny '365CSI' Engelman

22.3k2 gold badges49 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

extending html form element

1 Answer 1

So the general advice

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

So the general advice

Comments

Your Answer

Sign up or log in

Post as a guest

Related