Не получается реализовать такое:
class M extends HTMLElement
{
}
Существует ли вообще такая возможность? Спасибо.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуtarget: es2015
+
https://learn.javascript.ru/webcomponent-core
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
class customQwabrasComponent extends HTMLDivElement {
constructor() {
//@ts-ignore
super(...arguments);
this.props = {
name: null
};
this.nameEl = document.createTextNode('anonymos');
this.classList.add('fo');
this.id = 'fo';
this.style.color = 'red';
// --
this.innerHTML = `hello `;
this.appendChild(this.nameEl);
// --
this.addEventListener('click', this)
this.addEventListener('mouseout', this)
}
static get observedAttributes() {
return ['name'];
}
attributeChangedCallback(_key, _oldValue, _newValue) {
console.log('attributeChangedCallback');
if (_key in this.props)
this.props[_key] = _newValue;
this.render();
}
connectedCallback() { console.log('connectedCallback'); }
handleEvent(_e) {
console.log(`_e.type${_e.type}`);
}
render() {
this.nameEl.textContent = this.props.name;
}
}
customElements.define('custom-qwabras-component', customQwabrasComponent, { extends: 'div' });
let el = new customQwabrasComponent;
document.body.appendChild(el);
setTimeout(() => {
el.setAttribute('name', 'qwabra');
}, 3e3);
//# sourceMappingURL=index.js.map
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js">/* W3C Custom Elements */</script>
HTMLElement
- это не (совсем) класс. И такая запись в обычном яваскрипте вполне сработала бы. Проблема в том, во что это компилирует компилятор typescript. Можно попробовать поставить в настройках компилятора target: es6 или как-то такHTMLElement
это интерфейст. Можно наследовать интерфейс от интерфейса. А клас должен реализоватьinterface
который в других языках