Унаследовать class от HTMLElement

121

04 января 2021, 21:50

Код ниже в моём понимание присваивает переменной MyTimerProto ссылку на объект у которого есть свой метод tick и прототипом объекта является HTMLElement.prototype.

  var MyTimerProto = Object.create(HTMLElement.prototype); 
  MyTimerProto.tick = function() { // свой метод tick 
    this.innerHTML++;

Каким образом подобную структуру можно перенести в классовый синтаксис? Я пытался выстроить нечто подобное (код ниже), но получаю сообщение об ошибке.

    class Test extends HTMLElement{ 
      constructor(){ 
        super(); 
        this.tick = function() { // свой метод tick 
          this.innerHTML++; 
        }; 
      } 
    } 
     
    var MyTimerProto = new Test();

Answer 1

Вы были на правильном пути. Все, что вам осталось - добавить ваш класс в customElements.

class Test extends HTMLElement { 
  constructor() { 
    super(); 
    console.log('constructor: Test') 
  } 
  tick() { 
    console.log('method: tick'); 
    return 1; 
  } 
} 
customElements.define('my-test', Test); 
 
const test = new Test(); 
const test2 = document.createElement('my-test'); 
console.log(test.tick()); 
document.body.appendChild(test); 
document.body.appendChild(test2);

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как можно провести линию между двумя блоками, если зажать мышь на одном и отпустить на другом?

К примеру, междуspan1 и

111

CSS

Не корректная анимация появления div

Есть контейнер содержимого в галерее, у него стоят display:flex и justify-content: center, так же у каждого элемента галереи есть эффект появления и исчезновенияВ...

129

CSS

Как изменять вид ползунка в слайдере?

Есть слайдер-ползунок, работающий с помощью jquery-uihttps://codepen

119

c++

Написание структуры контейнера set

Написать структуру, которая обрабатывала бы входные данные следующим образомНа входе даётся целое число, указывающее количество операций

117