JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<input is="totally-not-checkbox"> <!--Direct-->

CSS

.zoom[is="totally-not-checkbox"]{
    -webkit-transform: scale(1.5);
}
*[is="totally-not-checkbox"]{
    -webkit-transition: -webkit-transform 0.1s ease-out;
}

JavaScript

var proto = Object.create(HTMLInputElement.prototype);
proto.createdCallback = function() {
    this.type = "checkbox";
    this.addEventListener("change", this.toggleZoom.bind(this));
};
proto.toggleZoom = function(e){
    $(this).toggleClass("zoom");
    
    //Since the custom element extends from HTMLInputElement, 
    //all properties and methods are inherited.
    console.log(this, this.checked);
};

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

document.body.appendChild(new nCB());  //JS DOM