TypeScript 2.1 Custom Elements

Question

TypeScript 2.1 Now there is support for writing custom html elements ( "What's New in TypeScript - 2.1" )

However, I could not find documentation on how this should work.

Can someone explain how this should work, ideally with examples?

thank

Answer 1

Currently, it is possible not when setting ES5 with typescript. Custom API V1 elements require ES6 / ES2015 classes. However, if you target ES5 to TypeScript (for compatibility with IE 11, for example), all classes are passed to functions.

This is not a TypeScript limitation, but a limitation of the V1 custom elements API.

You have two options:

• Target ES2015 with TypeScript and thus completely abandon IE11 support
• Target ES5 with TypeScript and use:
  • a polyfill for a custom element API that supports ES5
  • a shim that allows you to use your own custom API element with ES5 (and thus TypeScript is passed)

TypeScript 2.1 ; TypeScript. . issue.

Answer 2

, , , super() ES5 TypeScript .

, ES2015 , TypeScript ES5. super(), .

TypeScript , TypeScript. :

class MyCustomElement extends HTMLElement {
    constructor() {
        super();
        this.foo = "bar";
    }

    doSomething() {
        console.log(this.foo);
    }
}

customElements.define("my-custom-element", MyCustomElement);