Lit-html: IE 11 support

[LarsDenBakker]

I'd really like to start using lit-html. I don't mind it being rough around the edges, and breaking changes coming in the future, but IE11 support is unfortunately a deal breaker for my company.

I'd like to contribute, but I see there have already been a few attempts at becoming IE11 compatible. Are we close to a solution? Is there an overview of the remaining issues?

[bgotink]

I'm not sure the list is complete, but:

• There's an issue with the cloning process (see #201 and proposed fix #202)
• There's an issue with <tr>, <th> or <td> elements as root element in the template because of an issue in the template polyfill (see webcomponents/template#3)
• The tests for lit-extended and some directives don't import the necessary polyfills for IE yet, so the tests fail (see pull request #211)

EDIT: added link to pull request

[justinfagnani]

With #202 and #211 we're really close.

I think we might be able to fix the table problem because we're in control of generating the template contents - unlike the template polyfill we get to do things before the parser.

Before that I would be ok with skipping the table tests on IE and making sure we get tests passing to lock in our progress and make sure we don't regress.

[LarsDenBakker]

Is there anything that can be done here to help out?

[smalluban]

There is yet another bug - it is not possible to set style attribute. IE11 prevents setting style attribute, which is not proper CSS text (list of CSS properties) and clears attribute placeholder, so template does not know that there was any expression.

const template = value => html`<div style="{value}">Sample text</div>`;
render(template('color: red'), ...);

Above example in IE11 produces black text.

The second thing is npm package. It is not properly distributed. The compiled version of the project contains code, which is not supported in IE11, for example, arrow functions.

[madeleineostoja]

@smalluban just re npm package, pretty sure it's only shipped as an ES module, the assumption being that you'd bundle and transpile it youself for legacy browsers

[smalluban]

@seaneking I think it is not a good idea. module or jsnext:main should be used for esm version of the library. Parcel and common Webpack configuration of babel usually omits node_modules and does not transpile external packages. With current solution, users have to change this only for one dependency.

[madeleineostoja]

Yep agree, but remember lit-html is still pre-release. Imagine the team will include UMD bundles alongside ES modules for 1.0. Because yeah as you say, it's almost universal to exclude node_modules from transpilation.

[motss]

Is this resolved?

[QuackMartins]

I am using it on IE11 with no problems

[smalluban]

The problem with style attribute can be solved only in one and unfortunately also dirty way. Attribute has to prefixed (or changed in another way) before template element is initialised, and after that the prefix should be removed and expression should be set to style attribute.

Few days ago I released 1.0 version of my library for creating web components in functional way. It's template engine is inspired by lit-html, but implementation is different. However, I could solve all IE11 problems, and library's tests pass in IE11.

Here you have place where the problem with style attribute is solved: https://github.com/hybridsjs/hybrids/blob/9a2b5c2b98d1978bda5f15dedf3d860765f4710a/src/html/template.js#L221

[justinfagnani]

Aside from some specific issues like style attribute, this issue is fixed and we're running all tests on IE11.

[bashmish]

@justinfagnani shall we remove this from this know issues https://github.com/Polymer/lit-element#known-issues ?

[jpierson]

I think I may be running into what @smalluban described above as I'm seeing lambda expressions in bundled .js file in IE11 which appear to be related to lit-html. Normally things are running through webpack but perhaps there is something we've overlooked with regard to how this library is either transpiled or not in our bundling process.

[LarsDenBakker]

Lit html is shipped uncompiled, as it should not make assumptions about the app's runtime environment. Webpack does not transpile node_modules by default so probably thats where it goes wrong.

[jpierson]

@LarsDenBakker, yeah I was able to get past that error after a bit of digging using the following webpack customization suggested by @raziza.

            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules\/(?!(lit-html))/,
                    use: {
                        loader: "babel-loader"
                    }
                },
            ]

https://github.com/babel/babel-loader/issues/171#issuecomment-322394230

Now however on my page where I'm using lit-html I'm seeing the following error which looks like IE11 support is still trying to use template features which are unavailable in IE11 from what I understand. Do I need some type of polyfill?

SCRIPT5022: NotSupportedError

        var walker = document.createTreeWalker(content, 133 /* NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT |
                                                            NodeFilter.SHOW_TEXT */, null, false);

[jpierson]

Oh this looks related to #339.

[jpierson]

Importing @webcomponents/template seems to have gotten me further but now I'm seeing an issue with this section of code. I'm unsure if this is related to the imported template definition or something else yet but the line throw _iteratorError; in the snippet below where it's failing for me right now when my template is rendered.

        try {
            if (!_iteratorNormalCompletion && _iterator.return) {
                _iterator.return();
            }
        } finally {
            if (_didIteratorError) {
                throw _iteratorError;
            }
        }

[jpierson]

This last error I'm getting appears related to https://github.com/Polymer/lit-html/pull/229#issuecomment-356448243.