Search code examples
typescriptcustom-elementtypescript2.1

TypeScript 2.1 Custom Elements

TypeScript 2.1 Apparently now has support for writing custom html elements ("What's new in TypeScript - 2.1")

However I have been unable to find any documentation on how this is supposed to work.

Can anyone provide an explanation on how this is supposed to work, ideally with examples?

Thank You

Solution

  • Currently this is not possible, when targeting ES5 with TypeScript. The Custom Elements API V1 needs ES6/ES2015-style classes. However if you target ES5 with TypeScript (for compatibility with IE 11 for example) all classes get transpiled to functions.

    This is not a TypeScript limitation, but a limitation of the Custom Elements API V1 itself.

    You have two options:

    1. Target ES2015 with TypeScript and thus drop IE11 support altogether
    2. Target ES5 with TypeScript and use:
      • a polyfill for the Custom Elements API, that supports ES5
      • a shim that allows the native Custom Element API to be used with ES5 (and thus transpiled TypeScript)

    The release notes for TypeScript 2.1 are misleading; it is not a TypeScript issue at all. See this issue for more background.