Can a custom element extend an input element?

Question

Using the web components specification, is it possible to extend a specific type of <input> element?

This question is similar to mine, but it only specifies how to extend a button element, not a text input or any other variant of the <input> tag.

In my case, I'd love to extend a checkbox (<input type="checkbox" />) or a radio button (<input type="radio" />) in order to wrap more complex UI around the same core input element functionality, but I don't see any way to do that using the extends syntax provided by document.registerElement. In my mind it would seem that you should be able to do something like the following:

document.registerElement('x-checkbox', {
    prototype: Object.create(HTMLInputElement.prototype),
    extends: 'input[type=checkbox]'
});

However, this specific case doesn't seem to be documented or explained anywhere that I can find, and I'm fairly confident that example won't work in practice.

I found an example of extending an input element here: https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Web_components. Does that help? — Matt Browne, Aug 25 '14 at 23:37
As to extending a checkbox specifically, you could try doing `setAttribute('type', 'checkbox')` on the HTMLInputElement object before setting it as the `prototype`. — Matt Browne, Aug 25 '14 at 23:40
@MattBrowne That's more of a hint that it's possible than an example of how to do so. :) — JoshMock, Aug 25 '14 at 23:41
@MattBrowne Part of my hope is to not have to recreate the logic of toggling a checkbox or handling which radio is checked in a group of radio buttons on my own. Not sure that setting the `type` attribute alone would solve that. — JoshMock, Aug 25 '14 at 23:43
@Derek朕會功夫 Ah, the `is` attribute. Wasn't thinking about that. You may be on to something there. — JoshMock, Aug 25 '14 at 23:46
@JoshMock - I believe `is` must be used if you are extending another standard HTML element. Since there is no `checkbox` element, you cannot extend things like `input[type=checkbox]` or radio. Extend the whole input element and specify the type. — Derek 朕會功夫, Aug 25 '14 at 23:58
@Derek朕會功夫: do you know if the resulting custom element is included in form submits, like a real input? — dandavis, Aug 26 '14 at 01:02
@dandavis - it's extended from the input prototype, so it should do everything a normal input can do, however I'm not sure. — Derek 朕會功夫, Aug 26 '14 at 02:08
@Derek朕會功夫 You should turn your original comment into an answer so you get the points you deserve for it. :) — JoshMock, Sep 02 '14 at 15:49

Derek 朕會功夫 · Accepted Answer · 2018-02-20T14:35:43.083

The is attribute must be used if you are extending another standard HTML element. Since there is no "checkbox" element, you cannot extend things like input[type=checkbox] or radio. Extend the input element (HTMLInputElement) and specify the type in the createdCallback:

<body>
    <input is="totally-not-checkbox">   <!-- Custom Checkbox #1 -->
</body>

var proto = Object.create(HTMLInputElement.prototype);
proto.createdCallback = function() {
    this.type = "checkbox";
    this.addEventListener("change", this.toggleZoom);
};
proto.toggleZoom = function(){
    $(this).toggleClass("zoom");                        //FYI $ is jQuery
};

var nCB = document.registerElement("totally-not-checkbox", {
    prototype: proto,
    extends: 'input'
});

document.body.appendChild(new nCB());  //Custom Checkbox #2

Demo: http://jsfiddle.net/DerekL/5utco0en/

Since the custom element extends from HTMLInputElement, all original properties and methods are inherited. Take a look at this demo: http://jsfiddle.net/DerekL/6gtLp8p5/

proto.toggleZoom = function(e){
    $(this).toggleClass("zoom");
    console.log(this, this.checked);
};

this.checked will return the correct checked value just like an original checkbox.

score 1 · Answer 2 · answered Jun 06 '21 at 02:02

1

6 years later,

I have created my own. https://elements-x.com/component/input/text It wraps <input> tags with custom design and dropdown, and it supports the following types.

text
date
time
checkbox
radio
color
file
switch

answered Jun 06 '21 at 02:02

allenhwkim

27,270
18
89
122

Can a custom element extend an input element?

2 Answers2

Linked