Stencil: Custom Properties do not appear to work at all on IE11

[patricksevat]

Stencil version:

 @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:
On a component -WITHOUT shadow DOM- custom CSS properties seem to be broken completely. Created a demo repo: https://github.com/patricksevat/stencil-one-IE11

In Chrome the background is set correctly to pink, in IE11 it is not.

Expected behavior:
Would expect IE11 to pick up CSS custom properties

Steps to reproduce:
https://github.com/patricksevat/stencil-one-IE11

Related code:

Other information:
Possibly related to #1615.

[stanley85]

We are also having issues with IE not having colors. The css-vars polyfill for IE seems missing in the build, or is not picked up correctly during include on IE (11.0.9600.19356). @stencil/[email protected]

[stanley85]

We are using shadow-dom false on the entry component, to use :root selector in the style includes. Declaring custom css vars in a seperate globalStyle file like mentioned in the docs, did nothing different. All calls to css properties via var(--x-y) are not resolved. Declarations look invalid too. The value is part of the property key like "--x-y:blue" and the value is empty. Idk if this is a trick done to IE to store key/value pairs... how are you guys testing IE during development? Some seem to have no issues with IE at all.

[stanley85]

Thanks to your description we are finally having colors in IE by switching to shadow-dom true. We had false cuz our font-face declarations only work globally when exported to a none shadow environment. We now use the globalStyle to declare the font-face. This globalStyle needs a manual include correct?

The issue described is confirmed by our workaround. As soon as shadow-dom is false IE fails on Css-Vars. Thank you @patricksevat we are finally save on IE.

[patricksevat]

@manucorporat could you share if this has any priority for the stencil team? I'd like to communicate to the rest of my team if we are going to wait for a fix and then upgrade to stencil one or we stay at 0.18.x for now (until we are ready to turn on shadow-dom).

[loudmouth]

Was also curious about the status of this (I've also been tracking this discussion in #1200 for a while now)

[bbellmyers]

We are stuck on 0.18.1 until this gets fixed, as we require shadow:false.

The complication for us is that the es6-collections polyfill conflicts with the core-js polyfill used by Storybook, so our components are not capable of being tested in Storybook in IE11. (#1638)

[bbellmyers]

See attached, with IE11. Slight modification to stencil component starter, running @stencil/core 1.0.7. Custom property does not apply.

[manucorporat]

Should be fixed by: https://github.com/ionic-team/stencil/commit/56c5f68b7b998c0802f5fb82997d1222c85f4910