Пользовательские элементы HTML5 ES6, расширяющие HTMLTextAreaElement, приводят к сбою недопустимого конструктора

мне нужно расширить пользовательский элемент из HTMLTextAreaElement для использования в форме и получить значение напрямую. но я всегда получаю сообщение о недопустимом конструкторе

HTML:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <working-element></working-element>
    </div>
    <div>
      <crashing-element></crashing-element>
    </div>
  </body>
  <script src="myScript.js">
</html>

Машинописный текст (скомпилированный как ES6 в myScript.js):

// all works fine
class newElementWorks extends HTMLElement {
  constructor(){
    super();
    console.log('newElementWorks');
  }
}
customElements.define('working-element', newElementWorks);

// this one crashes on super() call
class newElementCrash extends HTMLTextAreaElement {
  constructor(){
    super();
    console.log('newElementCrash');
  }
}
customElements.define('crashing-element', newElementCrash);

скрипт выполняется в Chrome версии 63.0.3239.132, которая поддерживает ES6 и Custom-Element.

я уже пытался включить полифил webcomponents/custom-elements

у вас есть какие-либо идеи, почему происходит сбой расширения от другого, кроме HTMLElement?


typescript javascript html custom-element ecmascript-6
person mtizziani    schedule 24.01.2018    source источник
comment
Вы транспилируете код TypeScript в ES5 или ES6?   -  person Bergi    schedule 24.01.2018
comment
@Берги: на ES6   -  person mtizziani    schedule 24.01.2018
comment
Возможный дубликат Как создать новый экземпляр расширенного класса пользовательских элементов   -  person Supersharp    schedule 25.01.2018

Ответы (2)


arrow_upward
6
arrow_downward

Ошибка, которую вы видите, означает, что объект, для которого вы вызываете new, не имеет внутреннего метода [[construct]].

Хотя в спецификациях указано, что вы можете использовать классы extend HTML*Element, похоже, что в настоящее время они не поддерживаются (см. аналогичную проблему: https://github.com/webcomponents/custom-elements/issues/6). ), поэтому в данный момент вы можете расширить только HTMLElement.

person adz5A    schedule 24.01.2018
comment
Спасибо за быстрый ответ. Мне интересно, почему в Интернете так много руководств, в которых делается расширение из HTML * Element, если оно не работает ни в одном браузере. - person TypedSource; 26.01.2018
comment
Они заполняют эти классы? Если у вас есть ссылка на один из них, я посмотрю на него, так как недостаточно информации, чтобы быть уверенным в том, в чем проблема. Единственный вывод, который вы можете сделать на данный момент, это то, что HTML*Element не может быть унаследовано. - person adz5A; 26.01.2018
comment
нет, они не поддерживают ничего, кроме HTMLElement. Ответ на вопрос, который я открыл, таков: я скоро приду. - person TypedSource; 27.01.2018
comment
Это мой вывод в моем ответе, нормально ли для вас принять его или вы считаете, что его каким-то образом не хватает (для проверки будущих читателей)? - person adz5A; 31.01.2018

arrow_upward
0
arrow_downward

Две вещи явно неверны в вашей попытке расширить HTMLTextAreaElement.

  1. Вы должны добавить обязательный { extends: 'textarea' } третий аргумент при регистрации вашего элемента.
  2. Расширенные встроенные элементы не получают собственного тега, вместо этого используют тег расширенного элемента, добавляя ваше имя в атрибут is="".

class MyTextarea extends HTMLTextAreaElement {
  constructor(){
    super();
    console.log('MyTextarea');
  }
}

customElements.define('my-textarea', MyTextarea, {extends: 'textarea'});
<textarea is="my-textarea"></textarea>

person connexo    schedule 02.10.2020