Can a custom element extend an input element?

Asked 25/8, 2014 at 23:32 Answered 6/6, 2021 at 2:2

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.

Wheen answered 25/8, 2014 at 23:32 Comment(9)

As to extending a checkbox specifically, you could try doing setAttribute('type', 'checkbox') on the HTMLInputElement object before setting it as the prototype. – Foraminifer 25/8, 2014 at 23:40

@MattBrowne That's more of a hint that it's possible than an example of how to do so. :) – Wheen 25/8, 2014 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. – Wheen 25/8, 2014 at 23:43

@Wheen - Viola: jsfiddle.net/DerekL/5utco0en – Concordat 25/8, 2014 at 23:44

@Derek朕會功夫 Ah, the is attribute. Wasn't thinking about that. You may be on to something there. – Wheen 25/8, 2014 at 23:46

@Wheen - 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. – Concordat 25/8, 2014 at 23:58

@Derek朕會功夫: do you know if the resulting custom element is included in form submits, like a real input? – Contrite 26/8, 2014 at 1:2

@Contrite - it's extended from the input prototype, so it should do everything a normal input can do, however I'm not sure. – Concordat 26/8, 2014 at 2:8

@Derek朕會功夫 You should turn your original comment into an answer so you get the points you deserve for it. :) – Wheen 2/9, 2014 at 15:49

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.

Efrem answered 2/9, 2014 at 19:43 Comment(1)

While I agree that the answer is great and correct, anybody considering this approach should realize that Safari is no planning to support this feature: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… – Swinge 22/7 at 8:19

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

Unblown answered 6/6, 2021 at 2:2 Comment(0)

Recommended topics

Hot tags