diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/comments-foreach/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/comments-foreach/expected.html
index b341051b89..9d16f6555a 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/comments-foreach/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/comments-foreach/expected.html
@@ -1,7 +1,6 @@
 <x-comments-foreach>
   <template shadowroot="open">
     <ul>
-      ‍
       <!-- color -->
       <li>
         red
@@ -14,7 +13,6 @@
       <li>
         yellow
       </li>
-      ‍
     </ul>
   </template>
 </x-comments-foreach>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-block/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-block/expected.html
index 61ebe4e9c2..1ec9440670 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-block/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-block/expected.html
@@ -1,7 +1,6 @@
 <x-for-each-block>
   <template shadowroot="open">
     <ul>
-      ‍
       <li>
         0 - paris
       </li>
@@ -11,7 +10,6 @@
       <li>
         2 - tokyo
       </li>
-      ‍
     </ul>
   </template>
 </x-for-each-block>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-child-nested/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-child-nested/expected.html
index 8967f76efb..dd38f3efa4 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-child-nested/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-child-nested/expected.html
@@ -1,12 +1,10 @@
 <x-for-each-child-nested>
   <template shadowroot="open">
     <ol>
-      ‍
       <li>
         europe
         <x-child>
           <template shadowroot="open">
-            ‍
             <li>
               0 - paris
             </li>
@@ -16,7 +14,6 @@
             <li>
               2 - rome
             </li>
-            ‍
           </template>
         </x-child>
       </li>
@@ -24,7 +21,6 @@
         asia
         <x-child>
           <template shadowroot="open">
-            ‍
             <li>
               0 - tokyo
             </li>
@@ -34,11 +30,9 @@
             <li>
               2 - singapore
             </li>
-            ‍
           </template>
         </x-child>
       </li>
-      ‍
     </ol>
   </template>
 </x-for-each-child-nested>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-nested/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-nested/expected.html
index 9c867c72d6..00d2a0f88f 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-nested/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/for-each-nested/expected.html
@@ -1,11 +1,9 @@
 <x-for-each-nested>
   <template shadowroot="open">
     <ol>
-      ‍
       <li>
         europe
         <ul>
-          ‍
           <li>
             paris
           </li>
@@ -15,13 +13,11 @@
           <li>
             rome
           </li>
-          ‍
         </ul>
       </li>
       <li>
         asia
         <ul>
-          ‍
           <li>
             tokyo
           </li>
@@ -31,10 +27,8 @@
           <li>
             singapore
           </li>
-          ‍
         </ul>
       </li>
-      ‍
     </ol>
   </template>
 </x-for-each-nested>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/getter-is-connected/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/getter-is-connected/expected.html
index b1c6e17a06..f5f70c1929 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/getter-is-connected/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/getter-is-connected/expected.html
@@ -1,7 +1,6 @@
 <x-getter-is-connected>
   <template shadowroot="open">
     <ul>
-      ‍
       <li>
         constructor: false
       </li>
@@ -11,7 +10,6 @@
       <li>
         render: true
       </li>
-      ‍
     </ul>
   </template>
 </x-getter-is-connected>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/iterator-block/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/iterator-block/expected.html
index f0c4daa8e4..0977c4253f 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/iterator-block/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/iterator-block/expected.html
@@ -1,7 +1,6 @@
 <x-iterator-block>
   <template shadowroot="open">
     <ul>
-      ‍
       <li>
         <div class="list-first">
         </div>
@@ -15,7 +14,6 @@
         <div class="list-last">
         </div>
       </li>
-      ‍
     </ul>
   </template>
 </x-iterator-block>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/lifecycle-hooks/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/lifecycle-hooks/expected.html
index f0124a134e..2dd0947950 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/lifecycle-hooks/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/lifecycle-hooks/expected.html
@@ -1,7 +1,6 @@
 <x-lifecycle-hooks>
   <template shadowroot="open">
     <ul>
-      ‍
       <li>
         constructor
       </li>
@@ -11,7 +10,6 @@
       <li>
         render
       </li>
-      ‍
     </ul>
   </template>
 </x-lifecycle-hooks>
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/config.spec.ts b/packages/@lwc/template-compiler/src/__tests__/config.spec.ts
index 2ce9d88c9a..0a4836c008 100644
--- a/packages/@lwc/template-compiler/src/__tests__/config.spec.ts
+++ b/packages/@lwc/template-compiler/src/__tests__/config.spec.ts
@@ -25,17 +25,17 @@ describe('customRendererConfig normalization', () => {
                 },
             })
         ).toMatchInlineSnapshot(`
-            Object {
-              "customRendererConfig": Object {
-                "directives": Array [],
-                "elements": Array [
-                  Object {
+            {
+              "customRendererConfig": {
+                "directives": [],
+                "elements": [
+                  {
                     "attributes": undefined,
                     "namespace": undefined,
                     "tagName": "div",
                   },
-                  Object {
-                    "attributes": Array [
+                  {
+                    "attributes": [
                       "style",
                     ],
                     "namespace": undefined,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/expected.js
index 75021ccdf3..ddea1efb49 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/expected.js
@@ -10,9 +10,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
     k: api_key,
     i: api_iterator,
-    fr: api_fragment,
+    f: api_flatten,
   } = $api;
-  return [
+  return api_flatten([
     api_custom_element("x-subject", _xSubject, {
       props: {
         htmlFor: api_scoped_id("foo"),
@@ -54,30 +54,27 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       key: 5,
     }),
-    api_fragment(
-      "it-fr8",
-      api_iterator($cmp.things, function (thing) {
-        return [
-          api_element(
-            "p",
-            {
-              attrs: {
-                id: api_scoped_id(thing.id),
-              },
-              key: api_key(6, thing.key),
-            },
-            [api_text("description text")]
-          ),
-          api_element("input", {
+    api_iterator($cmp.things, function (thing) {
+      return [
+        api_element(
+          "p",
+          {
             attrs: {
-              "aria-describedby": api_scoped_id(thing.id),
+              id: api_scoped_id(thing.id),
             },
-            key: api_key(7, thing.key),
-          }),
-        ];
-      })
-    ),
-  ];
+            key: api_key(6, thing.key),
+          },
+          [api_text("description text")]
+        ),
+        api_element("input", {
+          attrs: {
+            "aria-describedby": api_scoped_id(thing.id),
+          },
+          key: api_key(7, thing.key),
+        }),
+      ];
+    }),
+  ]);
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/svg-with-iteration/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/svg-with-iteration/expected.js
index aec7458f82..9e6bd4efdc 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/svg-with-iteration/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/svg-with-iteration/expected.js
@@ -4,30 +4,24 @@ const stc0 = {
   svg: true,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const {
-    k: api_key,
-    h: api_element,
-    i: api_iterator,
-    fr: api_fragment,
-  } = $api;
+  const { k: api_key, h: api_element, i: api_iterator } = $api;
   return [
-    api_element("svg", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.lines, function (line) {
-          return api_element("line", {
-            attrs: {
-              x1: line.x1,
-              y1: line.y1,
-              x2: line.x2,
-              y2: line.y2,
-            },
-            key: api_key(1, line.key),
-            svg: true,
-          });
-        })
-      ),
-    ]),
+    api_element(
+      "svg",
+      stc0,
+      api_iterator($cmp.lines, function (line) {
+        return api_element("line", {
+          attrs: {
+            x1: line.x1,
+            y1: line.y1,
+            x2: line.x2,
+            y2: line.y2,
+          },
+          key: api_key(1, line.key),
+          svg: true,
+        });
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-for-each/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-for-each/expected.js
index 26f7fa34d4..e5eadfe91b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-for-each/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-for-each/expected.js
@@ -10,26 +10,24 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("ul", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.colors, function (color) {
-          return [
-            api_comment(" color "),
-            api_element(
-              "li",
-              {
-                key: api_key(1, color),
-              },
-              [api_text(api_dynamic_text(color))]
-            ),
-          ];
-        })
-      ),
-    ]),
+    api_element(
+      "ul",
+      stc0,
+      api_iterator($cmp.colors, function (color) {
+        return [
+          api_comment(" color "),
+          api_element(
+            "li",
+            {
+              key: api_key(1, color),
+            },
+            [api_text(api_dynamic_text(color))]
+          ),
+        ];
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/children/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/children/expected.js
index 6517403518..c2004a4ab3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/children/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/children/expected.js
@@ -12,72 +12,76 @@ const stc1 = {
   classMap: {
     s2: true,
   },
-  key: 4,
+  key: 3,
 };
-const stc2 = {
+const stc2 = [];
+const stc3 = {
   classMap: {
     s3: true,
   },
-  key: 8,
+  key: 6,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     t: api_text,
     i: api_iterator,
-    fr: api_fragment,
     st: api_static_fragment,
+    f: api_flatten,
     h: api_element,
     k: api_key,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_text("Other Child"),
-      api_fragment(
-        "it-fr1",
+    api_element(
+      "section",
+      stc0,
+      api_flatten([
+        api_text("Other Child"),
         api_iterator($cmp.items, function (item) {
           return api_text("X");
-        })
-      ),
-      api_static_fragment($fragment1(), 3),
-    ]),
-    api_element("section", stc1, [
-      api_text("Other Child"),
-      $cmp.isTrue
-        ? api_fragment(
-            "it-fr7",
-            api_iterator($cmp.items, function (item) {
+        }),
+        api_static_fragment($fragment1(), 2),
+      ])
+    ),
+    api_element(
+      "section",
+      stc1,
+      api_flatten([
+        api_text("Other Child"),
+        $cmp.isTrue
+          ? api_iterator($cmp.items, function (item) {
               return [
                 api_element(
                   "p",
                   {
-                    key: api_key(5, item.id),
+                    key: api_key(4, item.id),
                   },
                   [api_text("X1")]
                 ),
                 api_element(
                   "p",
                   {
-                    key: api_key(6, item.id),
+                    key: api_key(5, item.id),
                   },
                   [api_text("X2")]
                 ),
               ];
             })
-          )
-        : null,
-    ]),
-    api_element("section", stc2, [
-      api_static_fragment($fragment2(), 10),
-      api_fragment(
-        "it-fr12",
+          : stc2,
+      ])
+    ),
+    api_element(
+      "section",
+      stc3,
+      api_flatten([
+        api_static_fragment($fragment2(), 8),
         api_iterator($cmp.items, function (item) {
           return api_element("div", {
-            key: api_key(11, item.id),
+            key: api_key(9, item.id),
           });
-        })
-      ),
-    ]),
-    api_static_fragment($fragment3(), 14),
+        }),
+      ])
+    ),
+    api_static_fragment($fragment3(), 11),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/foreach-with-if/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/foreach-with-if/expected.js
index 78b724467a..b3373bfb3f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/foreach-with-if/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/foreach-with-if/expected.js
@@ -9,25 +9,23 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (item) {
-          return $cmp.showItems
-            ? api_element(
-                "p",
-                {
-                  key: api_key(1, item.id),
-                },
-                [api_text("1" + api_dynamic_text(item))]
-              )
-            : null;
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return $cmp.showItems
+          ? api_element(
+              "p",
+              {
+                key: api_key(1, item.id),
+              },
+              [api_text("1" + api_dynamic_text(item))]
+            )
+          : null;
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-index/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-index/expected.js
index daa00b9740..c298dd47d9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-index/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-index/expected.js
@@ -9,23 +9,21 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("ul", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (item, index) {
-          return api_element(
-            "li",
-            {
-              key: api_key(1, item.id),
-            },
-            [api_text(api_dynamic_text(index) + " - " + api_dynamic_text(item))]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "ul",
+      stc0,
+      api_iterator($cmp.items, function (item, index) {
+        return api_element(
+          "li",
+          {
+            key: api_key(1, item.id),
+          },
+          [api_text(api_dynamic_text(index) + " - " + api_dynamic_text(item))]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-item/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-item/expected.js
index 0443ce80c8..d1b73d6556 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-item/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-item/expected.js
@@ -15,24 +15,22 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr3",
-        api_iterator($cmp.items, function (item) {
-          return api_element(
-            "div",
-            {
-              classMap: stc1,
-              key: api_key(1, item.id),
-            },
-            [api_element("p", stc2, [api_text(api_dynamic_text(item))])]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_element(
+          "div",
+          {
+            classMap: stc1,
+            key: api_key(1, item.id),
+          },
+          [api_element("p", stc2, [api_text(api_dynamic_text(item))])]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-outside-scope-reference/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-outside-scope-reference/expected.js
index dc5b75be97..29114f6a03 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-outside-scope-reference/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-outside-scope-reference/expected.js
@@ -18,27 +18,25 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr4",
-        api_iterator($cmp.items, function (item) {
-          return api_element(
-            "div",
-            {
-              classMap: stc1,
-              key: api_key(1, item.id),
-            },
-            [
-              api_element("p", stc2, [api_text(api_dynamic_text(item))]),
-              api_element("p", stc3, [api_text(api_dynamic_text($cmp.item2))]),
-            ]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_element(
+          "div",
+          {
+            classMap: stc1,
+            key: api_key(1, item.id),
+          },
+          [
+            api_element("p", stc2, [api_text(api_dynamic_text(item))]),
+            api_element("p", stc3, [api_text(api_dynamic_text($cmp.item2))]),
+          ]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-refence-item/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-refence-item/expected.js
index f2362fe202..9509522686 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-refence-item/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-refence-item/expected.js
@@ -9,24 +9,22 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("ul", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (item) {
-          return api_element(
-            "li",
-            {
-              className: item.x,
-              key: api_key(1, item.id),
-            },
-            [api_text(api_dynamic_text(item))]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "ul",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_element(
+          "li",
+          {
+            className: item.x,
+            key: api_key(1, item.id),
+          },
+          [api_text(api_dynamic_text(item))]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-sibling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-sibling/expected.js
index 62d56b3180..e0d2219591 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-sibling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-sibling/expected.js
@@ -10,13 +10,14 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
     st: api_static_fragment,
+    f: api_flatten,
   } = $api;
   return [
-    api_element("ul", stc0, [
-      api_fragment(
-        "it-fr2",
+    api_element(
+      "ul",
+      stc0,
+      api_flatten([
         api_iterator($cmp.items, function (item) {
           return api_element(
             "li",
@@ -26,10 +27,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             },
             [api_text(api_dynamic_text(item))]
           );
-        })
-      ),
-      api_static_fragment($fragment1(), 4),
-    ]),
+        }),
+        api_static_fragment($fragment1(), 3),
+      ])
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline/expected.js
index 6d48543dfe..e4ef1d3ca1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline/expected.js
@@ -12,24 +12,22 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     st: api_static_fragment,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr4",
-        api_iterator($cmp.items, function (item) {
-          return api_element(
-            "div",
-            {
-              classMap: stc1,
-              key: api_key(1, item.id),
-            },
-            [api_static_fragment($fragment1(), 3)]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_element(
+          "div",
+          {
+            classMap: stc1,
+            key: api_key(1, item.id),
+          },
+          [api_static_fragment($fragment1(), 3)]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-multiple-children/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-multiple-children/expected.js
index 9359651e7b..820c16669a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-multiple-children/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-multiple-children/expected.js
@@ -9,32 +9,30 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr3",
-        api_iterator($cmp.items, function (item) {
-          return [
-            api_element(
-              "p",
-              {
-                key: api_key(1, item.keyOne),
-              },
-              [api_text("1" + api_dynamic_text(item))]
-            ),
-            api_element(
-              "p",
-              {
-                key: api_key(2, item.keyTwo),
-              },
-              [api_text("2" + api_dynamic_text(item))]
-            ),
-          ];
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return [
+          api_element(
+            "p",
+            {
+              key: api_key(1, item.keyOne),
+            },
+            [api_text("1" + api_dynamic_text(item))]
+          ),
+          api_element(
+            "p",
+            {
+              key: api_key(2, item.keyTwo),
+            },
+            [api_text("2" + api_dynamic_text(item))]
+          ),
+        ];
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-outside-scope-reference/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-outside-scope-reference/expected.js
index 6e44f1bcc4..d3c9fec7cb 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-outside-scope-reference/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-outside-scope-reference/expected.js
@@ -9,46 +9,44 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr5",
-        api_iterator($cmp.items, function (item) {
-          return [
-            api_element(
-              "p",
-              {
-                key: api_key(1, item.keyOne),
-              },
-              [api_text("1" + api_dynamic_text(item))]
-            ),
-            api_element(
-              "p",
-              {
-                key: api_key(2, item.keyTwo),
-              },
-              [api_text("2" + api_dynamic_text(item.foo))]
-            ),
-            api_element(
-              "p",
-              {
-                key: api_key(3, item.keyThree),
-              },
-              [api_text("3" + api_dynamic_text($cmp.other))]
-            ),
-            api_element(
-              "p",
-              {
-                key: api_key(4, item.keyFour),
-              },
-              [api_text("4" + api_dynamic_text($cmp.other.foo))]
-            ),
-          ];
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return [
+          api_element(
+            "p",
+            {
+              key: api_key(1, item.keyOne),
+            },
+            [api_text("1" + api_dynamic_text(item))]
+          ),
+          api_element(
+            "p",
+            {
+              key: api_key(2, item.keyTwo),
+            },
+            [api_text("2" + api_dynamic_text(item.foo))]
+          ),
+          api_element(
+            "p",
+            {
+              key: api_key(3, item.keyThree),
+            },
+            [api_text("3" + api_dynamic_text($cmp.other))]
+          ),
+          api_element(
+            "p",
+            {
+              key: api_key(4, item.keyFour),
+            },
+            [api_text("4" + api_dynamic_text($cmp.other.foo))]
+          ),
+        ];
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-sibling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-sibling/expected.js
index f51c41c923..0ebbfe7794 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-sibling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template-sibling/expected.js
@@ -3,7 +3,7 @@ const stc0 = {
   key: 0,
 };
 const stc1 = {
-  key: 4,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -12,12 +12,13 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
+    f: api_flatten,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr3",
+    api_element(
+      "section",
+      stc0,
+      api_flatten([
         api_iterator($cmp.items, function (item) {
           return [
             api_element(
@@ -35,10 +36,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
               [api_text("2" + api_dynamic_text(item))]
             ),
           ];
-        })
-      ),
-      api_element("p", stc1, [api_text("3" + api_dynamic_text($cmp.item))]),
-    ]),
+        }),
+        api_element("p", stc1, [api_text("3" + api_dynamic_text($cmp.item))]),
+      ])
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template/expected.js
index e5bd57a2bd..6ad063157d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/template/expected.js
@@ -9,23 +9,21 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (item) {
-          return api_element(
-            "p",
-            {
-              key: api_key(1, item.id),
-            },
-            [api_text("1" + api_dynamic_text(item))]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_element(
+          "p",
+          {
+            key: api_key(1, item.id),
+          },
+          [api_text("1" + api_dynamic_text(item))]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/usage-if-for-each/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/usage-if-for-each/expected.js
index 50d4f6ddf4..e8a173e538 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/usage-if-for-each/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-inner-html/usage-if-for-each/expected.js
@@ -17,27 +17,29 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
     k: api_key,
     i: api_iterator,
-    fr: api_fragment,
+    f: api_flatten,
     c: api_custom_element,
   } = $api;
   return [
-    api_custom_element("a-b", _aB, stc0, [
-      $cmp.isTrue
-        ? api_element("div", {
-            props: {
-              innerHTML:
-                $ctx._rawHtml$0 !== ($ctx._rawHtml$0 = $cmp.ifRawHtml)
-                  ? ($ctx._sanitizedHtml$0 = api_sanitize_html_content(
-                      $cmp.ifRawHtml
-                    ))
-                  : $ctx._sanitizedHtml$0,
-            },
-            context: stc1,
-            key: 1,
-          })
-        : null,
-      api_fragment(
-        "it-fr3",
+    api_custom_element(
+      "a-b",
+      _aB,
+      stc0,
+      api_flatten([
+        $cmp.isTrue
+          ? api_element("div", {
+              props: {
+                innerHTML:
+                  $ctx._rawHtml$0 !== ($ctx._rawHtml$0 = $cmp.ifRawHtml)
+                    ? ($ctx._sanitizedHtml$0 = api_sanitize_html_content(
+                        $cmp.ifRawHtml
+                      ))
+                    : $ctx._sanitizedHtml$0,
+              },
+              context: stc1,
+              key: 1,
+            })
+          : null,
         api_iterator($cmp.items, function (item) {
           return api_element("div", {
             props: {
@@ -51,9 +53,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             context: stc1,
             key: api_key(2, item.id),
           });
-        })
-      ),
-    ]),
+        }),
+      ])
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-iterator/inline-iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-iterator/inline-iterator/expected.js
index 9f2d1700e7..8389996789 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-iterator/inline-iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-iterator/inline-iterator/expected.js
@@ -12,38 +12,36 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr3",
-        api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
-          const x = {
-            value: xValue,
-            index: xIndex,
-            first: xFirst,
-            last: xLast,
-          };
-          return api_element(
-            "div",
-            {
-              attrs: {
-                "data-islast": x.last,
-                "data-isfirst": x.first,
-              },
-              key: api_key(1, x.value.id),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
+        const x = {
+          value: xValue,
+          index: xIndex,
+          first: xFirst,
+          last: xLast,
+        };
+        return api_element(
+          "div",
+          {
+            attrs: {
+              "data-islast": x.last,
+              "data-isfirst": x.first,
             },
-            [
-              api_element("span", stc1, [
-                api_text("Row: " + api_dynamic_text(x.index)),
-              ]),
-              api_text(". Value: " + api_dynamic_text(x.value)),
-            ]
-          );
-        })
-      ),
-    ]),
+            key: api_key(1, x.value.id),
+          },
+          [
+            api_element("span", stc1, [
+              api_text("Row: " + api_dynamic_text(x.index)),
+            ]),
+            api_text(". Value: " + api_dynamic_text(x.value)),
+          ]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-iterator/iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-iterator/iterator/expected.js
index 9f2d1700e7..8389996789 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-iterator/iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-iterator/iterator/expected.js
@@ -12,38 +12,36 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr3",
-        api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
-          const x = {
-            value: xValue,
-            index: xIndex,
-            first: xFirst,
-            last: xLast,
-          };
-          return api_element(
-            "div",
-            {
-              attrs: {
-                "data-islast": x.last,
-                "data-isfirst": x.first,
-              },
-              key: api_key(1, x.value.id),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
+        const x = {
+          value: xValue,
+          index: xIndex,
+          first: xFirst,
+          last: xLast,
+        };
+        return api_element(
+          "div",
+          {
+            attrs: {
+              "data-islast": x.last,
+              "data-isfirst": x.first,
             },
-            [
-              api_element("span", stc1, [
-                api_text("Row: " + api_dynamic_text(x.index)),
-              ]),
-              api_text(". Value: " + api_dynamic_text(x.value)),
-            ]
-          );
-        })
-      ),
-    ]),
+            key: api_key(1, x.value.id),
+          },
+          [
+            api_element("span", stc1, [
+              api_text("Row: " + api_dynamic_text(x.index)),
+            ]),
+            api_text(". Value: " + api_dynamic_text(x.value)),
+          ]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/component/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/component/expected.js
index 92298caac8..0f1e3de2a4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/component/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/component/expected.js
@@ -10,25 +10,23 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     c: api_custom_element,
     i: api_iterator,
-    fr: api_fragment,
     h: api_element,
   } = $api;
   return [
-    api_element("ul", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (item) {
-          return api_custom_element(
-            "ns-item",
-            _nsItem,
-            {
-              key: api_key(1, item.key),
-            },
-            [api_text(api_dynamic_text(item.value))]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "ul",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_custom_element(
+          "ns-item",
+          _nsItem,
+          {
+            key: api_key(1, item.key),
+          },
+          [api_text(api_dynamic_text(item.value))]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/element/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/element/expected.js
index cfc0e3fbc4..ad619b2cde 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/element/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/element/expected.js
@@ -9,23 +9,21 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("ul", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (item) {
-          return api_element(
-            "li",
-            {
-              key: api_key(1, item.key),
-            },
-            [api_text(api_dynamic_text(item.value))]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "ul",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_element(
+          "li",
+          {
+            key: api_key(1, item.key),
+          },
+          [api_text(api_dynamic_text(item.value))]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/for-each/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/for-each/expected.js
index 0443ce80c8..d1b73d6556 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/for-each/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/for-each/expected.js
@@ -15,24 +15,22 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr3",
-        api_iterator($cmp.items, function (item) {
-          return api_element(
-            "div",
-            {
-              classMap: stc1,
-              key: api_key(1, item.id),
-            },
-            [api_element("p", stc2, [api_text(api_dynamic_text(item))])]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_element(
+          "div",
+          {
+            classMap: stc1,
+            key: api_key(1, item.id),
+          },
+          [api_element("p", stc2, [api_text(api_dynamic_text(item))])]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-key-identifier/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-key-identifier/expected.js
index a4d1b68e59..307d4ffecc 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-key-identifier/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-key-identifier/expected.js
@@ -9,29 +9,27 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
-          const x = {
-            value: xValue,
-            index: xIndex,
-            first: xFirst,
-            last: xLast,
-          };
-          return api_element(
-            "p",
-            {
-              key: api_key(1, $cmp.foo),
-            },
-            [api_text(api_dynamic_text(x.value))]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
+        const x = {
+          value: xValue,
+          index: xIndex,
+          first: xFirst,
+          last: xLast,
+        };
+        return api_element(
+          "p",
+          {
+            key: api_key(1, $cmp.foo),
+          },
+          [api_text(api_dynamic_text(x.value))]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-key-member-expression/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-key-member-expression/expected.js
index a88c2fe93b..4a72735135 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-key-member-expression/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-key-member-expression/expected.js
@@ -9,29 +9,27 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
-          const x = {
-            value: xValue,
-            index: xIndex,
-            first: xFirst,
-            last: xLast,
-          };
-          return api_element(
-            "p",
-            {
-              key: api_key(1, $cmp.foo.index),
-            },
-            [api_text(api_dynamic_text(x.value))]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
+        const x = {
+          value: xValue,
+          index: xIndex,
+          first: xFirst,
+          last: xLast,
+        };
+        return api_element(
+          "p",
+          {
+            key: api_key(1, $cmp.foo.index),
+          },
+          [api_text(api_dynamic_text(x.value))]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-nested-each/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-nested-each/expected.js
index 5644404de2..fe0d5cdf84 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-nested-each/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-nested-each/expected.js
@@ -6,42 +6,33 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
-  return [
-    api_fragment(
-      "it-fr2",
-      api_iterator($cmp.features, function (feature) {
-        return api_fragment(
-          "it-fr1",
-          api_iterator(
-            feature.innerFeatures,
-            function (featureValue, featureIndex, featureFirst, featureLast) {
-              const feature = {
-                value: featureValue,
-                index: featureIndex,
-                first: featureFirst,
-                last: featureLast,
-              };
-              return api_element(
-                "p",
-                {
-                  key: api_key(0, feature.value.label),
-                },
-                [
-                  api_text(
-                    api_dynamic_text(feature.value.label) +
-                      " " +
-                      api_dynamic_text(feature.label)
-                  ),
-                ]
-              );
-            }
-          )
+  return api_iterator($cmp.features, function (feature) {
+    return api_iterator(
+      feature.innerFeatures,
+      function (featureValue, featureIndex, featureFirst, featureLast) {
+        const feature = {
+          value: featureValue,
+          index: featureIndex,
+          first: featureFirst,
+          last: featureLast,
+        };
+        return api_element(
+          "p",
+          {
+            key: api_key(0, feature.value.label),
+          },
+          [
+            api_text(
+              api_dynamic_text(feature.value.label) +
+                " " +
+                api_dynamic_text(feature.label)
+            ),
+          ]
         );
-      })
-    ),
-  ];
+      }
+    );
+  });
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-value-as-key/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-value-as-key/expected.js
index 10ec68d8f4..c647b2c1e6 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-value-as-key/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/iterator-value-as-key/expected.js
@@ -9,29 +9,27 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
-          const x = {
-            value: xValue,
-            index: xIndex,
-            first: xFirst,
-            last: xLast,
-          };
-          return api_element(
-            "p",
-            {
-              key: api_key(1, x.value),
-            },
-            [api_text(api_dynamic_text(x.value))]
-          );
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
+        const x = {
+          value: xValue,
+          index: xIndex,
+          first: xFirst,
+          last: xLast,
+        };
+        return api_element(
+          "p",
+          {
+            key: api_key(1, x.value),
+          },
+          [api_text(api_dynamic_text(x.value))]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/nested-iterator-if/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/nested-iterator-if/expected.js
index 262d8758a6..40bb77a43e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/nested-iterator-if/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/nested-iterator-if/expected.js
@@ -12,49 +12,47 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr4",
-        api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
-          const x = {
-            value: xValue,
-            index: xIndex,
-            first: xFirst,
-            last: xLast,
-          };
-          return [
-            api_element(
-              "div",
-              {
-                attrs: {
-                  "data-islast": x.last,
-                  "data-isfirst": x.first,
-                },
-                key: api_key(1, x.value.id),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (xValue, xIndex, xFirst, xLast) {
+        const x = {
+          value: xValue,
+          index: xIndex,
+          first: xFirst,
+          last: xLast,
+        };
+        return [
+          api_element(
+            "div",
+            {
+              attrs: {
+                "data-islast": x.last,
+                "data-isfirst": x.first,
               },
-              [
-                api_element("span", stc1, [
-                  api_text("Row: " + api_dynamic_text(x.index)),
-                ]),
-                api_text(". Value: " + api_dynamic_text(x.value)),
-              ]
-            ),
-            $cmp.isTrue
-              ? api_element(
-                  "div",
-                  {
-                    key: api_key(3, x.value.key),
-                  },
-                  [api_text("Text")]
-                )
-              : null,
-          ];
-        })
-      ),
-    ]),
+              key: api_key(1, x.value.id),
+            },
+            [
+              api_element("span", stc1, [
+                api_text("Row: " + api_dynamic_text(x.index)),
+              ]),
+              api_text(". Value: " + api_dynamic_text(x.value)),
+            ]
+          ),
+          $cmp.isTrue
+            ? api_element(
+                "div",
+                {
+                  key: api_key(3, x.value.key),
+                },
+                [api_text("Text")]
+              )
+            : null,
+        ];
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/computed/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/computed/expected.js
index 45e6f1a4a3..b6504d2aac 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/computed/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/computed/expected.js
@@ -4,9 +4,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     d: api_dynamic_text,
     t: api_text,
     i: api_iterator,
-    fr: api_fragment,
+    f: api_flatten,
   } = $api;
-  return [
+  return api_flatten([
     api_text(
       api_dynamic_text($cmp.val) +
         " " +
@@ -14,17 +14,14 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         " " +
         api_dynamic_text($cmp.val[$cmp.state.foo][$cmp.state.bar])
     ),
-    api_fragment(
-      "it-fr0",
-      api_iterator($cmp.arr, function (item, index) {
-        return api_text(
-          api_dynamic_text($cmp.arr[index]) +
-            " " +
-            api_dynamic_text($cmp.arr[$cmp.state.val])
-        );
-      })
-    ),
-  ];
+    api_iterator($cmp.arr, function (item, index) {
+      return api_text(
+        api_dynamic_text($cmp.arr[index]) +
+          " " +
+          api_dynamic_text($cmp.arr[$cmp.state.val])
+      );
+    }),
+  ]);
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/multiple-attributes-mixed/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/multiple-attributes-mixed/expected.js
index 78b724467a..b3373bfb3f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/multiple-attributes-mixed/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/multiple-attributes-mixed/expected.js
@@ -9,25 +9,23 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (item) {
-          return $cmp.showItems
-            ? api_element(
-                "p",
-                {
-                  key: api_key(1, item.id),
-                },
-                [api_text("1" + api_dynamic_text(item))]
-              )
-            : null;
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return $cmp.showItems
+          ? api_element(
+              "p",
+              {
+                key: api_key(1, item.id),
+              },
+              [api_text("1" + api_dynamic_text(item))]
+            )
+          : null;
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/multiple-attributes/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/multiple-attributes/expected.js
index 78b724467a..b3373bfb3f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/multiple-attributes/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/multiple-attributes/expected.js
@@ -9,25 +9,23 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
-    api_element("section", stc0, [
-      api_fragment(
-        "it-fr2",
-        api_iterator($cmp.items, function (item) {
-          return $cmp.showItems
-            ? api_element(
-                "p",
-                {
-                  key: api_key(1, item.id),
-                },
-                [api_text("1" + api_dynamic_text(item))]
-              )
-            : null;
-        })
-      ),
-    ]),
+    api_element(
+      "section",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return $cmp.showItems
+          ? api_element(
+              "p",
+              {
+                key: api_key(1, item.id),
+              },
+              [api_text("1" + api_dynamic_text(item))]
+            )
+          : null;
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/named-slot-in-iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/named-slot-in-iterator/expected.js
index 21151f537f..1fb880f490 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/named-slot-in-iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/named-slot-in-iterator/expected.js
@@ -7,27 +7,16 @@ const stc0 = {
 };
 const stc1 = [];
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const {
-    k: api_key,
-    s: api_slot,
-    h: api_element,
-    i: api_iterator,
-    fr: api_fragment,
-  } = $api;
-  return [
-    api_fragment(
-      "it-fr2",
-      api_iterator($cmp.items, function (item) {
-        return api_element(
-          "div",
-          {
-            key: api_key(0, item),
-          },
-          [api_slot("james", stc0, stc1, $slotset)]
-        );
-      })
-    ),
-  ];
+  const { k: api_key, s: api_slot, h: api_element, i: api_iterator } = $api;
+  return api_iterator($cmp.items, function (item) {
+    return api_element(
+      "div",
+      {
+        key: api_key(0, item),
+      },
+      [api_slot("james", stc0, stc1, $slotset)]
+    );
+  });
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/slot-in-iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/slot-in-iterator/expected.js
index dfc0ed64b8..93c18e0052 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/slot-in-iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/slot-in-iterator/expected.js
@@ -4,27 +4,16 @@ const stc0 = {
 };
 const stc1 = [];
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const {
-    k: api_key,
-    s: api_slot,
-    h: api_element,
-    i: api_iterator,
-    fr: api_fragment,
-  } = $api;
-  return [
-    api_fragment(
-      "it-fr2",
-      api_iterator($cmp.items, function (item) {
-        return api_element(
-          "div",
-          {
-            key: api_key(0, item),
-          },
-          [api_slot("", stc0, stc1, $slotset)]
-        );
-      })
-    ),
-  ];
+  const { k: api_key, s: api_slot, h: api_element, i: api_iterator } = $api;
+  return api_iterator($cmp.items, function (item) {
+    return api_element(
+      "div",
+      {
+        key: api_key(0, item),
+      },
+      [api_slot("", stc0, stc1, $slotset)]
+    );
+  });
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/handler-memoization/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/handler-memoization/expected.js
index b587847377..a6bd51340b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/handler-memoization/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/handler-memoization/expected.js
@@ -10,7 +10,6 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     k: api_key,
     d: api_dynamic_text,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   const { _m0 } = $ctx;
   return [
@@ -24,32 +23,31 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       [api_text("New")]
     ),
-    api_element("ul", stc0, [
-      api_fragment(
-        "it-fr4",
-        api_iterator($cmp.list, function (task) {
-          return api_element(
-            "li",
-            {
-              key: api_key(2, task.id),
-            },
-            [
-              api_text(api_dynamic_text(task.title)),
-              api_element(
-                "button",
-                {
-                  key: 3,
-                  on: {
-                    click: api_bind(task.delete),
-                  },
+    api_element(
+      "ul",
+      stc0,
+      api_iterator($cmp.list, function (task) {
+        return api_element(
+          "li",
+          {
+            key: api_key(2, task.id),
+          },
+          [
+            api_text(api_dynamic_text(task.title)),
+            api_element(
+              "button",
+              {
+                key: 3,
+                on: {
+                  click: api_bind(task.delete),
                 },
-                [api_text("[X]")]
-              ),
-            ]
-          );
-        })
-      ),
-    ]),
+              },
+              [api_text("[X]")]
+            ),
+          ]
+        );
+      })
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/nested-if-loops/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/nested-if-loops/expected.js
index 257ccda759..48a3b7fb3a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/nested-if-loops/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/nested-if-loops/expected.js
@@ -1,29 +1,27 @@
 import { registerTemplate } from "lwc";
+const stc0 = [];
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     t: api_text,
     k: api_key,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
+    f: api_flatten,
   } = $api;
-  return [
-    $cmp.isTrue ? api_text("Outer") : null,
-    $cmp.isTrue
-      ? api_fragment(
-          "it-fr1",
-          api_iterator($cmp.items, function (item) {
-            return api_element(
-              "p",
-              {
-                key: api_key(0, item.id),
-              },
-              [api_text("Inner")]
-            );
-          })
-        )
-      : null,
-  ];
+  return $cmp.isTrue
+    ? api_flatten([
+        api_text("Outer"),
+        api_iterator($cmp.items, function (item) {
+          return api_element(
+            "p",
+            {
+              key: api_key(0, item.id),
+            },
+            [api_text("Inner")]
+          );
+        }),
+      ])
+    : stc0;
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/static-id-in-iteration/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/static-id-in-iteration/expected.js
index b1880c4ebc..42381096db 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/static-id-in-iteration/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/static-id-in-iteration/expected.js
@@ -5,88 +5,76 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     gid: api_scoped_id,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
+    f: api_flatten,
   } = $api;
-  return [
-    api_fragment(
-      "it-fr2",
-      api_iterator($cmp.items, function (item) {
+  return api_flatten([
+    api_iterator($cmp.items, function (item) {
+      return api_element(
+        "div",
+        {
+          key: api_key(0, item.key),
+        },
+        [
+          api_element("span", {
+            attrs: {
+              id: api_scoped_id("a"),
+            },
+            key: 1,
+          }),
+        ]
+      );
+    }),
+    api_iterator($cmp.items, function (item) {
+      return api_element("span", {
+        attrs: {
+          id: api_scoped_id("b"),
+        },
+        key: api_key(2, item.key),
+      });
+    }),
+    api_iterator(
+      $cmp.items,
+      function (itemValue, itemIndex, itemFirst, itemLast) {
+        const item = {
+          value: itemValue,
+          index: itemIndex,
+          first: itemFirst,
+          last: itemLast,
+        };
         return api_element(
           "div",
           {
-            key: api_key(0, item.key),
+            key: api_key(3, item.key),
           },
           [
             api_element("span", {
               attrs: {
-                id: api_scoped_id("a"),
+                id: api_scoped_id("c"),
               },
-              key: 1,
+              key: 4,
             }),
           ]
         );
-      })
+      }
     ),
-    api_fragment(
-      "it-fr4",
-      api_iterator($cmp.items, function (item) {
+    api_iterator(
+      $cmp.items,
+      function (itemValue, itemIndex, itemFirst, itemLast) {
+        const item = {
+          value: itemValue,
+          index: itemIndex,
+          first: itemFirst,
+          last: itemLast,
+        };
         return api_element("span", {
           attrs: {
-            id: api_scoped_id("b"),
+            id: api_scoped_id("d"),
           },
-          key: api_key(3, item.key),
+          key: api_key(5, item.key),
         });
-      })
-    ),
-    api_fragment(
-      "it-fr7",
-      api_iterator(
-        $cmp.items,
-        function (itemValue, itemIndex, itemFirst, itemLast) {
-          const item = {
-            value: itemValue,
-            index: itemIndex,
-            first: itemFirst,
-            last: itemLast,
-          };
-          return api_element(
-            "div",
-            {
-              key: api_key(5, item.key),
-            },
-            [
-              api_element("span", {
-                attrs: {
-                  id: api_scoped_id("c"),
-                },
-                key: 6,
-              }),
-            ]
-          );
-        }
-      )
-    ),
-    api_fragment(
-      "it-fr9",
-      api_iterator(
-        $cmp.items,
-        function (itemValue, itemIndex, itemFirst, itemLast) {
-          const item = {
-            value: itemValue,
-            index: itemIndex,
-            first: itemFirst,
-            last: itemLast,
-          };
-          return api_element("span", {
-            attrs: {
-              id: api_scoped_id("d"),
-            },
-            key: api_key(8, item.key),
-          });
-        }
-      )
+      }
     ),
-  ];
+  ]);
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/directive-inner-html/usage-if-for-each/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/directive-inner-html/usage-if-for-each/expected.js
index af157963fa..549ceb6a84 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/directive-inner-html/usage-if-for-each/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/directive-inner-html/usage-if-for-each/expected.js
@@ -16,23 +16,25 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
     k: api_key,
     i: api_iterator,
-    fr: api_fragment,
+    f: api_flatten,
     c: api_custom_element,
   } = $api;
   return [
-    api_custom_element("a-b", _aB, stc0, [
-      $cmp.isTrue
-        ? api_element("div", {
-            props: {
-              innerHTML: $cmp.ifRawHtml,
-            },
-            context: stc1,
-            key: 1,
-            renderer: renderer,
-          })
-        : null,
-      api_fragment(
-        "it-fr3",
+    api_custom_element(
+      "a-b",
+      _aB,
+      stc0,
+      api_flatten([
+        $cmp.isTrue
+          ? api_element("div", {
+              props: {
+                innerHTML: $cmp.ifRawHtml,
+              },
+              context: stc1,
+              key: 1,
+              renderer: renderer,
+            })
+          : null,
         api_iterator($cmp.items, function (item) {
           return api_element("div", {
             props: {
@@ -42,9 +44,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             key: api_key(2, item.id),
             renderer: renderer,
           });
-        })
-      ),
-    ]),
+        }),
+      ])
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed/expected.js
index e2163cc26a..af17ee531f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed/expected.js
@@ -7,28 +7,31 @@ const stc0 = {
 const stc1 = {
   key: 1,
 };
+const stc2 = [];
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     st: api_static_fragment,
     t: api_text,
     i: api_iterator,
-    fr: api_fragment,
+    f: api_flatten,
     c: api_custom_element,
     h: api_element,
   } = $api;
   return [
     api_element("div", stc0, [
-      api_custom_element("x-b", _xB, stc1, [
-        $cmp.isLoading ? api_static_fragment($fragment1(), 3) : null,
-        $cmp.haveLoadedItems
-          ? api_fragment(
-              "it-fr4",
-              api_iterator($cmp.menuItems, function (item) {
+      api_custom_element(
+        "x-b",
+        _xB,
+        stc1,
+        api_flatten([
+          $cmp.isLoading ? api_static_fragment($fragment1(), 3) : null,
+          $cmp.haveLoadedItems
+            ? api_iterator($cmp.menuItems, function (item) {
                 return api_text("x");
               })
-            )
-          : null,
-      ]),
+            : stc2,
+        ])
+      ),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-if-for-each/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-if-for-each/expected.js
index 966c5e4d33..a03080f83b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-if-for-each/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-if-for-each/expected.js
@@ -6,32 +6,32 @@ const stc0 = {
   },
   key: 0,
 };
+const stc1 = [];
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     k: api_key,
     t: api_text,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
     c: api_custom_element,
   } = $api;
   return [
-    api_custom_element("a-b", _aB, stc0, [
+    api_custom_element(
+      "a-b",
+      _aB,
+      stc0,
       $cmp.isTrue
-        ? api_fragment(
-            "it-fr2",
-            api_iterator($cmp.items, function (item) {
-              return api_element(
-                "p",
-                {
-                  key: api_key(1, item.id),
-                },
-                [api_text("X")]
-              );
-            })
-          )
-        : null,
-    ]),
+        ? api_iterator($cmp.items, function (item) {
+            return api_element(
+              "p",
+              {
+                key: api_key(1, item.id),
+              },
+              [api_text("X")]
+            );
+          })
+        : stc1
+    ),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-th-or-td/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-th-or-td/expected.js
index 70eabe13b1..79cd2a498f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-th-or-td/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-th-or-td/expected.js
@@ -8,7 +8,7 @@ const stc1 = {
   key: 1,
 };
 const stc2 = {
-  key: 6,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -16,38 +16,35 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     st: api_static_fragment,
     h: api_element,
     i: api_iterator,
-    fr: api_fragment,
   } = $api;
   return [
     api_element("table", stc0, [
-      api_element("thead", stc1, [
-        api_fragment(
-          "it-fr5",
-          api_iterator($cmp.rows, function (row) {
-            return api_element(
-              "tr",
-              {
-                key: api_key(2, row.id),
-              },
-              [api_static_fragment($fragment1(), 4)]
-            );
-          })
-        ),
-      ]),
-      api_element("tbody", stc2, [
-        api_fragment(
-          "it-fr10",
-          api_iterator($cmp.rows, function (row) {
-            return api_element(
-              "tr",
-              {
-                key: api_key(7, row.id),
-              },
-              [api_static_fragment($fragment2(), 9)]
-            );
-          })
-        ),
-      ]),
+      api_element(
+        "thead",
+        stc1,
+        api_iterator($cmp.rows, function (row) {
+          return api_element(
+            "tr",
+            {
+              key: api_key(2, row.id),
+            },
+            [api_static_fragment($fragment1(), 4)]
+          );
+        })
+      ),
+      api_element(
+        "tbody",
+        stc2,
+        api_iterator($cmp.rows, function (row) {
+          return api_element(
+            "tr",
+            {
+              key: api_key(6, row.id),
+            },
+            [api_static_fragment($fragment2(), 8)]
+          );
+        })
+      ),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/codegen/codegen.ts b/packages/@lwc/template-compiler/src/codegen/codegen.ts
index 1e5686c36b..29337ec252 100644
--- a/packages/@lwc/template-compiler/src/codegen/codegen.ts
+++ b/packages/@lwc/template-compiler/src/codegen/codegen.ts
@@ -149,9 +149,8 @@ export default class CodeGen {
         this.state = state;
     }
 
-    generateKey(prefix?: string) {
-        // to avoid the extra " in the key when prefix is not defined
-        return prefix ? prefix + this.currentKey++ : this.currentKey++;
+    generateKey() {
+        return this.currentKey++;
     }
 
     genElement(tagName: string, data: t.ObjectExpression, children: t.Expression) {
@@ -215,18 +214,17 @@ export default class CodeGen {
         return this._renderApiCall(RENDER_APIS.sanitizeHtmlContent, [content]);
     }
 
-    genFragment(key: t.Expression | t.SimpleLiteral, children: t.Expression): t.Expression {
-        return this._renderApiCall(RENDER_APIS.fragment, [key, children]);
+    genFragment(
+        key: t.Expression | t.SimpleLiteral,
+        children: t.Expression,
+        stable: boolean = false
+    ): t.Expression {
+        const isStable = stable ? t.literal(1) : t.literal(0);
+        return this._renderApiCall(RENDER_APIS.fragment, [key, children, isStable]);
     }
 
     genIterator(iterable: t.Expression, callback: t.FunctionExpression) {
-        // when slotting content, keys may collide with default content
-        // since isSameVnode does not take into account the type, some times it will try to patch a fragment with another type of vnode.
-        // note: this is hackery, maybe there's a better way?
-        return this.genFragment(
-            t.literal(this.generateKey('it-fr')),
-            this._renderApiCall(RENDER_APIS.iterator, [iterable, callback])
-        );
+        return this._renderApiCall(RENDER_APIS.iterator, [iterable, callback]);
     }
 
     genBind(handler: t.Expression) {
diff --git a/packages/@lwc/template-compiler/src/codegen/helpers.ts b/packages/@lwc/template-compiler/src/codegen/helpers.ts
index 2d506aa5ae..e8ab4d2016 100644
--- a/packages/@lwc/template-compiler/src/codegen/helpers.ts
+++ b/packages/@lwc/template-compiler/src/codegen/helpers.ts
@@ -72,11 +72,12 @@ export function containsDynamicChildren(children: ChildNode[]): boolean {
 export function shouldFlatten(codeGen: CodeGen, children: ChildNode[]): boolean {
     return children.some(
         (child) =>
-            isParentNode(child) &&
-            // If node is only a control flow node and does not map to a stand alone element.
-            // Search children to determine if it should be flattened.
-            ((isIf(child) && shouldFlatten(codeGen, child.children)) ||
-                (codeGen.renderMode === LWCDirectiveRenderMode.light && isSlot(child)))
+            isForBlock(child) ||
+            (isParentNode(child) &&
+                // If node is only a control flow node and does not map to a stand alone element.
+                // Search children to determine if it should be flattened.
+                ((isIf(child) && shouldFlatten(codeGen, child.children)) ||
+                    (codeGen.renderMode === LWCDirectiveRenderMode.light && isSlot(child))))
     );
 }
 
diff --git a/packages/@lwc/template-compiler/src/codegen/index.ts b/packages/@lwc/template-compiler/src/codegen/index.ts
index 389e8259c4..60e0f43a43 100644
--- a/packages/@lwc/template-compiler/src/codegen/index.ts
+++ b/packages/@lwc/template-compiler/src/codegen/index.ts
@@ -232,9 +232,14 @@ function transform(codeGen: CodeGen): t.Expression {
             expression = expression.elements[0] as t.Expression;
         }
 
-        return isForEach(forBlock)
-            ? applyInlineFor(forBlock, expression)
-            : applyInlineForOf(forBlock, expression);
+        let res: t.Expression;
+        if (isForEach(forBlock)) {
+            res = applyInlineFor(forBlock, expression);
+        } else {
+            res = applyInlineForOf(forBlock, expression);
+        }
+
+        return res;
     }
 
     function transformForChildren(forBlock: ForBlock): t.Expression {