Browser compatibility

EDGE

• Global styles cannot include shadow-doms references

• Global variables

According to Stencil’s doc, global variables can only be declared using :root selector. (https://stenciljs.com/docs/styling#ie-support) If already declared with :host selector, it is necessary to duplicate them using also the :root one. Using the expression :root, :host {...style…} will not produce any results.

• Do not use too much compelling css selectors

In browsers which do not support Shadow DOM, Stencil fall back to scoped CSS. For this reason the browser could possibly create a div to wrap the web components, in order to apply the css style. Due to this behaviour, direct child selector for example, could not work properly. Said that, it is necessary to keep in mind that the use of compelling css selectors inside an app that uses web components, may not have the desired effect.

• Conditional slots are not rendered correctly in IE11/Edge

Despite the application of the polyfills suggested by the documentation (https://stenciljs.com/docs/config-extras#slotchildnodesfix)
(https://stenciljs.com/docs/config-extras#appendchildslotfix) (https://stenciljs.com/docs/config-extras#clonenodefix) a slot won’t be shown if its rendering depends on a condition.

{this.active && (<slot name="content"/>)}

OR

{this.active ? <slot /> : null}

A workaround has been applied in this case, putting the slot into a div and using css classes to handle the display of the element.

<div class=class={this.active ? 'visible' : 'hidden'}><slot name="content"/></div>

There is also an open issue on Stencil’s GitHub: https://github.com/ionic-team/stencil/issues/2257

• Return undefined

If your app has a component that should conditionally return something, avoid as much as possible the use of the return keyword without a value just to exit from a function. Edge does not properly handle it and there could be unpredictable behaviours.

IE 11

Not Supported