CODEWITHSUNDEEP
javascripthtmltypescriptecmascript-6custom-element
mtizziani
mtizziani

Reputation: 1016

HTML5 ES6 Custom-Elements extending HTMLTextAreaElement crashes illegal constructor

i need to extend a custom element from HTMLTextAreaElement for using in a form and fetch value directly. but i allways get Illegal Constructor Message

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>

Typescript (compiled as ES6 to 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);

the script is executed on Chrome Version 63.0.3239.132 that supports ES6 and Custom-Element

i allready tried to include webcomponents/custom-elements polyfill

do you have any idea why extending from other than HTMLElement crashes?

Upvotes: 3

Views: 3103

Answers (2)

connexo
connexo

Reputation: 56783

Two things are incorrect in your attempt at extending HTMLTextAreaElement.

  1. You must add the mandatory { extends: 'textarea' } third argument when registering your element.
  2. Extended built-in-elements don't get a tag of their own, instead use the tag of the extended element, adding your name in an is="" attribute.

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

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

Upvotes: 3

adz5A
adz5A

Reputation: 2032

The error you are seeing means that the object you are calling new on does not have a [[construct]] internal method.

Although the specs indicates that you can extend HTML*Element classes it does not seem to be supported at this time ( see a similar issue : https://github.com/webcomponents/custom-elements/issues/6 ) so you can only extend HTMLElementat this moment.

Upvotes: 6

Related Questions