It is impossible to implement this:

class M extends HTMLElement { }

Is there such a possibility at all? Thank.

  • 3
    HTMLElement is not a class at all. And such a record in the usual javascript would work quite well . The problem is what compiler typescript compiles into. You can try to put in the settings of the compiler target: es6 or something like that - Grundy
  • HTMLElement is an interface. You can inherit the interface from the interface. And the class should realize - Nazar Kalytiuk
  • @NazarKalituk, everything is different in javascript :-) is not the interface that is in other languages - Grundy
  • OK. I see. Thanks. - Qulac

1 answer 1

This question is purely for JS - customelements

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>