search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.41k stars 777 forks source link

Stencil 1.2.4 fails if page contains SVG with <style> tag in IE11 #1867

Closed Tims101 closed 2 years ago

Tims101 commented 4 years ago

Stencil version:

 @stencil/core@1.2.4

also happens for @stencil/core@0.18.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:

If a page in IE11 contains SVG with Style tag inside, web components are not being hydrated.

Expected behavior:

If a page in IE11 contains SVG with Style tag inside, web components should work fine.

Steps to reproduce:

Add SVG with style attribute to a page with a web component and open it in IE11.

Other information:

In CSS-Shim polyfill all style tags on a page are selected and processed to replace with variables and etc. In IE11 innerHTML for style tag in SVG is always undefined, so CSS Shim is failing.

sj0x55 commented 4 years ago

We also found the problem with style tag inside of svg tag. On IE11 innerHTML property is not available for that style element.

When is trying to be used innerHTML (see addGlobalStyle() function), we got undefined instead of String type. So for example clean() function thrown the error as the function expects a string value:

function clean(cssText) {
    return cssText.replace(RX.comments, '').replace(RX.port, '');
}

This issue affected all versions of Stencil.

sj0x55 commented 4 years ago

Hi @Tims101, I opened a PR which should fix this problem: https://github.com/ionic-team/stencil/pull/1892