fix(css-shim): replaced innerHTML with textContent (#1892)

ionic-team · Sep 26, 2019 · 613c797 · 613c797
1 parent b3ed8de
commit 613c797
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 23 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ log.txt
 
 .idea/
 .vscode/
+.history/
 .sass-cache/
 .versions/
 node_modules/

diff --git a/src/client/polyfills/css-shim/custom-style.ts b/src/client/polyfills/css-shim/custom-style.ts
@@ -51,12 +51,12 @@ export class CustomStyle {
 
     if (!baseScope.usesCssVars) {
       // This component does not use (read) css variables
-      styleEl.innerHTML = cssText;
+      styleEl.textContent = cssText;
 
     } else if (isScoped) {
       // This component is dynamic: uses css var and is scoped
       (styleEl as any)['s-sc'] = cssScopeId = `${baseScope.scopeId}-${this.count}`;
-      styleEl.innerHTML = '/*needs update*/';
+      styleEl.textContent = '/*needs update*/';
       this.hostStyleMap.set(hostEl, styleEl);
       this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
       this.count++;
@@ -65,7 +65,7 @@ export class CustomStyle {
       // This component uses css vars, but it's no-encapsulation (global static)
       baseScope.styleEl = styleEl;
       if (!baseScope.usesCssVars) {
-        styleEl.innerHTML = executeTemplate(baseScope.template, {});
+        styleEl.textContent = executeTemplate(baseScope.template, {});
       }
       this.globalScopes.push(baseScope);
       this.updateGlobal();
@@ -90,7 +90,7 @@ export class CustomStyle {
       if (styleEl) {
         const selectors = getActiveSelectors(hostEl, this.hostScopeMap, this.globalScopes);
         const props = resolveValues(selectors);
-        styleEl.innerHTML = executeTemplate(scope.template, props);
+        styleEl.textContent = executeTemplate(scope.template, props);
       }
     }
   }

diff --git a/src/client/polyfills/css-shim/load-link-styles.ts b/src/client/polyfills/css-shim/load-link-styles.ts
@@ -32,7 +32,7 @@ export function addGlobalLink(doc: Document, globalScopes: CSSScope[], linkElm:
       }
       const styleEl = doc.createElement('style');
       styleEl.setAttribute('data-styles', '');
-      styleEl.innerHTML = text;
+      styleEl.textContent = text;
 
       addGlobalStyle(globalScopes, styleEl);
       linkElm.parentNode.insertBefore(styleEl, linkElm);

diff --git a/src/client/polyfills/css-shim/scope.ts b/src/client/polyfills/css-shim/scope.ts
@@ -17,7 +17,7 @@ export function parseCSS(original: string): CSSScope {
 }
 
 export function addGlobalStyle(globalScopes: CSSScope[], styleEl: HTMLStyleElement) {
-  const css = parseCSS(styleEl.innerHTML);
+  const css = parseCSS(styleEl.textContent);
   css.styleEl = styleEl;
   globalScopes.push(css);
 }
@@ -27,7 +27,7 @@ export function updateGlobalScopes(scopes: CSSScope[]) {
   const props = resolveValues(selectors);
   scopes.forEach(scope => {
     if (scope.usesCssVars) {
-      scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+      scope.styleEl.textContent = executeTemplate(scope.template, props);
     }
   });
 }

diff --git a/src/client/polyfills/css-shim/test/css-shim.spec.ts b/src/client/polyfills/css-shim/test/css-shim.spec.ts
@@ -21,7 +21,7 @@ describe('css-shim', () => {
     `);
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         p {
           color: red;
@@ -47,7 +47,7 @@ describe('css-shim', () => {
     `);
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         p {
           color: red;
@@ -70,7 +70,7 @@ describe('css-shim', () => {
     `);
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html {
           background: yellow;
@@ -94,7 +94,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html {
           color: green;
@@ -115,7 +115,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html {
           background-image: url('data:image/png;base64,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');
@@ -138,7 +138,7 @@ describe('css-shim', () => {
     `);
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html {
           background: yellow;
@@ -162,7 +162,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html {
           background-image: url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
@@ -182,7 +182,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
 
       css(`
         html {
@@ -204,7 +204,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
 
       css(`
         html {
@@ -229,7 +229,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html{}
         p {
@@ -252,7 +252,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html {
           color: red;
@@ -275,7 +275,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html{}
         .transform {
@@ -301,7 +301,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html{}
         @keyframes animation {
@@ -328,7 +328,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html{}
         @media only screen {
@@ -360,7 +360,7 @@ describe('css-shim', () => {
 
     await customStyle.addGlobalStyle(styleElm);
 
-    expect(css(styleElm.innerHTML)).toBe(
+    expect(css(styleElm.textContent)).toBe(
       css(`
         html{}
         div {
@@ -376,7 +376,7 @@ describe('css-shim', () => {
 
   function style(text: string) {
     const elm = document.createElement('style');
-    elm.innerHTML = text;
+    elm.textContent = text;
     return elm;
   }