Stencil: IE11 and inconsistent functionality depending on how Stencil is loaded.

[cary-smith]

Stencil version:

 @stencil/[email protected]

...though I know it started sooner...

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:

This is specific to shadow: false elements that use CSS custom properties in styling.

When loaded via script tags in IE11

<script type="module" src="assets/my-element/my-element.esm.js"></script>
<script nomodule src="assets/my-element/my-element.js"></script>

IE11 behaves like the lumbering dead that it is: Slowly, but it eventually gets there and makes you feel gross... but it just won't die. All output includes the proper CSS property translations.

When loaded via the legacy script tag

<script src="assets/my-element.js"></script>

IE11 faceplants and no components are loaded. All errors are swallowed in the dark. If I run the debug in the console there are errors being thrown, but they are lost and mainly have to do with null values.

When loaded as part of the application code

import { applyPolyfills, defineCustomElements } from 'my-component';
applyPolyfills().then(() => {
    defineCustomElements(window);
});

For whatever reason custom properties are not translated for IE11 at all, but the components do load.

Expected behavior:

Components load and CSS custom properties are consistently translated for IE11 in all scenarios. (That or maybe you convince Microsoft to drop IE11 support so the web can flourish?).

Steps to reproduce:

1. Create a component
2. Consume that component in an Angular 8 application via import
3. Compile the Angular application for production
4. AOT-compiled output does not load the right information in IE11

Related code:

I truly apologize, but I have been unable to narrow the 'why-this-happens' yet. The dueling scenarios (script tag vs import) has me confused on what is not being applied when.

// insert any relevant code here

Other information:

I apologize for bringing IE11 issues here. Everything about Stencil is Amazing in _ANY_ other browser. When Microsoft finally pulls the plug on IE11 (or this Edgium thing works out) then maybe we can all stop burning time on the undead and build a better web. Till then... 🤷‍♂

[aaronclong]

I am having a similar issue, is there a way that stencil could make the polyfills optional?

It would let the developer then manage this issue on a per app basis.

[simondiep]

I'm running into the same issue where the applyPolyfills call breaks depending on when I make that call (before/after other polyfills).

[cary-smith]

@manucorporat - This still seems to be happening in 1.7.2. I understand that IE11 but I also feel like an ES5 build should not be providing CSS custom properties at all. Is this intended?

[suchaaver-chahal]

I tried it on 1.8.1, with no luck. Similar symptoms, if I load the component in a simple index.html, the scoped css works just fine. Loading the it through angular however makes the component load, but the custom properties don't work right. Seems like the angular app is somehow causing the custom properties to not be transformed into the right color at runtime, instead leaving it in the custom property syntax.

I can see

.incentives-dashboard-container.sc-incentives-dashboard{max-width:1170px;border-radius:3px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:var(--container-bg-color,#fff);height:100%}

If I change the var(--container-bg-color, #fff) to something like blue, things work fine in ie11.

[adamdbradley]

Thank you for opening the issue. This should be fixed in the 1.9.x prereleases. If it continues to be an issue, would you be able to provide a way to replicate this? Thanks