Lit-html: Example of IE11 Compatible App

[BrianDGLS]

Hi,

I have set up a project to use lit-html. It's working perfectly apart from on IE11.

I'm getting syntax errors as lit-html is not bundled as es5 code. I am using the es5 adapter and webcomponent polyfills and can verify that the webcomponents without lit-html work.

Is there an example of a project that works using IE11? or can you explain the set up required for it to work with IE11.

Unfortunately IE11 support is a deal breaker for this project.

Thank you.

[mzeiher]

Hi, you need to set-up a build chain that bundles and also compiles your external dependencies to ES5. Furthermore you'll need to add some transforms and Polyfills. The best setup would be using either webpack or rollup together with @babel/preset-env. If you use Promises and async await you'll have to add a Promise polyfill and @babel/transform-runtime to the mix.

Here is a small sample using webpack from the typescript project: https://github.com/Microsoft/TypeScript-Babel-Starter

[marovargovcik]

Hey, when I was playing with lit-html (0.13 at that time) I found out that I need to include @webcomponents/templates polyfill in order to get IE11 working.

Here is my little testing playground where I am using webpack + lit-html and it's working in IE11.
https://github.com/marovargovcik/lit-webpack-playground

There is no README but you can set it up with these steps:

1. Clone the repository
2. Run npm install
   3a. Run npm run dev if you want to do any development with webpack automatically updating bundle as you make changes in index.js file.
   3b. Run npm run build if you want to bundle your code (see build directory)
3. You can start development server from build folder with npx http-server

[BrianDGLS]

@mzeiher @marovargovcik

Thanks both.

For future reference to others that face this problem. I added a separate webpack config for IE11.
It included the following code:

const path = require('path');

module.exports = {
  entry: [
    '@babel/polyfill',
    '@webcomponents/template',
    path.join(__dirname, 'examples', 'main.ts'),
  ],
  output: {
    filename: 'bundle-ie.min.js',
    path: path.join(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          configFile: 'tsconfig-ie.json'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(lit-html))/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    ie: 11,
                  },
                },
              ],
            ],
            plugins: [['@babel/plugin-transform-runtime']],
          },
        },
      },
    ],
  },
};

As well as this I added the following script to the head of my html, to load the ie polyfillls.
This either loads the IE scripts or the standard bundle depending on the browser.

    <script type="text/javascript">
      if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
        document.write('<script src="//cdn.polyfill.io/v2/polyfill.min.js"><\/script>');
        document.write('<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"><\/script>');
        document.write('<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"><\/script>');
        document.write('<script src="../dist/bundle-ie.min.js"><\/script>');
      } else {
        document.write('<script src="../dist/bundle.min.js"><\/script>');
      }
    </script>

[marovargovcik]

Hey @BrianDGLS

I am glad you managed to solve this issue.

One small note:
Do you really need to load polyfills from polyfill.io when you are already including @babel/polyfill in Webpack setup?

lit-html should flag this issue as improvement for docs and add small demos working in IE11 (Stackblitz or other online environment) with list of needed polyfills. AFAIK lit-html is not transpiled to ES5 by default so we need to do that by ourselves.

Getting custom elements to work with lit-html is out of scope but I think it should be documented anyway.

[thepassle]

You can also check out the open-wc webpack build configuration: https://open-wc.org/building/building-webpack.html

We output es2015 for modern browsers, and es5 for IE11.

As well as our polyfills loader: https://open-wc.org/building/polyfills-loader.html

[Naveen07]

Hey, when I was playing with lit-html (0.13 at that time) I found out that I need to include @webcomponents/templates polyfill in order to get IE11 working.

Here is my little testing playground where I am using webpack + lit-html and it's working in IE11.
https://github.com/marovargovcik/lit-webpack-playground

There is no README but you can set it up with these steps:

1. Clone the repository
2. Run npm install
   3a. Run npm run dev if you want to do any development with webpack automatically updating bundle as you make changes in index.js file.
   3b. Run npm run build if you want to bundle your code (see build directory)
3. You can start development server from build folder with npx http-server

Looks like lit-webpack-playground is moved. Can you provide the new location.

[wkeese]

I got something running at https://github.com/wkeese/lit-html-test.