Stencil: IE 11 Polyfill Support

[tomchinery]

Stencil version:

@stencil/[email protected]
@stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When testing a component library on LambdaTest (a Selenium grid for testing) on IE 11 styles do not display for web components.

Expected behavior:

As per the documentation IE 11 should be supported via polyfills.

Steps to reproduce:

Our build is doing a Stencil build with the '--prerender' flag. Have tried it both with and without prerendering.

You'll need a built Stencil project served up via a webserver and virtual machine running IE 11. Either that or a LambdaTest account via their Screenshot testing.

Related code:
N/A

Other information:

Tested on both v0.18.1 and v1.0.0-alpha.26.

Looking for someone to replicate and verify that this is an issue.

[stanley85]

We also encounter missing polyfills for IE11, we tried dev mode with --es5 flag and the prod build. Our project is based on the component starter.
@stencil/[email protected] @stencil/[email protected]
We add our base css-vars to the :root of the page, then every component declares own vars using only the base-vars as reference. One can override a single component var later or override the default root to apply theming from lazy external css.

inside base-color definition file
:root { --component-color-main: teal; --component-color-secondary: orange; }
inside component definition file
:host { --component-host-element-bg-color: var(--component-color-main); }
inside external theme file
:root { --component-color-main: cyan; } component-host-element { --component-host-element-bg-color: var(--component-color-secondary); }
this way all color definitions can be changed with external theming, that can be loaded on demand. Works like it should with native css-var support. Maybe this is not the best practise?

[stanley85]

Still an issue with @stencil/[email protected]

[stanley85]

I tried a newly component starter via npm init, got @stencil/[email protected] with the "one" flag.

• index.html needed a small fix to adapt the new way of include
• i followed the docs and created src/global/variables.css
• added globalStyle: 'src/global/variables.css' to stencil.config.ts

Styles from the variables.css file seem to be ommited and are not exported. If the main :root decorator is there with the declarations all colors are missing. If I place the :root declarations inside the index demo I have colors in FF and Chrome. IE has none. CSS-Vars like described in the docs is not working or just the polyfills for IE are missing in the export. I have tested with "npm start --es5" to have a look at IE.

[stanley85]

Also described in issue #1466, issue #1200

[stanley85]

With @stencil/[email protected] additionally all other polyfills for IE are missing too, but only in the --prod build. Testet on dev server with --es5 works. Testet on dev server with --prod fails.

[manucorporat]

Fixed https://github.com/ionic-team/stencil/commit/103a9bae1d147551c148fb8a628f7ff618b24e8b

[stanley85]

We are still having issues with IE not loading polyfills for css-vars within ES5 or prod builds. Is there something left to configure within the tsconfig.json? We are currently on version 1.0.2.

[justusromijn]

What I found out after digging in the css shimming of Stencil, is that any stylesheet link that is encountered on the page is, does get changed into an inline style tag, but it is not actually shimmed (so the css-vars are still in place). We had some problems detecting this problem, because if you have a non-shadow component in your page that does not has scoped styles, it will trigger a path in the code that will trigger an update of the global styles so then it actually does get shimmed. I'm looking into a usable solution for us now, as we rely on Stencil to shim all of our css.

[justusromijn]

One of our external stylesheets is loaded using a regular link tag, and it goes through this function called addGlobalLink which translates it into a style tag. However, in this flow it yields a template that has pointers to all css-var usage and stuff (via the addGlobalStyle function), but the template is never used until updateGlobalScopes is called. There is a watcher running that looks if any changes are in the head of the document, but it ignores everything with certain attributes so it never kicks in the update.

It sometimes still works, because if you have a component on the page that needs a host style with css-vars but without encapsulation, it will perform an updateGlobal which triggers the required update.

function addGlobalLink(doc, globalScopes, linkElm) {
    var url = linkElm.href;
    return fetch(url).then(function (rsp) { return rsp.text(); }).then(function (text) {
        if (hasCssVariables(text) && linkElm.parentNode) {
            if (hasRelativeUrls(text)) {
                text = fixRelativeUrls(text, url);
            }
            var styleEl = doc.createElement('style');
            styleEl.setAttribute('data-styles', '');
            styleEl.textContent = text;
            addGlobalStyle(globalScopes, styleEl);
            linkElm.parentNode.insertBefore(styleEl, linkElm);
            linkElm.remove();
            // if I would insert the rule below, it works fine: 
            // updateGlobalScopes(globalScopes);  
        }
    }).catch(function (err) {
        console.error(err);
    });
}