Может ли пользовательский элемент расширять входной элемент?

Используя спецификацию веб-компонентов, можно ли расширить определенный тип элемента <input>?

Этот вопрос похож на мой, но он указывает только, как продлить элемент button, а не текстовый ввод или любой другой вариант <input> тег.

В моем случае я хотел бы расширить флажок (<input type="checkbox" />) или радиокнопку (<input type="radio" />), чтобы обернуть более сложный интерфейс вокруг одной и той же функции элемента ввода ядра, но я не вижу любым способом сделать это, используя синтаксис extends, предоставленный document.registerElement. Мне кажется, что вы должны сделать что-то вроде следующего:

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

Однако этот конкретный случай, кажется, не документирован или не объяснен нигде, что я могу найти, и я уверен, что пример не будет работать на практике.

Ответ 1

Атрибут is должен использоваться, если вы расширяете другой стандартный элемент HTML. Поскольку элемент "checkbox" отсутствует, вы не можете расширять такие объекты, как input[type=checkbox] или radio. Расширьте элемент input (HTMLInputElement) и укажите тип в 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

Демо: http://jsfiddle.net/DerekL/5utco0en/

Поскольку пользовательский элемент простирается от HTMLInputElement, все исходные свойства и методы наследуются. Взгляните на эту демонстрацию: http://jsfiddle.net/DerekL/6gtLp8p5/

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

this.checked вернет правильное значение checked, как и исходное.

Ответ 2

Вы можете создать свой собственный виджет с помощью jQuery (http://jqueryui.com/widget/) и создать необходимый HTML-код, изменив DOM с помощью вызовов jQuery (или даже общие вызовы javascript).