Вопрос по расширению стандартных контролов, на примере кнопки.

[SanichKotikov]

@plainobject Привет,

Посмотрел твоё выступление на WSD 👍 Спасибо! Других контактов не нашлось, поэтому написал сюда.

У меня по этой теме давно вопрос, т.к. расширение кнопки у меня не работает, ни в Chrome ни в Safari. Собственно, брал официальный гайды от Хрома. Может есть какая то хитрость или что-то поменялось? У тебя получается сейчас расширить кнопку?

Спасибо за любую информацию.

[plainobject]

Привет!

В данный момент Blink поддерживает спецификацию Custom Elements v1 без возможности расширения стандартных элементов (https://bugs.chromium.org/p/chromium/issues/detail?id=652579), но существует возможность расширения v0:

var proto = Object.create(HTMLButtonElement.prototype);

proto.sayHello = function () {
    alert('Hello!');
};

proto.createdCallback = function () {
    this.textContent = 'Click me';
    this.addEventListener('click', this.sayHello);
};

var HelloButton = document.registerElement('hello-button', {
    extends: 'button',
    prototype: proto
});

<button is="hello-button"></button>

var helloButton = new HelloButton(),
    helloButton2 = document.createElement('button', 'hello-button');