19

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.

9
  • As to extending a checkbox specifically, you could try doing setAttribute('type', 'checkbox') on the HTMLInputElement object before setting it as the prototype. Commented Aug 25, 2014 at 23:40
  • @MattBrowne That's more of a hint that it's possible than an example of how to do so. :)
    – JoshMock
    Commented Aug 25, 2014 at 23:41
  • 7
    @JoshMock - Viola: jsfiddle.net/DerekL/5utco0en Commented Aug 25, 2014 at 23:44
  • 1
    @dandavis - it's extended from the input prototype, so it should do everything a normal input can do, however I'm not sure. Commented Aug 26, 2014 at 2:08
  • 1
    @Derek朕會功夫 You should turn your original comment into an answer so you get the points you deserve for it. :)
    – JoshMock
    Commented Sep 2, 2014 at 15:49

2 Answers 2

14

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.

1
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

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.