Search code examples
javascriptcustom-element

How to extend <form> using Custom Elements v1 in Google Chrome?

I've tried to define a new custom element extends HTMLFormElement like:

class PrintableFormElement extends HTMLFormElement {
  constructor() {
    super();
    console.log("created: ", this);
  }
  print() { console.log(this.elements)); }
}
customElements.define("printable-form", PrintableFormElement, { extends: "form" });

This doesn't work right. <form is="printable-form" ...> doesn't have the print() method (define(...) seems to be failed), and new PrintableFormElement are fail with an error with Google Chrome 55.

new PrintableFormElement threw the following error:

Uncaught TypeError: Illegal constructor
    at PrintableFormElement (<anonymous>:3:5)
    at <anonymous>:1:1

I have no idea how to define a custom element extends with Custom Elements v1 in current Google Chrome.

Custom Elements v0 works well but I want to use it.

Solution

  • Customized Built-in Elements "v1" are not implemented yet in Chrome, you should use a polyfill.

    For more details, see also this question from SO: