fix(template-compiler): disable static content optimization for iframes (#4678)

Author: nolanlawson

packages/@lwc/integration-karma/test/rendering/iframe/index.spec.js

@@ -0,0 +1,17 @@
+import { createElement } from 'lwc';
+import Component from 'x/component';
+
+let spy;
+
+beforeEach(() => {
+    spy = spyOn(Element.prototype, 'setAttribute');
+});
+
+it('renders iframes correctly - W-17015807', async () => {
+    const elm = createElement('x-component', { is: Component });
+    document.body.appendChild(elm);
+
+    await Promise.resolve();
+
+    expect(spy).toHaveBeenCalledOnceWith('src', 'about:blank');
+});

packages/@lwc/integration-karma/test/rendering/iframe/x/component/component.html

@@ -0,0 +1,3 @@
+<template>
+    <iframe src="about:blank"></iframe>
+</template>

packages/@lwc/integration-karma/test/rendering/iframe/x/component/component.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js

@@ -1,10 +1,15 @@
 import _implicitStylesheets from "./attribute-allow.css";
 import _implicitScopedStylesheets from "./attribute-allow.scoped.css?scoped=true";
-import { freezeTemplate, parseFragment, registerTemplate } from "lwc";
-const $fragment1 = parseFragment`<iframe allow="geolocation https://google-developers.appspot.com"${3}></iframe>`;
+import { freezeTemplate, registerTemplate } from "lwc";
+const stc0 = {
+  attrs: {
+    allow: "geolocation https://google-developers.appspot.com",
+  },
+  key: 0,
+};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 1)];
+  const { h: api_element } = $api;
+  return [api_element("iframe", stc0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);

packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js

@@ -2,16 +2,20 @@ import _implicitStylesheets from "./no-escaping-tags.css";
 import _implicitScopedStylesheets from "./no-escaping-tags.scoped.css?scoped=true";
 import { freezeTemplate, parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<xmp${3}>&lt;/xmp&gt;Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></xmp>`;
-const $fragment2 = parseFragment`<iframe${3}>Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></iframe>`;
-const $fragment3 = parseFragment`<noembed${3}>Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></noembed>`;
-const $fragment4 = parseFragment`<noframes${3}><p>It seems your browser does not support frames or is configured to not allow them.</p></noframes>`;
+const $fragment2 = parseFragment`<noembed${3}>Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></noembed>`;
+const $fragment3 = parseFragment`<noframes${3}><p>It seems your browser does not support frames or is configured to not allow them.</p></noframes>`;
+const stc0 = {
+  key: 2,
+};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { st: api_static_fragment } = $api;
+  const { st: api_static_fragment, t: api_text, h: api_element } = $api;
   return [
     api_static_fragment($fragment1, 1),
-    api_static_fragment($fragment2, 3),
-    api_static_fragment($fragment3, 5),
-    api_static_fragment($fragment4, 7),
+    api_element("iframe", stc0, [
+      api_text("Hello <div>world</div> <div>foo</div>"),
+    ]),
+    api_static_fragment($fragment2, 4),
+    api_static_fragment($fragment3, 6),
   ];
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/template-compiler/src/codegen/static-element.ts

@@ -61,6 +61,9 @@ function isStaticNode(node: BaseElement, apiVersion: APIVersion): boolean {
     // it is an element
     result &&= isElement(node);
 
+    // See W-17015807
+    result &&= node.name !== 'iframe';
+
     // all attrs are static-safe
     // the criteria to determine safety can be found in computeAttrValue
     result &&= attributes.every(({ name }) => {