0

Не получается реализовать такое:

class M extends HTMLElement
 {

 }

Существует ли вообще такая возможность? Спасибо.

4
  • 3
    HTMLElement - это не (совсем) класс. И такая запись в обычном яваскрипте вполне сработала бы. Проблема в том, во что это компилирует компилятор typescript. Можно попробовать поставить в настройках компилятора target: es6 или как-то так
    – Grundy
    3 мая 2018 в 15:12
  • HTMLElement это интерфейст. Можно наследовать интерфейс от интерфейса. А клас должен реализовать 3 мая 2018 в 18:48
  • @НазарКалитюк, в яваскрипте все не так :-) имеется ввиду не тот interface который в других языках
    – Grundy
    4 мая 2018 в 13:20
  • Ок. ясно, спасибо.
    – Qulac
    9 мая 2018 в 7:52

1 ответ 1

-1

данный вопрос относится чисто к 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.