BUg: IE11 - Error when using CSS Variable inside the :host pseudo-selector.

[pr3tori4n]

Stencil version:

 @stencil/core@1.8.1

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: Global styles exist that use the :host selector and defines CSS variable key:value pairs within that selector. IE11 is throwing a DOM Exception Error.

Expected behavior: The CSS variables are properly polyfilled for IE11 in the global styles. No errors are seen when CSS variables are used in the :host: selector in IE11.

Steps to reproduce:

• Clone the Stencil-components-starter repo.
• Upgrade Stencil to v1.8.1
• install @stencil/sass
• update the stencil config to use the sass plugin.
• Either add a global stylesheet linked to index.html or a style block to the index.html page, and add a :host selector that contains a css variable.

Related code:

:host {
  --css-var: #000000;
}

Other information: Note: This is only happening in the global styles. The component-specific CSS is being parsed or transpiled properly. Note: using @stencil/sass not plain CSS Note: IE11 doesn't support, but ignores without errors the above syntax on its own. It's only when introducing the built component javascript file that this error begins to appear.

[kensodemann]

Note: using @stencil/sass not plain CSS

This only happens when using SASS and not when using plain CSS?

[pr3tori4n]

I'm not sure. Our project is using sass and that may play a part but it could also happen with vanilla CSS.

[kensodemann]

OK, thx for the clarification.

[adamdbradley]

Are you using the globalStyle config in the stencil config? https://stenciljs.com/docs/config#globalstyle

I'm not able to replicate this error. I did however fix a bug when ie11 is used but the es5 flag isn't during development (https://github.com/ionic-team/stencil/commit/df669c8d434e1c0fd75f037efb842b9e1d7015f7) which might be the error you posted.

As for using :host, you cannot use it in just a <style> tag within index, it must be within a component file, and any sass must be in a globalStyle css file so that stencil can compile it.

[pr3tori4n]

Are you using the globalStyle config in the stencil config?

Yes. globalStyle: "src/assets/styles/includes.scss",. This is where the :host selector resides.

As for using :host, you cannot use it in just a