Issues with converting Typescript to ECMAScript 5 causing errors with Custom Elements v1 in IE11

Question

Issues with converting Typescript to ECMAScript 5 causing errors with Custom Elements v1 in IE11

I've encountered a challenge trying to make a basic web component function properly when transpiled to ES5. It works seamlessly on Chrome, Edge, and Firefox, but IE11 is throwing an error in the constructor of the component stating "The custom element constructor did not produce the element being upgraded."

UPDATE

The insightful analysis by Oliver Krull below has effectively identified Typescript's compiler output as the root cause of the issue. Is there a way to resolve this?

The initial source code (in TypeScript):

import "./AppDrawer.less"

class AppDrawer extends HTMLElement {
    get open() {
...

<p>The HTML:</p>

<pre><code><!doctype html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0-rc.8/webcomponents-lite.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0-rc.8/custom-elements-es5-adapter.js"></script>
        <script src="bundle.js"></script>
    </head>
   ...

typescript web-component

Answer 1

Answer №1

To ensure compatibility with custom elements v1 in all web browsers, including Internet Explorer 11, we must incorporate the native-shim found here. More information on this can be found here.

While this solution works seamlessly in major browsers such as Edge, Safari, and Firefox, it encounters issues in IE11.

The problem arises from syntax errors due to es6 code used in the shim when imported into ie11.

A quick fix is to compile the shim to es5 and include both es6 and es5 versions (es6 first, then es5) to avoid errors.

Though not the most elegant solution, it effectively resolves the compatibility issue.

I have provided a repository with a functional example (notably absent the disabled attribute due to conflicts).

Once again, while it may not be perfect, it gets the job done ;-)

Answer 2

To ensure compatibility with custom elements v1 in all web browsers, including Internet Explorer 11, we must incorporate the native-shim found here. More information on this can be found here.

While this solution works seamlessly in major browsers such as Edge, Safari, and Firefox, it encounters issues in IE11.

The problem arises from syntax errors due to es6 code used in the shim when imported into ie11.

A quick fix is to compile the shim to es5 and include both es6 and es5 versions (es6 first, then es5) to avoid errors.

Though not the most elegant solution, it effectively resolves the compatibility issue.

I have provided a repository with a functional example (notably absent the disabled attribute due to conflicts).

Once again, while it may not be perfect, it gets the job done ;-)

Answer 3

Answer №2

The problem arose from the fact that Typescript's ES5 class implementation is not compatible with the custom-elements-v1 shim. To resolve this issue, one can configure TypeScript to produce ES6 code and then run it through Babel for transpilation.

let rollupTs = rollupTypescript(require('./tsconfig.json').compilerOptions);

rollup({
    entry: "src/client/main.ts",
    plugins: [
        rollupTs,
        less({insert: true}),
        resolve({module: true, jsnext: true, main: true}),
        babel({
            presets: [
                [es2015, { modules: false } ]
            ],
            plugins: ["external-helpers"],
            exclude: "node_modules/**"})
    ],
    dest: "bundle.js",
    format: "iife"
})

However, as mentioned in the accepted answer, adding the es5 transpiled shim to the typescript generated code resolves the compatibility issues without affecting the output of Babel compilation. This solution was accepted due to its simplicity as a quick fix, even though the reason behind its effectiveness is not fully understood.

Answer 4

The problem arose from the fact that Typescript's ES5 class implementation is not compatible with the custom-elements-v1 shim. To resolve this issue, one can configure TypeScript to produce ES6 code and then run it through Babel for transpilation.

let rollupTs = rollupTypescript(require('./tsconfig.json').compilerOptions);

rollup({
    entry: "src/client/main.ts",
    plugins: [
        rollupTs,
        less({insert: true}),
        resolve({module: true, jsnext: true, main: true}),
        babel({
            presets: [
                [es2015, { modules: false } ]
            ],
            plugins: ["external-helpers"],
            exclude: "node_modules/**"})
    ],
    dest: "bundle.js",
    format: "iife"
})

However, as mentioned in the accepted answer, adding the es5 transpiled shim to the typescript generated code resolves the compatibility issues without affecting the output of Babel compilation. This solution was accepted due to its simplicity as a quick fix, even though the reason behind its effectiveness is not fully understood.

Issues with converting Typescript to ECMAScript 5 causing errors with Custom Elements v1 in IE11

UPDATE

Answer №1

Answer №2

Similar questions

Methods for defining a variable in React with Typescript without encountering the "Index signature is missing in type" issue

Ways to incorporate Bootstrap components into an Angular application without relying on external modules

Changing a field in a Firestore document to a boolean results in the type being converted to a

Error in Typescript: Function expects two different types as parameters, but one of the types does not have the specified property

Expanding index signature in an interface

How to format a date in ngModel using Angular 9 and above

Converting JSON responses from Observables to Arrays of objects in Angular

Is there a way to access my JavaScript library from Angular?

Guide for validating three forms with a single button click in Angular 6 using TypeScript (TS)

Issue - firestore has not been defined (Occurs strictly after the use of "then")

Utilize ngx-translate in Ionic 2 for translating menu items

Using TypeScript and Node.js with Express; I encountered an issue where it was not possible to set a class property of a controller using

Exploring the concept of nested arrays in Angular 2 using Typescript

Angular 4+ directive allowing interaction with the NgModel of a component

Troubleshooting problem with TypeScript and finding/filtering operations

Varieties of data classifications for the information obtained from supabase

Pause the execution at specific points within Typescript files by utilizing breakpoints when debugging with an attached debugger in VsCode

Using Angular 4's ngComponentOutlet to showcase ContentChildren that are dynamically changing

Inversify is a proven method for effectively injecting dependencies into a multitude of domain classes

How can I extract fields from a response using Axios?