From 55e6118c8e5233339144a0fdfdd91a984d8ac0b0 Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Mon, 11 Mar 2024 15:49:13 -0700
Subject: [PATCH 01/10] refactor: move data bag collection to after static
 content check

---
 packages/@lwc/template-compiler/src/codegen/index.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/@lwc/template-compiler/src/codegen/index.ts b/packages/@lwc/template-compiler/src/codegen/index.ts
index 38d6d4431d..f6abf5ff53 100644
--- a/packages/@lwc/template-compiler/src/codegen/index.ts
+++ b/packages/@lwc/template-compiler/src/codegen/index.ts
@@ -79,14 +79,13 @@ import { format as formatModule } from './formatters/module';
 function transform(codeGen: CodeGen): t.Expression {
     const instrumentation = codeGen.state.config.instrumentation;
     function transformElement(element: BaseElement, slotParentName?: string): t.Expression {
-        const databag = elementDataBag(element, slotParentName);
-        let res: t.Expression;
-
         if (codeGen.staticNodes.has(element) && isElement(element)) {
             // do not process children of static nodes.
             return codeGen.genStaticElement(element as StaticElement, slotParentName);
         }
 
+        let res: t.Expression;
+        const databag = elementDataBag(element, slotParentName);
         const children = transformChildren(element);
 
         const { name } = element;

From 1a7aa35e663c790b3ab6cd532b3e838de5d85af8 Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Mon, 11 Mar 2024 15:49:32 -0700
Subject: [PATCH 02/10] chore: update all test fixtures

---
 .../attributes/attribute-allow/expected.js    |  2 +-
 .../attribute-crossorigin/expected.js         |  6 +--
 .../attributes/attribute-part/expected.js     |  2 +-
 .../hidden-global-attr/expected.js            | 20 +++++-----
 .../boolean-attribute/required/expected.js    | 20 +++++-----
 .../boolean-attributes-valid/expected.js      |  6 +--
 .../fixtures/attributes/boolean/expected.js   |  4 +-
 .../fixtures/attributes/class/expected.js     |  8 ++--
 .../attributes/dataset-complex/expected.js    |  2 +-
 .../fixtures/attributes/dataset/expected.js   |  2 +-
 .../attributes/error-empty-value/expected.js  |  4 +-
 .../fixtures/attributes/escaped/expected.js   |  2 +-
 .../attributes/html-input/expected.js         |  2 +-
 .../attributes/html-tag-invalid/expected.js   |  2 +-
 .../fixtures/attributes/html-tag/expected.js  |  2 +-
 .../attributes/mixed-props-attrs/expected.js  | 12 +++---
 .../expected.js                               |  2 +-
 .../__tests__/fixtures/base/class/expected.js |  2 +-
 .../fixtures/base/html-entities/expected.js   |  4 +-
 .../fixtures/base/style-important/expected.js |  2 +-
 .../fixtures/base/style-static/expected.js    |  4 +-
 .../fixtures/base/template/expected.js        |  2 +-
 .../fixtures/comments/basic/expected.js       |  2 +-
 .../comments/directive-if/expected.js         |  4 +-
 .../preserve-html-comments-option/expected.js |  2 +-
 .../fixtures/comments/slots/expected.js       |  2 +-
 .../directive-dynamic/sibbling/expected.js    |  6 +--
 .../directive-for-each/children/expected.js   | 16 ++++----
 .../inline-sibling/expected.js                |  2 +-
 .../directive-for-each/inline/expected.js     |  2 +-
 .../dynamic-component/expected.js             |  6 +--
 .../inline-both-standard-element/expected.js  |  2 +-
 .../directive-if/inline-multiple/expected.js  |  6 +--
 .../inline-sibling-static/expected.js         |  4 +-
 .../directive-if/strict-true/expected.js      |  2 +-
 .../directive-if/template-both/expected.js    |  2 +-
 .../directive-if/template-if-else/expected.js |  4 +-
 .../template-multiple/expected.js             |  6 +--
 .../template-sibiling/expected.js             |  6 +--
 .../outside-iterator/expected.js              |  2 +-
 .../dynamic-components/if-else/expected.js    |  4 +-
 .../if-elseif-else-nested/expected.js         | 16 ++++----
 .../if-elseif-else/expected.js                |  6 +--
 .../if-elseif-multiple/expected.js            |  8 ++--
 .../dynamic-components/if-elseif/expected.js  |  4 +-
 .../dynamic-components/inline/expected.js     | 10 ++---
 .../dynamic/if-else/expected.js               |  4 +-
 .../dynamic/if-elseif-else-nested/expected.js | 16 ++++----
 .../dynamic/if-elseif-else/expected.js        |  6 +--
 .../dynamic/if-elseif-multiple/expected.js    |  8 ++--
 .../dynamic/if-elseif/expected.js             |  4 +-
 .../if-else/html-elements/expected.js         |  4 +-
 .../if-elseif-else/html-elements/expected.js  |  6 +--
 .../if-elseif/html-elements/expected.js       |  4 +-
 .../if-only/html-elements/expected.js         |  2 +-
 .../mixed-elements/expected.js                |  4 +-
 .../simple/expected.js                        |  6 +--
 .../with-siblings/expected.js                 | 10 ++---
 .../static-container/expected.js              |  2 +-
 .../fixtures/directive-ref/valid/expected.js  |  2 +-
 .../shadow-template/expected.js               |  2 +-
 .../template/expected.js                      |  8 ++--
 .../valid/children/expected.js                |  2 +-
 .../valid/nested/expected.js                  |  6 +--
 .../valid/siblings/expected.js                |  6 +--
 .../fixtures/events/static/expected.js        |  2 +-
 .../__tests__/fixtures/events/tag/expected.js |  2 +-
 .../fixtures/events/type-valid/expected.js    | 18 ++++-----
 .../valid/assignment-inside-arrow/expected.js |  2 +-
 .../valid/iterator/expected.js                |  6 +--
 .../valid/update-inside-arrow/expected.js     |  2 +-
 .../expression/empty-paranthesis/expected.js  |  4 +-
 .../fixtures/expression/escaped/expected.js   |  2 +-
 .../quoted-empty-paranthesis/expected.js      |  4 +-
 .../html-tags/unkown-element/expected.js      |  8 ++--
 .../fixtures/lwc-tags/invalid/expected.js     |  2 +-
 .../double-close-div/expected.js              |  2 +-
 .../expected.js                               |  2 +-
 .../stranded-open-svg-ellipse/expected.js     |  2 +-
 .../attribute-with-equal/expected.js          |  2 +-
 .../regression/dashed-html-tag/expected.js    |  2 +-
 .../keygen/expected.js                        |  4 +-
 .../menuitem/expected.js                      |  2 +-
 .../param/expected.js                         |  2 +-
 .../handler-memoization/expected.js           | 12 +++---
 .../invalid-html-recovery/expected.js         |  4 +-
 .../slot-name-with-dash/expected.js           |  2 +-
 .../regression/table-with-tr/expected.js      |  2 +-
 .../config/multiple-tagname/expected.js       | 12 +++---
 .../config/tag-with-namespace/expected.js     |  2 +-
 .../tagname-with-attributes/expected.js       |  2 +-
 .../parent-mixed-slot-content/expected.js     |  2 +-
 .../text-non-direct-child/expected.js         |  2 +-
 .../definition-sibiling-slot/expected.js      |  6 +--
 .../definition-sibling-static/expected.js     |  6 +--
 .../fixtures/slots/definition/expected.js     |  2 +-
 .../fixtures/slots/mixed-1/expected.js        | 16 ++++----
 .../fixtures/slots/mixed/expected.js          |  2 +-
 .../fixtures/slots/usage-named/expected.js    |  2 +-
 .../fixtures/slots/usage/expected.js          | 20 +++++-----
 .../static-content/attr-escaping/expected.js  |  2 +-
 .../class-attr-escaping/expected.js           |  2 +-
 .../comment-escaping/expected.js              |  2 +-
 .../deep-data-ref-only/expected.js            |  2 +-
 .../static-content/deep-data/expected.js      |  2 +-
 .../no-escaping-tags/expected.js              |  8 ++--
 .../static-content/no-th-or-td/expected.js    |  8 ++--
 .../expected.js                               |  2 +-
 .../preserve-comments-off/expected.js         |  2 +-
 .../expected.js                               |  2 +-
 .../preserve-comments-on/expected.js          |  2 +-
 .../static-content/shallow-data/expected.js   |  6 +--
 .../static-content/svg-within-div/expected.js |  2 +-
 .../static-content/svg-within-g/expected.js   |  2 +-
 .../fixtures/static-content/svg/expected.js   |  2 +-
 .../template-string-escape/expected.js        | 24 +++++------
 .../static-content/text-escaping/expected.js  |  2 +-
 .../__tests__/fixtures/svg/filter/expected.js | 40 +++++++++----------
 .../fixtures/svg/foreign-object/expected.js   |  2 +-
 .../fixtures/svg/linear-gradient/expected.js  |  6 +--
 .../fixtures/svg/simple-svg/expected.js       |  2 +-
 .../svg/stranded-open-path/expected.js        |  2 +-
 .../fixtures/svg/valid-image/expected.js      |  2 +-
 .../fixtures/svg/valid-svg/expected.js        |  2 +-
 124 files changed, 315 insertions(+), 315 deletions(-)

diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
index 59c0fbe8e6..e26ce8effd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<iframe allow="geolocation https://google-developers.appspot.com"${3}></iframe>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
index 21db94db2c..f631fd92a6 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
@@ -5,9 +5,9 @@ const $fragment3 = parseFragment`<audio src="http://www.example.com/video.mp3" c
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
-    api_static_fragment($fragment3(), 5),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment3(), 2),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
index 1db00d2e3f..ce0e6040c4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div part="foo"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
index 3364b0fbb1..7422c0e3d7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
@@ -8,25 +8,25 @@ const stc0 = {
   props: {
     hidden: true,
   },
-  key: 9,
+  key: 5,
 };
 const stc1 = {
   props: {
     hidden: true,
   },
-  key: 10,
+  key: 6,
 };
 const stc2 = {
   props: {
     hidden: true,
   },
-  key: 11,
+  key: 7,
 };
 const stc3 = {
   props: {
     hidden: true,
   },
-  key: 13,
+  key: 9,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -36,20 +36,20 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     c: api_custom_element,
   } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
-    api_static_fragment($fragment3(), 5),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment3(), 2),
     api_element(
       "p",
       {
         attrs: {
           hidden: $cmp.computed ? "" : null,
         },
-        key: 6,
+        key: 3,
       },
       [api_text("computed value, should be resolved in component")]
     ),
-    api_static_fragment($fragment4(), 8),
+    api_static_fragment($fragment4(), 4),
     api_custom_element("x-foo", _xFoo, stc0, [api_text("boolean present")]),
     api_custom_element("x-foo", _xFoo, stc1, [
       api_text("empty string, should be true"),
@@ -64,7 +64,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         props: {
           hidden: $cmp.computed,
         },
-        key: 12,
+        key: 8,
       },
       [api_text("computed value, should be resolved in component")]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
index b0ee4cdcb3..2ed486e5c1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
@@ -11,25 +11,25 @@ const stc1 = {
   props: {
     required: true,
   },
-  key: 9,
+  key: 5,
 };
 const stc2 = {
   props: {
     required: "",
   },
-  key: 10,
+  key: 6,
 };
 const stc3 = {
   props: {
     required: "other than true",
   },
-  key: 11,
+  key: 7,
 };
 const stc4 = {
   props: {
     required: "3",
   },
-  key: 13,
+  key: 9,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -39,17 +39,17 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     c: api_custom_element,
   } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
-    api_static_fragment($fragment3(), 5),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment3(), 2),
     api_element("input", {
       attrs: {
         required: $cmp.computed ? "" : null,
       },
       props: stc0,
-      key: 6,
+      key: 3,
     }),
-    api_static_fragment($fragment4(), 8),
+    api_static_fragment($fragment4(), 4),
     api_custom_element("x-foo", _xFoo, stc1, [api_text("boolean present")]),
     api_custom_element("x-foo", _xFoo, stc2, [api_text("empty string")]),
     api_custom_element("x-foo", _xFoo, stc3, [api_text("string value")]),
@@ -60,7 +60,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         props: {
           required: $cmp.computed,
         },
-        key: 12,
+        key: 8,
       },
       [api_text("computed value, should be resolved in component")]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
index 0c184df518..750bac1af4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
@@ -19,7 +19,7 @@ const stc0 = {
     reversed: "true",
     selected: "true",
   },
-  key: 2,
+  key: 1,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
   } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
     api_custom_element("x-foo", _xFoo, stc0),
     api_element("input", {
       attrs: {
@@ -36,7 +36,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         disabled: "",
         title: "foo",
       },
-      key: 3,
+      key: 2,
     }),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
index 651763622a..3b771d2830 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
@@ -3,14 +3,14 @@ const $fragment1 = parseFragment`<p hidden${3}>x</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
     api_element("input", {
       attrs: {
         readonly: $cmp.getReadOnly ? "" : null,
         disabled: "",
         title: "foo",
       },
-      key: 2,
+      key: 1,
     }),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
index 001ad260bd..d9b35d7ea6 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
@@ -6,10 +6,10 @@ const $fragment4 = parseFragment`<div class="foo   bar${0}"${2}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
-    api_static_fragment($fragment3(), 5),
-    api_static_fragment($fragment4(), 7),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment3(), 2),
+    api_static_fragment($fragment4(), 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
index 971dc46b11..18bf13612a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p data--bar-baz="xyz"${3}></p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
index ea70d5017b..22567153cc 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p data-foo="1" data-bar-baz="xyz"${3}></p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
index dc7831f766..b204a0205a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
@@ -6,12 +6,12 @@ const stc0 = {
     content: "",
     visible: true,
   },
-  key: 2,
+  key: 1,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, c: api_custom_element } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
     api_custom_element("foo-bar", _fooBar, stc0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
index 1dee27e31e..c2a21a4ec1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input title="\\\\{myValue}"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
index 23a392e648..5b9be83e12 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input type="checkbox" required readonly minlength="5" maxlength="10" checked${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
index dd4a0c5e66..e22007f718 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><textarea minlength="1" maxlength="5" unknown-attr="should-error"${3}>x</textarea></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
index 833a362aee..2f6d5698c4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p title="x" aria-hidden="x"${3}>x</p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
index 48414811cf..a76c61dbba 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
@@ -16,7 +16,7 @@ const stc2 = {
   attrs: {
     focusable: "true",
   },
-  key: 4,
+  key: 3,
   svg: true,
 };
 const stc3 = {
@@ -37,7 +37,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       key: 0,
     }),
-    api_static_fragment($fragment1(), 2),
+    api_static_fragment($fragment1(), 1),
     api_custom_element("ns-bar", _nsBar, {
       classMap: stc0,
       attrs: stc1,
@@ -50,7 +50,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         tabIndex: "0",
         bgColor: "blue",
       },
-      key: 3,
+      key: 2,
     }),
     api_element("svg", stc2, [
       api_element("use", {
@@ -62,15 +62,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             "xx"
           ),
         },
-        key: 5,
+        key: 4,
         svg: true,
       }),
     ]),
-    api_static_fragment($fragment2(), 7),
+    api_static_fragment($fragment2(), 5),
     api_element("div", {
       className: $cmp.foo,
       attrs: stc3,
-      key: 8,
+      key: 6,
     }),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
index 7c62ea3f5c..0b03df6c0b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<somefancytag min="4"${3}></somefancytag>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
index f265ad431c..89f0d6d4d8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section class="foo bar   baz-fiz${0}"${2}></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
index 203060c392..e04be2bc94 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<p${3}>const { foo } = bar;</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
index 3b70261129..334bb3e2c2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div style="background: blue !important; color: red; opacity: 0.5 !important"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
index 48da65359b..0639f31be4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<section style="--my-color: blue; color: var(--
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
index 3f2b0a6a5f..c91b881e42 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p${3}>Root</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
index 289816683f..d8a474a8c9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" This is an HTML comment "),
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
index 4f2a03d507..a2fa603b1d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
@@ -5,9 +5,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     $cmp.truthyValue ? api_comment(" HTML comment inside if:true ") : null,
-    $cmp.truthyValue ? api_static_fragment($fragment1(), 1) : null,
+    $cmp.truthyValue ? api_static_fragment($fragment1(), 0) : null,
     !$cmp.truthyValue ? api_comment(" HTML comment inside if:false ") : null,
-    !$cmp.truthyValue ? api_static_fragment($fragment2(), 3) : null,
+    !$cmp.truthyValue ? api_static_fragment($fragment2(), 1) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
index 289816683f..d8a474a8c9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" This is an HTML comment "),
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
index 987d545aa0..cbcc1d1b95 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
@@ -13,7 +13,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   return [
     api_custom_element("x-child", _xChild, stc0, [
       api_comment(" HTML comment inside slot "),
-      api_static_fragment($fragment1(), 2),
+      api_static_fragment($fragment1(), 1),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
index ec6fc28caf..f6db852bdf 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
@@ -2,15 +2,15 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}>before</div>`;
 const $fragment2 = parseFragment`<div${3}>after</div>`;
 const stc0 = {
-  key: 2,
+  key: 1,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, ddc: api_deprecated_dynamic_component } =
     $api;
   return [
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
     api_deprecated_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0),
-    api_static_fragment($fragment2(), 4),
+    api_static_fragment($fragment2(), 2),
   ];
   /*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 c2004a4ab3..617e2ea198 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,14 +12,14 @@ const stc1 = {
   classMap: {
     s2: true,
   },
-  key: 3,
+  key: 2,
 };
 const stc2 = [];
 const stc3 = {
   classMap: {
     s3: true,
   },
-  key: 6,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -39,7 +39,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         api_iterator($cmp.items, function (item) {
           return api_text("X");
         }),
-        api_static_fragment($fragment1(), 2),
+        api_static_fragment($fragment1(), 1),
       ])
     ),
     api_element(
@@ -53,14 +53,14 @@ function tmpl($api, $cmp, $slotset, $ctx) {
                 api_element(
                   "p",
                   {
-                    key: api_key(4, item.id),
+                    key: api_key(3, item.id),
                   },
                   [api_text("X1")]
                 ),
                 api_element(
                   "p",
                   {
-                    key: api_key(5, item.id),
+                    key: api_key(4, item.id),
                   },
                   [api_text("X2")]
                 ),
@@ -73,15 +73,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       "section",
       stc3,
       api_flatten([
-        api_static_fragment($fragment2(), 8),
+        api_static_fragment($fragment2(), 6),
         api_iterator($cmp.items, function (item) {
           return api_element("div", {
-            key: api_key(9, item.id),
+            key: api_key(7, item.id),
           });
         }),
       ])
     ),
-    api_static_fragment($fragment3(), 11),
+    api_static_fragment($fragment3(), 8),
   ];
   /*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 e0d2219591..cbc6d87860 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
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             [api_text(api_dynamic_text(item))]
           );
         }),
-        api_static_fragment($fragment1(), 3),
+        api_static_fragment($fragment1(), 2),
       ])
     ),
   ];
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 e4ef1d3ca1..7035c2e558 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
@@ -24,7 +24,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             classMap: stc1,
             key: api_key(1, item.id),
           },
-          [api_static_fragment($fragment1(), 3)]
+          [api_static_fragment($fragment1(), 2)]
         );
       })
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
index 7699024623..1af11ae171 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
@@ -5,19 +5,19 @@ const stc0 = {
   key: 0,
 };
 const stc1 = {
-  key: 3,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, dc: api_dynamic_component } = $api;
   return [
     $cmp.isTrue
       ? api_dynamic_component($cmp.ctor, stc0, [
-          api_static_fragment($fragment1(), 2),
+          api_static_fragment($fragment1(), 1),
         ])
       : null,
     !$cmp.isTrue2
       ? api_dynamic_component($cmp.ctor, stc1, [
-          api_static_fragment($fragment2(), 5),
+          api_static_fragment($fragment2(), 3),
         ])
       : null,
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
index 8eaa9c4eed..718444476a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [$cmp.ifTrue ? api_static_fragment($fragment1(), 1) : null];
+  return [$cmp.ifTrue ? api_static_fragment($fragment1(), 0) : null];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
index efd0d883e9..b17480c022 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
@@ -9,9 +9,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue ? api_static_fragment($fragment1(), 2) : null,
-      $cmp.isTrue ? api_static_fragment($fragment2(), 4) : null,
-      $cmp.isTrue ? api_static_fragment($fragment3(), 6) : null,
+      $cmp.isTrue ? api_static_fragment($fragment1(), 1) : null,
+      $cmp.isTrue ? api_static_fragment($fragment2(), 2) : null,
+      $cmp.isTrue ? api_static_fragment($fragment3(), 3) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
index 4e9a6793fe..5a2e4116f4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
@@ -13,9 +13,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue ? api_static_fragment($fragment1(), 2) : null,
+      $cmp.isTrue ? api_static_fragment($fragment1(), 1) : null,
       api_text(api_dynamic_text($cmp.foo)),
-      $cmp.isTrue ? api_static_fragment($fragment2(), 4) : null,
+      $cmp.isTrue ? api_static_fragment($fragment2(), 2) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
index 45b1446d7b..93b26cd22b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
@@ -7,7 +7,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue === true ? api_static_fragment($fragment1(), 2) : null,
+      $cmp.isTrue === true ? api_static_fragment($fragment1(), 1) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
index 8eaa9c4eed..718444476a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [$cmp.ifTrue ? api_static_fragment($fragment1(), 1) : null];
+  return [$cmp.ifTrue ? api_static_fragment($fragment1(), 0) : null];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
index 8bc6fd0289..47b22593cd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<p${3}>2</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    $cmp.isTrue ? api_static_fragment($fragment1(), 1) : null,
-    !$cmp.isTrue2 ? api_static_fragment($fragment2(), 3) : null,
+    $cmp.isTrue ? api_static_fragment($fragment1(), 0) : null,
+    !$cmp.isTrue2 ? api_static_fragment($fragment2(), 1) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
index 3a8db33902..7b1ae99931 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
@@ -5,9 +5,9 @@ const $fragment3 = parseFragment`<p${3}>3</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    $cmp.isTrue ? api_static_fragment($fragment1(), 1) : null,
-    $cmp.isTrue ? api_static_fragment($fragment2(), 3) : null,
-    $cmp.isTrue ? api_static_fragment($fragment3(), 5) : null,
+    $cmp.isTrue ? api_static_fragment($fragment1(), 0) : null,
+    $cmp.isTrue ? api_static_fragment($fragment2(), 1) : null,
+    $cmp.isTrue ? api_static_fragment($fragment3(), 2) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
index 3ff5acc4d4..f9ce2179b3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
@@ -9,9 +9,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1(), 2),
-      $cmp.bar ? api_static_fragment($fragment2(), 4) : null,
-      api_static_fragment($fragment3(), 6),
+      api_static_fragment($fragment1(), 1),
+      $cmp.bar ? api_static_fragment($fragment2(), 2) : null,
+      api_static_fragment($fragment3(), 3),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
index 68e2e592c8..6cf68d2b5f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
index 979539f89f..5eb01acb7a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
@@ -1,7 +1,7 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const stc0 = {
-  key: 3,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
index 5c234fa3d9..ff41e8331c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
@@ -6,7 +6,7 @@ const $fragment4 = parseFragment`<h1${3}>inner elseif</h1>`;
 const $fragment5 = parseFragment`<h1${3}>inner else</h1>`;
 const $fragment6 = parseFragment`<h1${3}>outer else</h1>`;
 const stc0 = {
-  key: 10,
+  key: 6,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -16,28 +16,28 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.outer.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.outer.elseif1
-      ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
       : $cmp.outer.elseif2
       ? api_fragment(
           0,
           [
             $cmp.inner.if
-              ? api_fragment(5, [api_static_fragment($fragment3(), 7)], 0)
+              ? api_fragment(3, [api_static_fragment($fragment3(), 4)], 0)
               : $cmp.inner.elseif
-              ? api_fragment(5, [api_static_fragment($fragment4(), 9)], 0)
+              ? api_fragment(3, [api_static_fragment($fragment4(), 5)], 0)
               : $cmp.inner.elseif2
               ? api_fragment(
-                  5,
+                  3,
                   [api_dynamic_component($cmp.trackedProp.foo, stc0)],
                   0
                 )
-              : api_fragment(5, [api_static_fragment($fragment5(), 12)], 0),
+              : api_fragment(3, [api_static_fragment($fragment5(), 7)], 0),
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment6(), 14)], 0),
+      : api_fragment(0, [api_static_fragment($fragment6(), 8)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
index be75552536..8afefd30aa 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const $fragment2 = parseFragment`<h1${3}>elseif condition</h1>`;
 const stc0 = {
-  key: 5,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -12,9 +12,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
       : api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
index 45418a1915..c4aa7000fb 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
@@ -3,7 +3,7 @@ const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const $fragment2 = parseFragment`<h1${3}>elseif condition</h1>`;
 const $fragment3 = parseFragment`<h1${3}>else condition</h1>`;
 const stc0 = {
-  key: 5,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -13,12 +13,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
       : $cmp.visible.elseif2
       ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0)
-      : api_fragment(0, [api_static_fragment($fragment3(), 7)], 0),
+      : api_fragment(0, [api_static_fragment($fragment3(), 4)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
index ccae1ce967..5c5957a041 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
@@ -1,7 +1,7 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const stc0 = {
-  key: 3,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.visible.elseif
       ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0)
       : null,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
index bc8aa2d3cb..b8e6b7ed0f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
@@ -6,10 +6,10 @@ const stc0 = {
   key: 1,
 };
 const stc1 = {
-  key: 4,
+  key: 3,
 };
 const stc2 = {
-  key: 7,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -23,7 +23,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor1, stc0, [
-              api_static_fragment($fragment1(), 3),
+              api_static_fragment($fragment1(), 2),
             ]),
           ],
           0
@@ -33,7 +33,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor2, stc1, [
-              api_static_fragment($fragment2(), 6),
+              api_static_fragment($fragment2(), 4),
             ]),
           ],
           0
@@ -42,7 +42,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor3, stc2, [
-              api_static_fragment($fragment3(), 9),
+              api_static_fragment($fragment3(), 6),
             ]),
           ],
           0
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
index 6d8086763a..c043c0f3e7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
@@ -1,7 +1,7 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const stc0 = {
-  key: 3,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
index 3494c08b01..36c83bf3e3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
@@ -6,7 +6,7 @@ const $fragment4 = parseFragment`<h1${3}>inner elseif</h1>`;
 const $fragment5 = parseFragment`<h1${3}>inner else</h1>`;
 const $fragment6 = parseFragment`<h1${3}>outer else</h1>`;
 const stc0 = {
-  key: 10,
+  key: 6,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -16,20 +16,20 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.outer.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.outer.elseif1
-      ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
       : $cmp.outer.elseif2
       ? api_fragment(
           0,
           [
             $cmp.inner.if
-              ? api_fragment(5, [api_static_fragment($fragment3(), 7)], 0)
+              ? api_fragment(3, [api_static_fragment($fragment3(), 4)], 0)
               : $cmp.inner.elseif
-              ? api_fragment(5, [api_static_fragment($fragment4(), 9)], 0)
+              ? api_fragment(3, [api_static_fragment($fragment4(), 5)], 0)
               : $cmp.inner.elseif2
               ? api_fragment(
-                  5,
+                  3,
                   [
                     api_deprecated_dynamic_component(
                       "x-foo",
@@ -39,11 +39,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
                   ],
                   0
                 )
-              : api_fragment(5, [api_static_fragment($fragment5(), 12)], 0),
+              : api_fragment(3, [api_static_fragment($fragment5(), 7)], 0),
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment6(), 14)], 0),
+      : api_fragment(0, [api_static_fragment($fragment6(), 8)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
index 1be908b04c..24d3673c6b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const $fragment2 = parseFragment`<h1${3}>elseif condition</h1>`;
 const stc0 = {
-  key: 5,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -12,9 +12,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
index 2517f86b50..c00591fa41 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
@@ -3,7 +3,7 @@ const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const $fragment2 = parseFragment`<h1${3}>elseif condition</h1>`;
 const $fragment3 = parseFragment`<h1${3}>else condition</h1>`;
 const stc0 = {
-  key: 5,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -13,9 +13,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
       : $cmp.visible.elseif2
       ? api_fragment(
           0,
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment3(), 7)], 0),
+      : api_fragment(0, [api_static_fragment($fragment3(), 4)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
index 6c08cb607e..e5e614fa10 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
@@ -1,7 +1,7 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const stc0 = {
-  key: 3,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.visible.elseif
       ? api_fragment(
           0,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
index 857cece0b6..17cc092084 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
@@ -5,8 +5,8 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
-      : api_fragment(0, [api_static_fragment($fragment2(), 4)], 0),
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      : api_fragment(0, [api_static_fragment($fragment2(), 2)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
index 5d514421fb..6c408bcafe 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
@@ -6,10 +6,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0)
-      : api_fragment(0, [api_static_fragment($fragment3(), 6)], 0),
+      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
+      : api_fragment(0, [api_static_fragment($fragment3(), 3)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
index b2fd3f09eb..1e1658570d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
@@ -5,9 +5,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment2(), 4)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
       : null,
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
index c3f17917c1..b9a7af4592 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : null,
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
index 7721e8bf75..a95e4261f4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
@@ -2,7 +2,7 @@ import _cDefault from "c/default";
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}>Elseif!</div>`;
 const stc0 = {
-  key: 3,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -15,7 +15,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     $cmp.visible
       ? api_fragment(0, [api_text("Conditional Text")], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment1(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
index 12beb4b514..deaf2bd1ff 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
@@ -14,13 +14,13 @@ const stc2 = {
 };
 const stc3 = [];
 const stc4 = {
-  key: 5,
+  key: 4,
 };
 const stc5 = {
   attrs: {
     name: "conditional-slot",
   },
-  key: 6,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { s: api_slot, h: api_element, st: api_static_fragment } = $api;
@@ -30,7 +30,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         api_slot("conditional-slot", stc2, stc3, $slotset),
       ]),
     ]),
-    api_static_fragment($fragment1(), 4),
+    api_static_fragment($fragment1(), 3),
     api_element("div", stc4, [
       api_slot("conditional-slot", stc5, stc3, $slotset),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
index b4f68c716b..bdd6354452 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
@@ -10,19 +10,19 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     $cmp.visible
       ? api_fragment(
           0,
-          [api_text("Conditional Text"), api_static_fragment($fragment1(), 2)],
+          [api_text("Conditional Text"), api_static_fragment($fragment1(), 1)],
           0
         )
       : api_fragment(
           0,
           [
-            api_static_fragment($fragment2(), 4),
-            api_static_fragment($fragment3(), 6),
+            api_static_fragment($fragment2(), 2),
+            api_static_fragment($fragment3(), 3),
           ],
           0
         ),
-    api_static_fragment($fragment4(), 8),
-    api_static_fragment($fragment5(), 10),
+    api_static_fragment($fragment4(), 4),
+    api_static_fragment($fragment5(), 5),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
index ca63b4db3a..5756163e14 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
@@ -5,7 +5,7 @@ const stc0 = {
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1, [api_static_part(1, stc0)])];
+  return [api_static_fragment($fragment1(), 0, [api_static_part(1, stc0)])];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
index 2f68221b25..f35de3ba9a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
@@ -5,7 +5,7 @@ const stc0 = {
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1, [api_static_part(0, stc0)])];
+  return [api_static_fragment($fragment1(), 0, [api_static_part(0, stc0)])];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
index 3f2b0a6a5f..c91b881e42 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p${3}>Root</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
index 9bd15e0836..603db58d79 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
@@ -1,25 +1,25 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p${3}>Root</p>`;
 const stc0 = {
-  key: 2,
+  key: 1,
 };
 const stc1 = {
   attrs: {
     name: "named",
   },
-  key: 3,
+  key: 2,
 };
 const stc2 = {
   slotAssignment: "forward",
   attrs: {
     name: "forwarded",
   },
-  key: 4,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, t: api_text, s: api_slot } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
     api_slot("", stc0, [api_text("Default")], $slotset),
     api_slot("named", stc1, [api_text("Named")], $slotset),
     api_slot("forwarded", stc2, [api_text("Forwarded")], $slotset),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
index fc4e2555d9..fec1cbbbc3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
@@ -7,7 +7,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, dc: api_dynamic_component } = $api;
   return [
     api_dynamic_component($cmp.ctor, stc0, [
-      api_static_fragment($fragment1(), 2),
+      api_static_fragment($fragment1(), 1),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
index 93c41002df..ae1c941b06 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
@@ -26,18 +26,18 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         },
       },
       [
-        api_static_fragment($fragment1(), 2),
+        api_static_fragment($fragment1(), 1),
         api_dynamic_component(
           $cmp.ctor2,
           {
             classMap: stc0,
             props: stc1,
-            key: 3,
+            key: 2,
             on: {
               click: _m1 || ($ctx._m1 = api_bind($cmp.handleOuterClick)),
             },
           },
-          [api_static_fragment($fragment2(), 5)]
+          [api_static_fragment($fragment2(), 3)]
         ),
       ]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
index 356fa662c8..54183adc38 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
@@ -2,14 +2,14 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}>before</div>`;
 const $fragment2 = parseFragment`<div${3}>after</div>`;
 const stc0 = {
-  key: 2,
+  key: 1,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, dc: api_dynamic_component } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
     api_dynamic_component($cmp.trackedProp.foo, stc0),
-    api_static_fragment($fragment2(), 4),
+    api_static_fragment($fragment2(), 2),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
index adfd3b9f29..8ad162dc2a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
index c24ecdf50e..50c3671b8e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
index d1953b98ab..586133f66b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
@@ -5,33 +5,33 @@ const $fragment3 = parseFragment`<div${3}>Click</div>`;
 const $fragment4 = parseFragment`<div${3}>Click</div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
-  const { _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7 } = $ctx;
+  const { _m0, _m1, _m2, _m3 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(0, {
         on: {
-          a123: _m1 || ($ctx._m1 = api_bind($cmp.handleClick)),
+          a123: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment2(), 3, [
+    api_static_fragment($fragment2(), 1, [
       api_static_part(0, {
         on: {
-          foo_bar: _m3 || ($ctx._m3 = api_bind($cmp.handleClick)),
+          foo_bar: _m1 || ($ctx._m1 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment3(), 5, [
+    api_static_fragment($fragment3(), 2, [
       api_static_part(0, {
         on: {
-          foo_: _m5 || ($ctx._m5 = api_bind($cmp.handleClick)),
+          foo_: _m2 || ($ctx._m2 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment4(), 7, [
+    api_static_fragment($fragment4(), 3, [
       api_static_part(0, {
         on: {
-          a123: _m7 || ($ctx._m7 = api_bind($cmp.handleClick)),
+          a123: _m3 || ($ctx._m3 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
index d064822108..023e06170b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind(() => ($cmp.myField = "foo"))),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
index c7ccd8390c..f7236c01ce 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
@@ -9,7 +9,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
     i: api_iterator,
   } = $api;
-  const { _m0, _m1 } = $ctx;
+  const { _m0 } = $ctx;
   return api_iterator($cmp.bento, function (okazu) {
     return api_element(
       "div",
@@ -17,10 +17,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         key: api_key(0, okazu),
       },
       [
-        api_static_fragment($fragment1(), 2, [
+        api_static_fragment($fragment1(), 1, [
           api_static_part(0, {
             on: {
-              click: _m1 || ($ctx._m1 = api_bind(() => $cmp.taberu(okazu))),
+              click: _m0 || ($ctx._m0 = api_bind(() => $cmp.taberu(okazu))),
             },
           }),
         ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
index f235db3d13..8f5ed47365 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind(() => $cmp.foo++)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
index 76932871db..91cd9f7e80 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<div${3}>{}</div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
index 972f1e5314..0734edd3a2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input value="{value}"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
index edf1897cdd..d126c2120b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<div data-foo="{}"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
index c85c33e067..b0f86fd47a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
@@ -7,15 +7,15 @@ const stc0 = {
   props: {
     someTruthyValue: true,
   },
-  key: 2,
+  key: 1,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, c: api_custom_element } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
     api_custom_element("x-custom-component", _xCustomComponent, stc0),
-    api_static_fragment($fragment2(), 4),
-    api_static_fragment($fragment3(), 6),
+    api_static_fragment($fragment2(), 2),
+    api_static_fragment($fragment3(), 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
index 52c9b6d811..25fce1d650 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<lwc:invalid${3}></lwc:invalid>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
index 68e2e592c8..6cf68d2b5f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
index c05ef53b1e..7be0ab6d6a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>hello</h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
index 3d4c0602a7..840760f0bb 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><ellipse${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
index e4abfdefd8..6e7b94e177 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { c: api_custom_element, st: api_static_fragment } = $api;
   return [
     api_custom_element("x-foo", _xFoo, stc0),
-    api_static_fragment($fragment1(), 2),
+    api_static_fragment($fragment1(), 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
index 3d8b2acb3e..b8fcb61da1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><color-profile local="x"${3}></color-profile></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
index 4c6933552b..7994358f47 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<keygen name="name" challenge="some challenge"
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, t: api_text } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
     api_text("</input>"),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
index 11b823d728..565194b428 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<menu${3}><menuitem label="my-menuitem"${3}></menu>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
index aad36828da..b84457d2d8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<param name="hello" value="world"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*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 9a20d2f16c..4b65ed36a1 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
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<button${3}>New</button>`;
 const $fragment2 = parseFragment`<button${3}>[X]</button>`;
 const stc0 = {
-  key: 2,
+  key: 1,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -15,12 +15,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
     i: api_iterator,
   } = $api;
-  const { _m0, _m1 } = $ctx;
+  const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(0, {
         on: {
-          click: _m1 || ($ctx._m1 = api_bind($cmp.create)),
+          click: _m0 || ($ctx._m0 = api_bind($cmp.create)),
         },
       }),
     ]),
@@ -31,11 +31,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         return api_element(
           "li",
           {
-            key: api_key(3, task.id),
+            key: api_key(2, task.id),
           },
           [
             api_text(api_dynamic_text(task.title)),
-            api_static_fragment($fragment2(), 5, [
+            api_static_fragment($fragment2(), 3, [
               api_static_part(0, {
                 on: {
                   click: api_bind(task.delete),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
index 61813ef37a..0dc7adcdf2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<br${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
index 2ab7f79243..30e39c4ec0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
@@ -12,7 +12,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     api_slot(
       "secret-slot",
       stc0,
-      [api_static_fragment($fragment1(), "@secret-slot:2")],
+      [api_static_fragment($fragment1(), "@secret-slot:1")],
       $slotset
     ),
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
index ed9a5d803e..1b71867a5e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<table${3}><tbody${3}><tr${3}></tr></tbody></table>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
index 334d1a59d0..e9957722e5 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
@@ -6,7 +6,7 @@ const stc0 = {
   city: true,
 };
 const stc1 = {
-  key: 3,
+  key: 2,
 };
 const stc2 = [["color", "blue", false]];
 function tmpl($api, $cmp, $slotset, $ctx) {
@@ -20,14 +20,14 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         renderer: renderer,
       },
       [
-        api_static_fragment($fragment1(), 2),
+        api_static_fragment($fragment1(), 1),
         api_element("p", stc1, [
           api_text("London is the capital of "),
           api_element(
             "span",
             {
               styleDecls: stc2,
-              key: 4,
+              key: 3,
               renderer: renderer,
             },
             [api_text("England.")]
@@ -39,12 +39,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       "div",
       {
         classMap: stc0,
-        key: 5,
+        key: 4,
         renderer: renderer,
       },
       [
-        api_static_fragment($fragment2(), 7),
-        api_static_fragment($fragment3(), 9),
+        api_static_fragment($fragment2(), 5),
+        api_static_fragment($fragment3(), 6),
       ]
     ),
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
index e58f8c9fad..5b5ee9cfb2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
@@ -45,7 +45,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         },
         key: 3,
       }),
-      api_static_fragment($fragment1(), 5),
+      api_static_fragment($fragment1(), 4),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
index e5babaddc3..58d3136be1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
@@ -15,7 +15,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       [api_text("Should get custom renderer")]
     ),
-    api_static_fragment($fragment1(), 2),
+    api_static_fragment($fragment1(), 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
index 049e3cd3b6..db729a50c7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
@@ -35,7 +35,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         );
       }),
       api_element("span", stc2, [api_text("Willy Wonka")]),
-      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/scoped-slots/text-non-direct-child/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
index 59d0cc4635..2abff02f84 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
                 api_dynamic_text(item.id) + " - " + api_dynamic_text(item.name)
               ),
             ]),
-            api_static_fragment($fragment1(), 3),
+            api_static_fragment($fragment1(), 2),
           ],
           0
         );
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
index 7535f6e0f5..03f5d007f0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
@@ -11,7 +11,7 @@ const stc1 = {
   key: 1,
 };
 const stc2 = {
-  key: 4,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
@@ -20,10 +20,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       api_slot(
         "other",
         stc1,
-        [api_static_fragment($fragment1(), "@other:3")],
+        [api_static_fragment($fragment1(), "@other:2")],
         $slotset
       ),
-      api_slot("", stc2, [api_static_fragment($fragment2(), "@:6")], $slotset),
+      api_slot("", stc2, [api_static_fragment($fragment2(), "@:4")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
index c5d6aed718..c535900e4c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
@@ -5,14 +5,14 @@ const stc0 = {
   key: 0,
 };
 const stc1 = {
-  key: 3,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1(), 2),
-      api_slot("", stc1, [api_static_fragment($fragment2(), "@:5")], $slotset),
+      api_static_fragment($fragment1(), 1),
+      api_slot("", stc1, [api_static_fragment($fragment2(), "@:3")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
index cecd340c95..dffdbe8152 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
@@ -10,7 +10,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_slot("", stc1, [api_static_fragment($fragment1(), "@:3")], $slotset),
+      api_slot("", stc1, [api_static_fragment($fragment1(), "@:2")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
index 5063780183..2c48adae8c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
@@ -11,16 +11,16 @@ const stc1 = {
   attrs: {
     name: "header",
   },
-  key: 3,
+  key: 2,
 };
 const stc2 = {
-  key: 8,
+  key: 5,
 };
 const stc3 = {
   attrs: {
     name: "footer",
   },
-  key: 11,
+  key: 7,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -31,15 +31,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1(), 2),
+      api_static_fragment($fragment1(), 1),
       api_slot("header", stc1, [api_text("Default header")], $slotset),
-      api_static_fragment($fragment2(), 5),
-      api_static_fragment($fragment3(), 7),
-      api_slot("", stc2, [api_static_fragment($fragment4(), "@:10")], $slotset),
+      api_static_fragment($fragment2(), 3),
+      api_static_fragment($fragment3(), 4),
+      api_slot("", stc2, [api_static_fragment($fragment4(), "@:6")], $slotset),
       api_slot(
         "footer",
         stc3,
-        [api_static_fragment($fragment5(), "@footer:13")],
+        [api_static_fragment($fragment5(), "@footer:8")],
         $slotset
       ),
     ]),
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 af17ee531f..87ead6d93e 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
@@ -24,7 +24,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         _xB,
         stc1,
         api_flatten([
-          $cmp.isLoading ? api_static_fragment($fragment1(), 3) : null,
+          $cmp.isLoading ? api_static_fragment($fragment1(), 2) : null,
           $cmp.haveLoadedItems
             ? api_iterator($cmp.menuItems, function (item) {
                 return api_text("x");
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
index a2217812f5..c4b596393d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
@@ -16,7 +16,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       api_slot(
         "test",
         stc1,
-        [api_static_fragment($fragment1(), "@test:3")],
+        [api_static_fragment($fragment1(), "@test:2")],
         $slotset
       ),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
index 999e159ae0..a2eb31c8b7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
@@ -9,31 +9,31 @@ const stc1 = {
 };
 const stc2 = {
   slotAssignment: "",
-  key: 4,
+  key: 3,
 };
 const stc3 = {
   slotAssignment: "true",
-  key: 5,
+  key: 4,
 };
 const stc4 = {
   slotAssignment: "header",
-  key: 8,
+  key: 7,
 };
 const stc5 = {
   slotAssignment: "",
-  key: 9,
+  key: 8,
 };
 const stc6 = {
   slotAssignment: "undefined",
-  key: 10,
+  key: 9,
 };
 const stc7 = {
   slotAssignment: "null",
-  key: 11,
+  key: 10,
 };
 const stc8 = {
   slotAssignment: "",
-  key: 12,
+  key: 11,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -45,14 +45,14 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   return [
     api_element("section", stc0, [
       api_custom_element("ns-cmp", _nsCmp, stc1, [
-        api_static_fragment($fragment1(), 3),
+        api_static_fragment($fragment1(), 2),
         api_element("p", stc2, [api_text("Slot Empty String Attribute")]),
         api_element("p", stc3, [api_text("Slot Boolean Attribute")]),
         api_element(
           "p",
           {
             slotAssignment: $cmp.slot.name,
-            key: 6,
+            key: 5,
           },
           [api_text("Dynamic Slot Content")]
         ),
@@ -60,7 +60,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           "p",
           {
             slotAssignment: $cmp.slotVariable,
-            key: 7,
+            key: 6,
           },
           [api_text("Variable As Slot Assignment")]
         ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
index d5672c390a..7a082cfbd9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1 data-foo="&quot;>\\x3Cscript>alert('pwned')\\x3C/script>\\x3Ch1 foo=&quot;"${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
index 2b8ab705aa..c73f3e88f8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1 class="&quot;>\\x3Cscript>alert('pwned')\\x3C/script>\\x3Ch1 foo=&quot;${0}"${2}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
index 7b0deeae03..d31dc8554b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}><!-- --&gt;&lt;script&gt;alert(&#x27;pwned&#x27;)&lt;/script&gt; &lt;!-- --></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
index 647781d27d..a94f6aea84 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
@@ -15,7 +15,7 @@ const stc3 = {
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(4, stc0),
       api_static_part(5, stc1),
       api_static_part(6, stc2),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
index 6c057be483..2735503766 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
@@ -10,7 +10,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(4, stc0),
       api_static_part(5, {
         on: {
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
index 798c1e36c8..aed1785909 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
@@ -6,10 +6,10 @@ const $fragment4 = parseFragment`<noframes${3}><p${3}>It seems your browser does
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 1),
-    api_static_fragment($fragment2(), 3),
-    api_static_fragment($fragment3(), 5),
-    api_static_fragment($fragment4(), 7),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment3(), 2),
+    api_static_fragment($fragment4(), 3),
   ];
   /*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 79cd2a498f..0f2190d494 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: 5,
+  key: 4,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             {
               key: api_key(2, row.id),
             },
-            [api_static_fragment($fragment1(), 4)]
+            [api_static_fragment($fragment1(), 3)]
           );
         })
       ),
@@ -39,9 +39,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           return api_element(
             "tr",
             {
-              key: api_key(6, row.id),
+              key: api_key(5, row.id),
             },
-            [api_static_fragment($fragment2(), 8)]
+            [api_static_fragment($fragment2(), 6)]
           );
         })
       ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
index f23f1e095d..da67653d21 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickFoo)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
index 68e2e592c8..6cf68d2b5f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
index 66a14feb5a..3790870b45 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(2, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickFoo)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
index 38aac25c75..76e1c4be38 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" this comment should not be static "),
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1(), 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
index 94ba77afb5..55b5a36d6e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
@@ -2,12 +2,12 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
-  const { _m0, _m1 } = $ctx;
+  const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 1, [
+    api_static_fragment($fragment1(), 0, [
       api_static_part(0, {
         on: {
-          click: _m1 || ($ctx._m1 = api_bind($cmp.onClick)),
+          click: _m0 || ($ctx._m0 = api_bind($cmp.onClick)),
         },
         ref: "foo",
       }),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
index 8106703a8d..14fc6c0095 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/><path${3}/></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
index 3844ccdf54..3e1ab2d4a8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg xmlns="http://www.w3.org/2000/svg"${3}><g${3}><path${3}/><path${3}/></g></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
index cacedbd553..53f14f8ded 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/><path${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
index da9039b97e..b3852c19d2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
@@ -10,10 +10,10 @@ const $fragment8 = parseFragment`<xmp${3}>Escape \\\`me\`</xmp>`;
 const $fragment9 = parseFragment`<div data-message="Escape \${me}"${3}></div>`;
 const $fragment10 = parseFragment`<div${3}><!-- Escape \${me} --></div>`;
 const stc0 = {
-  key: 16,
+  key: 8,
 };
 const stc1 = {
-  key: 21,
+  key: 11,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -23,19 +23,19 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     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_static_fragment($fragment5(), 9),
-    api_static_fragment($fragment6(), 11),
-    api_static_fragment($fragment7(), 13),
-    api_static_fragment($fragment8(), 15),
+    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment3(), 2),
+    api_static_fragment($fragment4(), 3),
+    api_static_fragment($fragment5(), 4),
+    api_static_fragment($fragment6(), 5),
+    api_static_fragment($fragment7(), 6),
+    api_static_fragment($fragment8(), 7),
     api_element("div", stc0, [
       api_text("Escape $" + api_dynamic_text($cmp.me)),
     ]),
-    api_static_fragment($fragment9(), 18),
-    api_static_fragment($fragment10(), 20),
+    api_static_fragment($fragment9(), 9),
+    api_static_fragment($fragment10(), 10),
     api_element("xmp", stc1, [
       api_text("Escape $" + api_dynamic_text($cmp.me)),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
index 5acc4e0a05..ca0f810579 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>Hello &lt;div&gt;world&lt;/div&gt;</h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
index f1ec39c5a3..a85bfee3cf 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
@@ -36,7 +36,7 @@ const stc2 = {
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink",
   },
-  key: 19,
+  key: 12,
   svg: true,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
@@ -58,7 +58,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             key: 2,
             svg: true,
           },
-          [api_static_fragment($fragment1(), 4)]
+          [api_static_fragment($fragment1(), 3)]
         ),
         api_element(
           "filter",
@@ -67,10 +67,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
               id: api_scoped_id("blend"),
               primitiveUnits: "objectBoundingBox",
             },
-            key: 5,
+            key: 4,
             svg: true,
           },
-          [api_static_fragment($fragment2(), 7)]
+          [api_static_fragment($fragment2(), 5)]
         ),
         api_element(
           "filter",
@@ -79,20 +79,20 @@ function tmpl($api, $cmp, $slotset, $ctx) {
               id: api_scoped_id("merge"),
               primitiveUnits: "objectBoundingBox",
             },
-            key: 8,
+            key: 6,
             svg: true,
           },
-          [api_static_fragment($fragment3(), 10)]
+          [api_static_fragment($fragment3(), 7)]
         ),
       ]),
-      api_static_fragment($fragment4(), 12),
-      api_static_fragment($fragment5(), 14),
-      api_static_fragment($fragment6(), 16),
-      api_static_fragment($fragment7(), 18),
+      api_static_fragment($fragment4(), 8),
+      api_static_fragment($fragment5(), 9),
+      api_static_fragment($fragment6(), 10),
+      api_static_fragment($fragment7(), 11),
     ]),
     api_element("svg", stc2, [
-      api_static_fragment($fragment8(), 21),
-      api_static_fragment($fragment9(), 23),
+      api_static_fragment($fragment8(), 13),
+      api_static_fragment($fragment9(), 14),
       api_element(
         "filter",
         {
@@ -104,17 +104,17 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             width: "200",
             height: "120",
           },
-          key: 24,
+          key: 15,
           svg: true,
         },
         [
-          api_static_fragment($fragment10(), 26),
-          api_static_fragment($fragment11(), 28),
-          api_static_fragment($fragment12(), 30),
-          api_static_fragment($fragment13(), 32),
-          api_static_fragment($fragment14(), 34),
-          api_static_fragment($fragment15(), 36),
-          api_static_fragment($fragment16(), 38),
+          api_static_fragment($fragment10(), 16),
+          api_static_fragment($fragment11(), 17),
+          api_static_fragment($fragment12(), 18),
+          api_static_fragment($fragment13(), 19),
+          api_static_fragment($fragment14(), 20),
+          api_static_fragment($fragment15(), 21),
+          api_static_fragment($fragment16(), 22),
         ]
       ),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
index 7176823b18..72189f4935 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg width="706" height="180"${3}><g transform="translate(3,3)"${3}><g transform="translate(250,0)"${3}><foreignObject width="200" height="36" xlink:href="javascript:alert(1)"${3}><a${3}>x</a></foreignObject></g></g></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
index e0cd87012f..fb4cdd5536 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
@@ -33,12 +33,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             svg: true,
           },
           [
-            api_static_fragment($fragment1(), 4),
-            api_static_fragment($fragment2(), 6),
+            api_static_fragment($fragment1(), 3),
+            api_static_fragment($fragment2(), 4),
           ]
         ),
       ]),
-      api_static_fragment($fragment3(), 8),
+      api_static_fragment($fragment3(), 5),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
index 7ae9fee8a8..98ebbdab24 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"${3}><rect width="100%" height="100%" fill="red"${3}/><circle cx="150" cy="100" r="80" fill="green"${3}/><text x="150" y="125" font-size="60" text-anchor="middle" fill="white"${3}>SVG</text></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
index 1326481299..fd95ce91e4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
index db01003aeb..7abeaa9537 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg width="200" height="200"${3}><image xlink:href="/foo.png" x="1" y="2" height="200" width="200"${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
index cd8ceeb32b..abda121e5c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg${3}><a${3}/><circle${3}/><defs${3}/><desc${3}/><ellipse${3}/><filter${3}/><g${3}/><line${3}/><marker${3}/><mask${3}/><path${3}/><pattern${3}/><polygon${3}/><polyline${3}/><rect${3}/><stop${3}/><symbol${3}/><text${3}/><title${3}/><tspan${3}/><use${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 1)];
+  return [api_static_fragment($fragment1(), 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);

From 6bf0a32ecfa6e789c3b4306548ce7627ba60e9b8 Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Wed, 13 Mar 2024 11:28:23 -0700
Subject: [PATCH 03/10] refactor: make parseFragment invocation happen inside
 st function

---
 packages/@lwc/engine-core/src/framework/api.ts         | 3 ++-
 packages/@lwc/template-compiler/src/codegen/codegen.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts
index 56dd76a252..e2d861de83 100644
--- a/packages/@lwc/engine-core/src/framework/api.ts
+++ b/packages/@lwc/engine-core/src/framework/api.ts
@@ -84,8 +84,9 @@ function ssf(slotName: unknown, factory: (value: any, key: any) => VFragment): V
 }
 
 // [st]atic node
-function st(fragment: Element, key: Key, parts?: VStaticPart[]): VStatic {
+function st(fragmentFactory: () => Element, key: Key, parts?: VStaticPart[]): VStatic {
     const owner = getVMBeingRendered()!;
+    const fragment = fragmentFactory();
     const vnode: VStatic = {
         type: VNodeType.Static,
         sel: undefined,
diff --git a/packages/@lwc/template-compiler/src/codegen/codegen.ts b/packages/@lwc/template-compiler/src/codegen/codegen.ts
index ce452894f9..017a18bfaa 100644
--- a/packages/@lwc/template-compiler/src/codegen/codegen.ts
+++ b/packages/@lwc/template-compiler/src/codegen/codegen.ts
@@ -566,7 +566,7 @@ export default class CodeGen {
             expr,
         });
 
-        const args: t.Expression[] = [t.callExpression(identifier, []), t.literal(key)];
+        const args: t.Expression[] = [identifier, t.literal(key)];
 
         // Only add the third argument (staticParts) if this element needs it
         const staticParts = this.genStaticParts(element);

From 30ef52272e860e21efb40f72002ebcb8cbae1863 Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Wed, 13 Mar 2024 11:30:13 -0700
Subject: [PATCH 04/10] chore: update unit tests

---
 .../attributes/attribute-allow/expected.js    |   2 +-
 .../attribute-crossorigin/expected.js         |   6 +-
 .../attributes/attribute-part/expected.js     |   2 +-
 .../hidden-global-attr/expected.js            |   8 +-
 .../boolean-attribute/required/expected.js    |   8 +-
 .../boolean-attributes-valid/expected.js      |   2 +-
 .../fixtures/attributes/boolean/expected.js   |   2 +-
 .../fixtures/attributes/class/expected.js     |   8 +-
 .../attributes/dataset-complex/expected.js    |   2 +-
 .../fixtures/attributes/dataset/expected.js   |   2 +-
 .../attributes/error-empty-value/expected.js  |   2 +-
 .../fixtures/attributes/escaped/expected.js   |   2 +-
 .../attributes/html-input/expected.js         |   2 +-
 .../attributes/html-tag-invalid/expected.js   |   2 +-
 .../fixtures/attributes/html-tag/expected.js  |   2 +-
 .../attributes/mixed-props-attrs/expected.js  |   4 +-
 .../expression/not-scoped/actual.html         |   9 +
 .../scoped-id/expression/not-scoped/ast.json  | 197 ++++++++++++
 .../expression/not-scoped/expected.js         |  19 ++
 .../expression/not-scoped/metadata.json       |  59 ++++
 .../scoped-id/expression/scoped/actual.html   |  13 +
 .../scoped-id/expression/scoped/ast.json      | 301 ++++++++++++++++++
 .../scoped-id/expression/scoped/expected.js   |  23 ++
 .../scoped-id/expression/scoped/metadata.json |   3 +
 .../expected.js                               |   2 +-
 .../__tests__/fixtures/base/class/expected.js |   2 +-
 .../fixtures/base/html-entities/expected.js   |   4 +-
 .../fixtures/base/style-important/expected.js |   2 +-
 .../fixtures/base/style-static/expected.js    |   4 +-
 .../fixtures/base/template/expected.js        |   2 +-
 .../fixtures/comments/basic/expected.js       |   2 +-
 .../comments/directive-if/expected.js         |   4 +-
 .../preserve-html-comments-option/expected.js |   2 +-
 .../fixtures/comments/slots/expected.js       |   2 +-
 .../directive-dynamic/sibbling/expected.js    |   4 +-
 .../directive-for-each/children/expected.js   |   6 +-
 .../inline-sibling/expected.js                |   2 +-
 .../directive-for-each/inline/expected.js     |   2 +-
 .../dynamic-component/expected.js             |   4 +-
 .../inline-both-standard-element/expected.js  |   2 +-
 .../directive-if/inline-multiple/expected.js  |   6 +-
 .../inline-sibling-static/expected.js         |   4 +-
 .../directive-if/strict-true/expected.js      |   2 +-
 .../directive-if/template-both/expected.js    |   2 +-
 .../directive-if/template-if-else/expected.js |   4 +-
 .../template-multiple/expected.js             |   6 +-
 .../template-sibiling/expected.js             |   6 +-
 .../outside-iterator/expected.js              |   2 +-
 .../dynamic-components/if-else/expected.js    |   2 +-
 .../if-elseif-else-nested/expected.js         |  12 +-
 .../if-elseif-else/expected.js                |   4 +-
 .../if-elseif-multiple/expected.js            |   6 +-
 .../dynamic-components/if-elseif/expected.js  |   2 +-
 .../dynamic-components/inline/expected.js     |   6 +-
 .../dynamic/if-else/expected.js               |   2 +-
 .../dynamic/if-elseif-else-nested/expected.js |  12 +-
 .../dynamic/if-elseif-else/expected.js        |   4 +-
 .../dynamic/if-elseif-multiple/expected.js    |   6 +-
 .../dynamic/if-elseif/expected.js             |   2 +-
 .../if-else/html-elements/expected.js         |   4 +-
 .../if-elseif-else/html-elements/expected.js  |   6 +-
 .../if-elseif/html-elements/expected.js       |   4 +-
 .../if-only/html-elements/expected.js         |   2 +-
 .../mixed-elements/expected.js                |   2 +-
 .../simple/expected.js                        |   2 +-
 .../with-siblings/expected.js                 |  10 +-
 .../static-container/expected.js              |   2 +-
 .../fixtures/directive-ref/valid/expected.js  |   2 +-
 .../shadow-template/expected.js               |   2 +-
 .../template/expected.js                      |   2 +-
 .../valid/children/expected.js                |   2 +-
 .../valid/nested/expected.js                  |   4 +-
 .../valid/siblings/expected.js                |   4 +-
 .../fixtures/events/static/expected.js        |   2 +-
 .../__tests__/fixtures/events/tag/expected.js |   2 +-
 .../fixtures/events/type-valid/expected.js    |   8 +-
 .../valid/assignment-inside-arrow/expected.js |   2 +-
 .../valid/iterator/expected.js                |   2 +-
 .../valid/update-inside-arrow/expected.js     |   2 +-
 .../expression/empty-paranthesis/expected.js  |   4 +-
 .../fixtures/expression/escaped/expected.js   |   2 +-
 .../quoted-empty-paranthesis/expected.js      |   4 +-
 .../html-tags/unkown-element/expected.js      |   6 +-
 .../fixtures/lwc-tags/invalid/expected.js     |   2 +-
 .../double-close-div/expected.js              |   2 +-
 .../expected.js                               |   2 +-
 .../stranded-open-svg-ellipse/expected.js     |   2 +-
 .../attribute-with-equal/expected.js          |   2 +-
 .../regression/dashed-html-tag/expected.js    |   2 +-
 .../keygen/expected.js                        |   4 +-
 .../menuitem/expected.js                      |   2 +-
 .../param/expected.js                         |   2 +-
 .../handler-memoization/expected.js           |   4 +-
 .../invalid-html-recovery/expected.js         |   4 +-
 .../slot-name-with-dash/expected.js           |   2 +-
 .../regression/table-with-tr/expected.js      |   2 +-
 .../config/multiple-tagname/expected.js       |   7 +-
 .../config/tag-with-namespace/expected.js     |   2 +-
 .../tagname-with-attributes/expected.js       |   2 +-
 .../parent-mixed-slot-content/expected.js     |   2 +-
 .../text-non-direct-child/expected.js         |   2 +-
 .../definition-sibiling-slot/expected.js      |   4 +-
 .../definition-sibling-static/expected.js     |   4 +-
 .../fixtures/slots/definition/expected.js     |   2 +-
 .../fixtures/slots/mixed-1/expected.js        |  10 +-
 .../fixtures/slots/mixed/expected.js          |   2 +-
 .../fixtures/slots/usage-named/expected.js    |   2 +-
 .../fixtures/slots/usage/expected.js          |   2 +-
 .../static-content/attr-escaping/expected.js  |   2 +-
 .../class-attr-escaping/expected.js           |   2 +-
 .../comment-escaping/expected.js              |   2 +-
 .../static-content/deep-data/expected.js      |   2 +-
 .../no-escaping-tags/expected.js              |   8 +-
 .../static-content/no-th-or-td/expected.js    |   4 +-
 .../expected.js                               |   2 +-
 .../preserve-comments-off/expected.js         |   2 +-
 .../expected.js                               |   2 +-
 .../preserve-comments-on/expected.js          |   2 +-
 .../static-content/shallow-data/expected.js   |   2 +-
 .../static-content/svg-within-div/expected.js |   2 +-
 .../static-content/svg-within-g/expected.js   |   2 +-
 .../fixtures/static-content/svg/expected.js   |   2 +-
 .../template-string-escape/expected.js        |  20 +-
 .../static-content/text-escaping/expected.js  |   2 +-
 .../__tests__/fixtures/svg/filter/expected.js |  32 +-
 .../fixtures/svg/foreign-object/expected.js   |   2 +-
 .../fixtures/svg/linear-gradient/expected.js  |   6 +-
 .../fixtures/svg/simple-svg/expected.js       |   2 +-
 .../svg/stranded-open-path/expected.js        |   2 +-
 .../fixtures/svg/valid-image/expected.js      |   2 +-
 .../fixtures/svg/valid-svg/expected.js        |   2 +-
 131 files changed, 849 insertions(+), 228 deletions(-)
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/actual.html
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/ast.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/expected.js
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/metadata.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/actual.html
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/ast.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/expected.js
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/metadata.json

diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
index e26ce8effd..8e24d7ceaf 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<iframe allow="geolocation https://google-developers.appspot.com"${3}></iframe>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
index f631fd92a6..3667cfb04d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
@@ -5,9 +5,9 @@ const $fragment3 = parseFragment`<audio src="http://www.example.com/video.mp3" c
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
-    api_static_fragment($fragment3(), 2),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment3, 2),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
index ce0e6040c4..8492e169a7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div part="foo"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
index 7422c0e3d7..63eb18c620 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
@@ -36,9 +36,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     c: api_custom_element,
   } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
-    api_static_fragment($fragment3(), 2),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment3, 2),
     api_element(
       "p",
       {
@@ -49,7 +49,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       [api_text("computed value, should be resolved in component")]
     ),
-    api_static_fragment($fragment4(), 4),
+    api_static_fragment($fragment4, 4),
     api_custom_element("x-foo", _xFoo, stc0, [api_text("boolean present")]),
     api_custom_element("x-foo", _xFoo, stc1, [
       api_text("empty string, should be true"),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
index 2ed486e5c1..54d94e9a16 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
@@ -39,9 +39,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     c: api_custom_element,
   } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
-    api_static_fragment($fragment3(), 2),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment3, 2),
     api_element("input", {
       attrs: {
         required: $cmp.computed ? "" : null,
@@ -49,7 +49,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       props: stc0,
       key: 3,
     }),
-    api_static_fragment($fragment4(), 4),
+    api_static_fragment($fragment4, 4),
     api_custom_element("x-foo", _xFoo, stc1, [api_text("boolean present")]),
     api_custom_element("x-foo", _xFoo, stc2, [api_text("empty string")]),
     api_custom_element("x-foo", _xFoo, stc3, [api_text("string value")]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
index 750bac1af4..e504373def 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
   } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
     api_custom_element("x-foo", _xFoo, stc0),
     api_element("input", {
       attrs: {
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
index 3b771d2830..55ea5e6e30 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
@@ -3,7 +3,7 @@ const $fragment1 = parseFragment`<p hidden${3}>x</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
     api_element("input", {
       attrs: {
         readonly: $cmp.getReadOnly ? "" : null,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
index d9b35d7ea6..885ac8958e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
@@ -6,10 +6,10 @@ const $fragment4 = parseFragment`<div class="foo   bar${0}"${2}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
-    api_static_fragment($fragment3(), 2),
-    api_static_fragment($fragment4(), 3),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment3, 2),
+    api_static_fragment($fragment4, 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
index 18bf13612a..216021e0b4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p data--bar-baz="xyz"${3}></p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
index 22567153cc..39547ba64e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p data-foo="1" data-bar-baz="xyz"${3}></p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
index b204a0205a..672ca0cd19 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
@@ -11,7 +11,7 @@ const stc0 = {
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, c: api_custom_element } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
     api_custom_element("foo-bar", _fooBar, stc0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
index c2a21a4ec1..cdb07fc216 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input title="\\\\{myValue}"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
index 5b9be83e12..84923c2489 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input type="checkbox" required readonly minlength="5" maxlength="10" checked${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
index e22007f718..2e9d084762 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><textarea minlength="1" maxlength="5" unknown-attr="should-error"${3}>x</textarea></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
index 2f6d5698c4..edd2cf9991 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p title="x" aria-hidden="x"${3}>x</p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
index a76c61dbba..afb00a1bac 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
@@ -37,7 +37,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       key: 0,
     }),
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1, 1),
     api_custom_element("ns-bar", _nsBar, {
       classMap: stc0,
       attrs: stc1,
@@ -66,7 +66,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         svg: true,
       }),
     ]),
-    api_static_fragment($fragment2(), 5),
+    api_static_fragment($fragment2, 5),
     api_element("div", {
       className: $cmp.foo,
       attrs: stc3,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/actual.html
new file mode 100644
index 0000000000..897c302fbc
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/actual.html
@@ -0,0 +1,9 @@
+<template>
+    <div 
+        aria-described-by={scoped}
+        aria-active-descendant={scoped}
+        aria-error-message={scoped}
+        aria-flow-to={scoped}
+        aria-labelled-by={scoped}
+    ></div>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/ast.json
new file mode 100644
index 0000000000..15c2e18168
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/ast.json
@@ -0,0 +1,197 @@
+{
+    "root": {
+        "type": "Root",
+        "location": {
+            "startLine": 1,
+            "startColumn": 1,
+            "endLine": 9,
+            "endColumn": 12,
+            "start": 0,
+            "end": 219,
+            "startTag": {
+                "startLine": 1,
+                "startColumn": 1,
+                "endLine": 1,
+                "endColumn": 11,
+                "start": 0,
+                "end": 10
+            },
+            "endTag": {
+                "startLine": 9,
+                "startColumn": 1,
+                "endLine": 9,
+                "endColumn": 12,
+                "start": 208,
+                "end": 219
+            }
+        },
+        "directives": [],
+        "children": [
+            {
+                "type": "Element",
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 8,
+                    "endColumn": 12,
+                    "start": 15,
+                    "end": 207,
+                    "startTag": {
+                        "startLine": 2,
+                        "startColumn": 5,
+                        "endLine": 8,
+                        "endColumn": 6,
+                        "start": 15,
+                        "end": 201
+                    },
+                    "endTag": {
+                        "startLine": 8,
+                        "startColumn": 6,
+                        "endLine": 8,
+                        "endColumn": 12,
+                        "start": 201,
+                        "end": 207
+                    }
+                },
+                "attributes": [
+                    {
+                        "type": "Attribute",
+                        "name": "aria-described-by",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 7,
+                            "name": "scoped",
+                            "location": {
+                                "startLine": 3,
+                                "startColumn": 9,
+                                "endLine": 3,
+                                "endColumn": 35,
+                                "start": 29,
+                                "end": 55
+                            }
+                        },
+                        "location": {
+                            "startLine": 3,
+                            "startColumn": 9,
+                            "endLine": 3,
+                            "endColumn": 35,
+                            "start": 29,
+                            "end": 55
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-active-descendant",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 7,
+                            "name": "scoped",
+                            "location": {
+                                "startLine": 4,
+                                "startColumn": 9,
+                                "endLine": 4,
+                                "endColumn": 40,
+                                "start": 64,
+                                "end": 95
+                            }
+                        },
+                        "location": {
+                            "startLine": 4,
+                            "startColumn": 9,
+                            "endLine": 4,
+                            "endColumn": 40,
+                            "start": 64,
+                            "end": 95
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-error-message",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 7,
+                            "name": "scoped",
+                            "location": {
+                                "startLine": 5,
+                                "startColumn": 9,
+                                "endLine": 5,
+                                "endColumn": 36,
+                                "start": 104,
+                                "end": 131
+                            }
+                        },
+                        "location": {
+                            "startLine": 5,
+                            "startColumn": 9,
+                            "endLine": 5,
+                            "endColumn": 36,
+                            "start": 104,
+                            "end": 131
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-flow-to",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 7,
+                            "name": "scoped",
+                            "location": {
+                                "startLine": 6,
+                                "startColumn": 9,
+                                "endLine": 6,
+                                "endColumn": 30,
+                                "start": 140,
+                                "end": 161
+                            }
+                        },
+                        "location": {
+                            "startLine": 6,
+                            "startColumn": 9,
+                            "endLine": 6,
+                            "endColumn": 30,
+                            "start": 140,
+                            "end": 161
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-labelled-by",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 7,
+                            "name": "scoped",
+                            "location": {
+                                "startLine": 7,
+                                "startColumn": 9,
+                                "endLine": 7,
+                                "endColumn": 34,
+                                "start": 170,
+                                "end": 195
+                            }
+                        },
+                        "location": {
+                            "startLine": 7,
+                            "startColumn": 9,
+                            "endLine": 7,
+                            "endColumn": 34,
+                            "start": 170,
+                            "end": 195
+                        }
+                    }
+                ],
+                "properties": [],
+                "directives": [],
+                "listeners": [],
+                "children": []
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/expected.js
new file mode 100644
index 0000000000..9bb9c92e8a
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/expected.js
@@ -0,0 +1,19 @@
+import { registerTemplate } from "lwc";
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const { h: api_element } = $api;
+  return [
+    api_element("div", {
+      attrs: {
+        "aria-described-by": $cmp.scoped,
+        "aria-active-descendant": $cmp.scoped,
+        "aria-error-message": $cmp.scoped,
+        "aria-flow-to": $cmp.scoped,
+        "aria-labelled-by": $cmp.scoped,
+      },
+      key: 0,
+    }),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/metadata.json
new file mode 100644
index 0000000000..2bc87eaa03
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/metadata.json
@@ -0,0 +1,59 @@
+{
+    "warnings": [
+        {
+            "code": 1057,
+            "message": "LWC1057: aria-described-by is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
+            "level": 2,
+            "location": {
+                "line": 3,
+                "column": 9,
+                "start": 29,
+                "length": 26
+            }
+        },
+        {
+            "code": 1057,
+            "message": "LWC1057: aria-active-descendant is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
+            "level": 2,
+            "location": {
+                "line": 4,
+                "column": 9,
+                "start": 64,
+                "length": 31
+            }
+        },
+        {
+            "code": 1057,
+            "message": "LWC1057: aria-error-message is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
+            "level": 2,
+            "location": {
+                "line": 5,
+                "column": 9,
+                "start": 104,
+                "length": 27
+            }
+        },
+        {
+            "code": 1057,
+            "message": "LWC1057: aria-flow-to is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
+            "level": 2,
+            "location": {
+                "line": 6,
+                "column": 9,
+                "start": 140,
+                "length": 21
+            }
+        },
+        {
+            "code": 1057,
+            "message": "LWC1057: aria-labelled-by is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
+            "level": 2,
+            "location": {
+                "line": 7,
+                "column": 9,
+                "start": 170,
+                "length": 25
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/actual.html
new file mode 100644
index 0000000000..638023991a
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/actual.html
@@ -0,0 +1,13 @@
+<template>
+    <div 
+        aria-describedby={foo}
+        aria-activedescendant={foo}
+        aria-errormessage={foo}
+        aria-flowto={foo}
+        aria-labelledby={foo}
+        aria-controls={foo}
+        aria-details={foo}
+        aria-owns={foo}
+        for={foo}
+    ></div>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/ast.json
new file mode 100644
index 0000000000..a8f56262f8
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/ast.json
@@ -0,0 +1,301 @@
+{
+    "root": {
+        "type": "Root",
+        "location": {
+            "startLine": 1,
+            "startColumn": 1,
+            "endLine": 13,
+            "endColumn": 12,
+            "start": 0,
+            "end": 296,
+            "startTag": {
+                "startLine": 1,
+                "startColumn": 1,
+                "endLine": 1,
+                "endColumn": 11,
+                "start": 0,
+                "end": 10
+            },
+            "endTag": {
+                "startLine": 13,
+                "startColumn": 1,
+                "endLine": 13,
+                "endColumn": 12,
+                "start": 285,
+                "end": 296
+            }
+        },
+        "directives": [],
+        "children": [
+            {
+                "type": "Element",
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 12,
+                    "endColumn": 12,
+                    "start": 15,
+                    "end": 284,
+                    "startTag": {
+                        "startLine": 2,
+                        "startColumn": 5,
+                        "endLine": 12,
+                        "endColumn": 6,
+                        "start": 15,
+                        "end": 278
+                    },
+                    "endTag": {
+                        "startLine": 12,
+                        "startColumn": 6,
+                        "endLine": 12,
+                        "endColumn": 12,
+                        "start": 278,
+                        "end": 284
+                    }
+                },
+                "attributes": [
+                    {
+                        "type": "Attribute",
+                        "name": "aria-describedby",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 3,
+                                "startColumn": 9,
+                                "endLine": 3,
+                                "endColumn": 31,
+                                "start": 29,
+                                "end": 51
+                            }
+                        },
+                        "location": {
+                            "startLine": 3,
+                            "startColumn": 9,
+                            "endLine": 3,
+                            "endColumn": 31,
+                            "start": 29,
+                            "end": 51
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-activedescendant",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 4,
+                                "startColumn": 9,
+                                "endLine": 4,
+                                "endColumn": 36,
+                                "start": 60,
+                                "end": 87
+                            }
+                        },
+                        "location": {
+                            "startLine": 4,
+                            "startColumn": 9,
+                            "endLine": 4,
+                            "endColumn": 36,
+                            "start": 60,
+                            "end": 87
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-errormessage",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 5,
+                                "startColumn": 9,
+                                "endLine": 5,
+                                "endColumn": 32,
+                                "start": 96,
+                                "end": 119
+                            }
+                        },
+                        "location": {
+                            "startLine": 5,
+                            "startColumn": 9,
+                            "endLine": 5,
+                            "endColumn": 32,
+                            "start": 96,
+                            "end": 119
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-flowto",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 6,
+                                "startColumn": 9,
+                                "endLine": 6,
+                                "endColumn": 26,
+                                "start": 128,
+                                "end": 145
+                            }
+                        },
+                        "location": {
+                            "startLine": 6,
+                            "startColumn": 9,
+                            "endLine": 6,
+                            "endColumn": 26,
+                            "start": 128,
+                            "end": 145
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-labelledby",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 7,
+                                "startColumn": 9,
+                                "endLine": 7,
+                                "endColumn": 30,
+                                "start": 154,
+                                "end": 175
+                            }
+                        },
+                        "location": {
+                            "startLine": 7,
+                            "startColumn": 9,
+                            "endLine": 7,
+                            "endColumn": 30,
+                            "start": 154,
+                            "end": 175
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-controls",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 8,
+                                "startColumn": 9,
+                                "endLine": 8,
+                                "endColumn": 28,
+                                "start": 184,
+                                "end": 203
+                            }
+                        },
+                        "location": {
+                            "startLine": 8,
+                            "startColumn": 9,
+                            "endLine": 8,
+                            "endColumn": 28,
+                            "start": 184,
+                            "end": 203
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-details",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 9,
+                                "startColumn": 9,
+                                "endLine": 9,
+                                "endColumn": 27,
+                                "start": 212,
+                                "end": 230
+                            }
+                        },
+                        "location": {
+                            "startLine": 9,
+                            "startColumn": 9,
+                            "endLine": 9,
+                            "endColumn": 27,
+                            "start": 212,
+                            "end": 230
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "aria-owns",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 10,
+                                "startColumn": 9,
+                                "endLine": 10,
+                                "endColumn": 24,
+                                "start": 239,
+                                "end": 254
+                            }
+                        },
+                        "location": {
+                            "startLine": 10,
+                            "startColumn": 9,
+                            "endLine": 10,
+                            "endColumn": 24,
+                            "start": 239,
+                            "end": 254
+                        }
+                    },
+                    {
+                        "type": "Attribute",
+                        "name": "for",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "foo",
+                            "location": {
+                                "startLine": 11,
+                                "startColumn": 9,
+                                "endLine": 11,
+                                "endColumn": 18,
+                                "start": 263,
+                                "end": 272
+                            }
+                        },
+                        "location": {
+                            "startLine": 11,
+                            "startColumn": 9,
+                            "endLine": 11,
+                            "endColumn": 18,
+                            "start": 263,
+                            "end": 272
+                        }
+                    }
+                ],
+                "properties": [],
+                "directives": [],
+                "listeners": [],
+                "children": []
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/expected.js
new file mode 100644
index 0000000000..9ae73e1463
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/expected.js
@@ -0,0 +1,23 @@
+import { registerTemplate } from "lwc";
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const { gid: api_scoped_id, h: api_element } = $api;
+  return [
+    api_element("div", {
+      attrs: {
+        "aria-describedby": api_scoped_id($cmp.foo),
+        "aria-activedescendant": api_scoped_id($cmp.foo),
+        "aria-errormessage": api_scoped_id($cmp.foo),
+        "aria-flowto": api_scoped_id($cmp.foo),
+        "aria-labelledby": api_scoped_id($cmp.foo),
+        "aria-controls": api_scoped_id($cmp.foo),
+        "aria-details": api_scoped_id($cmp.foo),
+        "aria-owns": api_scoped_id($cmp.foo),
+        for: api_scoped_id($cmp.foo),
+      },
+      key: 0,
+    }),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/metadata.json
@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
index 0b03df6c0b..2c33801dcb 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<somefancytag min="4"${3}></somefancytag>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
index 89f0d6d4d8..0ed2538cb0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section class="foo bar   baz-fiz${0}"${2}></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
index e04be2bc94..61f4a2b8c1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<p${3}>const { foo } = bar;</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
index 334bb3e2c2..e13da44b6a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div style="background: blue !important; color: red; opacity: 0.5 !important"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
index 0639f31be4..c8eb33ad21 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<section style="--my-color: blue; color: var(--
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
index c91b881e42..64c3dfbaaf 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p${3}>Root</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
index d8a474a8c9..6d49ff0ea3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" This is an HTML comment "),
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
index a2fa603b1d..0f903989c3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
@@ -5,9 +5,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     $cmp.truthyValue ? api_comment(" HTML comment inside if:true ") : null,
-    $cmp.truthyValue ? api_static_fragment($fragment1(), 0) : null,
+    $cmp.truthyValue ? api_static_fragment($fragment1, 0) : null,
     !$cmp.truthyValue ? api_comment(" HTML comment inside if:false ") : null,
-    !$cmp.truthyValue ? api_static_fragment($fragment2(), 1) : null,
+    !$cmp.truthyValue ? api_static_fragment($fragment2, 1) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
index d8a474a8c9..6d49ff0ea3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" This is an HTML comment "),
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
index cbcc1d1b95..f8773a368c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
@@ -13,7 +13,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   return [
     api_custom_element("x-child", _xChild, stc0, [
       api_comment(" HTML comment inside slot "),
-      api_static_fragment($fragment1(), 1),
+      api_static_fragment($fragment1, 1),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
index f6db852bdf..573ac66fa7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
@@ -8,9 +8,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, ddc: api_deprecated_dynamic_component } =
     $api;
   return [
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
     api_deprecated_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0),
-    api_static_fragment($fragment2(), 2),
+    api_static_fragment($fragment2, 2),
   ];
   /*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 617e2ea198..1e85247a76 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
@@ -39,7 +39,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         api_iterator($cmp.items, function (item) {
           return api_text("X");
         }),
-        api_static_fragment($fragment1(), 1),
+        api_static_fragment($fragment1, 1),
       ])
     ),
     api_element(
@@ -73,7 +73,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       "section",
       stc3,
       api_flatten([
-        api_static_fragment($fragment2(), 6),
+        api_static_fragment($fragment2, 6),
         api_iterator($cmp.items, function (item) {
           return api_element("div", {
             key: api_key(7, item.id),
@@ -81,7 +81,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         }),
       ])
     ),
-    api_static_fragment($fragment3(), 8),
+    api_static_fragment($fragment3, 8),
   ];
   /*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 cbc6d87860..0cd654a244 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
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             [api_text(api_dynamic_text(item))]
           );
         }),
-        api_static_fragment($fragment1(), 2),
+        api_static_fragment($fragment1, 2),
       ])
     ),
   ];
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 7035c2e558..66c9a3500e 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
@@ -24,7 +24,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             classMap: stc1,
             key: api_key(1, item.id),
           },
-          [api_static_fragment($fragment1(), 2)]
+          [api_static_fragment($fragment1, 2)]
         );
       })
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
index 1af11ae171..725b91fb7d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
@@ -12,12 +12,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   return [
     $cmp.isTrue
       ? api_dynamic_component($cmp.ctor, stc0, [
-          api_static_fragment($fragment1(), 1),
+          api_static_fragment($fragment1, 1),
         ])
       : null,
     !$cmp.isTrue2
       ? api_dynamic_component($cmp.ctor, stc1, [
-          api_static_fragment($fragment2(), 3),
+          api_static_fragment($fragment2, 3),
         ])
       : null,
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
index 718444476a..26ac06b959 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [$cmp.ifTrue ? api_static_fragment($fragment1(), 0) : null];
+  return [$cmp.ifTrue ? api_static_fragment($fragment1, 0) : null];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
index b17480c022..c22ed406dd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
@@ -9,9 +9,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue ? api_static_fragment($fragment1(), 1) : null,
-      $cmp.isTrue ? api_static_fragment($fragment2(), 2) : null,
-      $cmp.isTrue ? api_static_fragment($fragment3(), 3) : null,
+      $cmp.isTrue ? api_static_fragment($fragment1, 1) : null,
+      $cmp.isTrue ? api_static_fragment($fragment2, 2) : null,
+      $cmp.isTrue ? api_static_fragment($fragment3, 3) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
index 5a2e4116f4..a5c600f08a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
@@ -13,9 +13,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue ? api_static_fragment($fragment1(), 1) : null,
+      $cmp.isTrue ? api_static_fragment($fragment1, 1) : null,
       api_text(api_dynamic_text($cmp.foo)),
-      $cmp.isTrue ? api_static_fragment($fragment2(), 2) : null,
+      $cmp.isTrue ? api_static_fragment($fragment2, 2) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
index 93b26cd22b..cc193ef72b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
@@ -7,7 +7,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue === true ? api_static_fragment($fragment1(), 1) : null,
+      $cmp.isTrue === true ? api_static_fragment($fragment1, 1) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
index 718444476a..26ac06b959 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [$cmp.ifTrue ? api_static_fragment($fragment1(), 0) : null];
+  return [$cmp.ifTrue ? api_static_fragment($fragment1, 0) : null];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
index 47b22593cd..5373464e99 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<p${3}>2</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    $cmp.isTrue ? api_static_fragment($fragment1(), 0) : null,
-    !$cmp.isTrue2 ? api_static_fragment($fragment2(), 1) : null,
+    $cmp.isTrue ? api_static_fragment($fragment1, 0) : null,
+    !$cmp.isTrue2 ? api_static_fragment($fragment2, 1) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
index 7b1ae99931..b804f0b258 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
@@ -5,9 +5,9 @@ const $fragment3 = parseFragment`<p${3}>3</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    $cmp.isTrue ? api_static_fragment($fragment1(), 0) : null,
-    $cmp.isTrue ? api_static_fragment($fragment2(), 1) : null,
-    $cmp.isTrue ? api_static_fragment($fragment3(), 2) : null,
+    $cmp.isTrue ? api_static_fragment($fragment1, 0) : null,
+    $cmp.isTrue ? api_static_fragment($fragment2, 1) : null,
+    $cmp.isTrue ? api_static_fragment($fragment3, 2) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
index f9ce2179b3..3c7decb9d8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
@@ -9,9 +9,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1(), 1),
-      $cmp.bar ? api_static_fragment($fragment2(), 2) : null,
-      api_static_fragment($fragment3(), 3),
+      api_static_fragment($fragment1, 1),
+      $cmp.bar ? api_static_fragment($fragment2, 2) : null,
+      api_static_fragment($fragment3, 3),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
index 6cf68d2b5f..be4e1b2b4c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
index 5eb01acb7a..0611cf5ff8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
index ff41e8331c..a036831089 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
@@ -16,28 +16,28 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.outer.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.outer.elseif1
-      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
       : $cmp.outer.elseif2
       ? api_fragment(
           0,
           [
             $cmp.inner.if
-              ? api_fragment(3, [api_static_fragment($fragment3(), 4)], 0)
+              ? api_fragment(3, [api_static_fragment($fragment3, 4)], 0)
               : $cmp.inner.elseif
-              ? api_fragment(3, [api_static_fragment($fragment4(), 5)], 0)
+              ? api_fragment(3, [api_static_fragment($fragment4, 5)], 0)
               : $cmp.inner.elseif2
               ? api_fragment(
                   3,
                   [api_dynamic_component($cmp.trackedProp.foo, stc0)],
                   0
                 )
-              : api_fragment(3, [api_static_fragment($fragment5(), 7)], 0),
+              : api_fragment(3, [api_static_fragment($fragment5, 7)], 0),
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment6(), 8)], 0),
+      : api_fragment(0, [api_static_fragment($fragment6, 8)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
index 8afefd30aa..6ecea093ee 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
@@ -12,9 +12,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
       : api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
index c4aa7000fb..5513772c28 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
@@ -13,12 +13,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
       : $cmp.visible.elseif2
       ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0)
-      : api_fragment(0, [api_static_fragment($fragment3(), 4)], 0),
+      : api_fragment(0, [api_static_fragment($fragment3, 4)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
index 5c5957a041..730136e9a0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.visible.elseif
       ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0)
       : null,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
index b8e6b7ed0f..5f39efa0b3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
@@ -23,7 +23,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor1, stc0, [
-              api_static_fragment($fragment1(), 2),
+              api_static_fragment($fragment1, 2),
             ]),
           ],
           0
@@ -33,7 +33,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor2, stc1, [
-              api_static_fragment($fragment2(), 4),
+              api_static_fragment($fragment2, 4),
             ]),
           ],
           0
@@ -42,7 +42,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor3, stc2, [
-              api_static_fragment($fragment3(), 6),
+              api_static_fragment($fragment3, 6),
             ]),
           ],
           0
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
index c043c0f3e7..49811f78fa 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
index 36c83bf3e3..435f3964be 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
@@ -16,17 +16,17 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.outer.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.outer.elseif1
-      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
       : $cmp.outer.elseif2
       ? api_fragment(
           0,
           [
             $cmp.inner.if
-              ? api_fragment(3, [api_static_fragment($fragment3(), 4)], 0)
+              ? api_fragment(3, [api_static_fragment($fragment3, 4)], 0)
               : $cmp.inner.elseif
-              ? api_fragment(3, [api_static_fragment($fragment4(), 5)], 0)
+              ? api_fragment(3, [api_static_fragment($fragment4, 5)], 0)
               : $cmp.inner.elseif2
               ? api_fragment(
                   3,
@@ -39,11 +39,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
                   ],
                   0
                 )
-              : api_fragment(3, [api_static_fragment($fragment5(), 7)], 0),
+              : api_fragment(3, [api_static_fragment($fragment5, 7)], 0),
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment6(), 8)], 0),
+      : api_fragment(0, [api_static_fragment($fragment6, 8)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
index 24d3673c6b..102a27c95d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
@@ -12,9 +12,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
index c00591fa41..e333686129 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
@@ -13,9 +13,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
       : $cmp.visible.elseif2
       ? api_fragment(
           0,
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment3(), 4)], 0),
+      : api_fragment(0, [api_static_fragment($fragment3, 4)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
index e5e614fa10..77b3227bb8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.visible.elseif
       ? api_fragment(
           0,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
index 17cc092084..bed6cbb50e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
@@ -5,8 +5,8 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
-      : api_fragment(0, [api_static_fragment($fragment2(), 2)], 0),
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      : api_fragment(0, [api_static_fragment($fragment2, 2)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
index 6c408bcafe..47998b90bc 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
@@ -6,10 +6,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
-      : api_fragment(0, [api_static_fragment($fragment3(), 3)], 0),
+      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
+      : api_fragment(0, [api_static_fragment($fragment3, 3)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
index 1e1658570d..7c2fe1cf44 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
@@ -5,9 +5,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment2(), 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
       : null,
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
index b9a7af4592..226c2cee27 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : null,
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
index a95e4261f4..880bc8c4c9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
@@ -15,7 +15,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     $cmp.visible
       ? api_fragment(0, [api_text("Conditional Text")], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment1(), 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
index deaf2bd1ff..d2af5c4864 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
@@ -30,7 +30,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         api_slot("conditional-slot", stc2, stc3, $slotset),
       ]),
     ]),
-    api_static_fragment($fragment1(), 3),
+    api_static_fragment($fragment1, 3),
     api_element("div", stc4, [
       api_slot("conditional-slot", stc5, stc3, $slotset),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
index bdd6354452..9b95720e5f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
@@ -10,19 +10,19 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     $cmp.visible
       ? api_fragment(
           0,
-          [api_text("Conditional Text"), api_static_fragment($fragment1(), 1)],
+          [api_text("Conditional Text"), api_static_fragment($fragment1, 1)],
           0
         )
       : api_fragment(
           0,
           [
-            api_static_fragment($fragment2(), 2),
-            api_static_fragment($fragment3(), 3),
+            api_static_fragment($fragment2, 2),
+            api_static_fragment($fragment3, 3),
           ],
           0
         ),
-    api_static_fragment($fragment4(), 4),
-    api_static_fragment($fragment5(), 5),
+    api_static_fragment($fragment4, 4),
+    api_static_fragment($fragment5, 5),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
index 5756163e14..b3d93061ff 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
@@ -5,7 +5,7 @@ const stc0 = {
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0, [api_static_part(1, stc0)])];
+  return [api_static_fragment($fragment1, 0, [api_static_part(1, stc0)])];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
index f35de3ba9a..1c14b7b2e0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
@@ -5,7 +5,7 @@ const stc0 = {
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0, [api_static_part(0, stc0)])];
+  return [api_static_fragment($fragment1, 0, [api_static_part(0, stc0)])];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
index c91b881e42..64c3dfbaaf 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p${3}>Root</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
index 603db58d79..5b8e3a05e2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
@@ -19,7 +19,7 @@ const stc2 = {
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, t: api_text, s: api_slot } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
     api_slot("", stc0, [api_text("Default")], $slotset),
     api_slot("named", stc1, [api_text("Named")], $slotset),
     api_slot("forwarded", stc2, [api_text("Forwarded")], $slotset),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
index fec1cbbbc3..fb2fe6493b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
@@ -7,7 +7,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, dc: api_dynamic_component } = $api;
   return [
     api_dynamic_component($cmp.ctor, stc0, [
-      api_static_fragment($fragment1(), 1),
+      api_static_fragment($fragment1, 1),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
index ae1c941b06..e6dcbad36a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
@@ -26,7 +26,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         },
       },
       [
-        api_static_fragment($fragment1(), 1),
+        api_static_fragment($fragment1, 1),
         api_dynamic_component(
           $cmp.ctor2,
           {
@@ -37,7 +37,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
               click: _m1 || ($ctx._m1 = api_bind($cmp.handleOuterClick)),
             },
           },
-          [api_static_fragment($fragment2(), 3)]
+          [api_static_fragment($fragment2, 3)]
         ),
       ]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
index 54183adc38..75aed7d7e4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
@@ -7,9 +7,9 @@ const stc0 = {
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, dc: api_dynamic_component } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
     api_dynamic_component($cmp.trackedProp.foo, stc0),
-    api_static_fragment($fragment2(), 2),
+    api_static_fragment($fragment2, 2),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
index 8ad162dc2a..a011e064e2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
index 50c3671b8e..7df34559bc 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
index 586133f66b..443c201525 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
@@ -7,28 +7,28 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1, _m2, _m3 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(0, {
         on: {
           a123: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment2(), 1, [
+    api_static_fragment($fragment2, 1, [
       api_static_part(0, {
         on: {
           foo_bar: _m1 || ($ctx._m1 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment3(), 2, [
+    api_static_fragment($fragment3, 2, [
       api_static_part(0, {
         on: {
           foo_: _m2 || ($ctx._m2 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment4(), 3, [
+    api_static_fragment($fragment4, 3, [
       api_static_part(0, {
         on: {
           a123: _m3 || ($ctx._m3 = api_bind($cmp.handleClick)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
index 023e06170b..f31b91b0a3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind(() => ($cmp.myField = "foo"))),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
index f7236c01ce..d921c20db9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
@@ -17,7 +17,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         key: api_key(0, okazu),
       },
       [
-        api_static_fragment($fragment1(), 1, [
+        api_static_fragment($fragment1, 1, [
           api_static_part(0, {
             on: {
               click: _m0 || ($ctx._m0 = api_bind(() => $cmp.taberu(okazu))),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
index 8f5ed47365..19ca020fd7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind(() => $cmp.foo++)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
index 91cd9f7e80..aee9561f4d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<div${3}>{}</div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
index 0734edd3a2..07efcc3c86 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input value="{value}"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
index d126c2120b..d3a547d5c7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<div data-foo="{}"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
index b0f86fd47a..454ada5f39 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
@@ -12,10 +12,10 @@ const stc0 = {
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, c: api_custom_element } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
     api_custom_element("x-custom-component", _xCustomComponent, stc0),
-    api_static_fragment($fragment2(), 2),
-    api_static_fragment($fragment3(), 3),
+    api_static_fragment($fragment2, 2),
+    api_static_fragment($fragment3, 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
index 25fce1d650..19b928a5e9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<lwc:invalid${3}></lwc:invalid>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
index 6cf68d2b5f..be4e1b2b4c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
index 7be0ab6d6a..dd8cc3e7c0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>hello</h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
index 840760f0bb..9f787e02fb 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><ellipse${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
index 6e7b94e177..e95316984a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { c: api_custom_element, st: api_static_fragment } = $api;
   return [
     api_custom_element("x-foo", _xFoo, stc0),
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
index b8fcb61da1..511b1c1c87 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><color-profile local="x"${3}></color-profile></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
index 7994358f47..9906043a31 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<keygen name="name" challenge="some challenge"
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, t: api_text } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
     api_text("</input>"),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
index 565194b428..0cf8b3a883 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<menu${3}><menuitem label="my-menuitem"${3}></menu>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
index b84457d2d8..cec475588a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<param name="hello" value="world"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*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 4b65ed36a1..ee725aa6fd 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
@@ -17,7 +17,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(0, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.create)),
@@ -35,7 +35,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           },
           [
             api_text(api_dynamic_text(task.title)),
-            api_static_fragment($fragment2(), 3, [
+            api_static_fragment($fragment2, 3, [
               api_static_part(0, {
                 on: {
                   click: api_bind(task.delete),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
index 0dc7adcdf2..99504a9c07 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<br${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
index 30e39c4ec0..b21885cad2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
@@ -12,7 +12,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     api_slot(
       "secret-slot",
       stc0,
-      [api_static_fragment($fragment1(), "@secret-slot:1")],
+      [api_static_fragment($fragment1, "@secret-slot:1")],
       $slotset
     ),
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
index 1b71867a5e..a84a516394 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<table${3}><tbody${3}><tr${3}></tr></tbody></table>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
index e9957722e5..0395c4b33a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
@@ -20,7 +20,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         renderer: renderer,
       },
       [
-        api_static_fragment($fragment1(), 1),
+        api_static_fragment($fragment1, 1),
         api_element("p", stc1, [
           api_text("London is the capital of "),
           api_element(
@@ -42,10 +42,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         key: 4,
         renderer: renderer,
       },
-      [
-        api_static_fragment($fragment2(), 5),
-        api_static_fragment($fragment3(), 6),
-      ]
+      [api_static_fragment($fragment2, 5), api_static_fragment($fragment3, 6)]
     ),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
index 5b5ee9cfb2..3a4219b01b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
@@ -45,7 +45,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         },
         key: 3,
       }),
-      api_static_fragment($fragment1(), 4),
+      api_static_fragment($fragment1, 4),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
index 58d3136be1..d13b1380a9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
@@ -15,7 +15,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       [api_text("Should get custom renderer")]
     ),
-    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment1, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
index db729a50c7..44d128e4ac 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
@@ -35,7 +35,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         );
       }),
       api_element("span", stc2, [api_text("Willy Wonka")]),
-      api_static_fragment($fragment1(), 3),
+      api_static_fragment($fragment1, 3),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
index 2abff02f84..cb43721b74 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
                 api_dynamic_text(item.id) + " - " + api_dynamic_text(item.name)
               ),
             ]),
-            api_static_fragment($fragment1(), 2),
+            api_static_fragment($fragment1, 2),
           ],
           0
         );
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
index 03f5d007f0..385b20b7d8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
@@ -20,10 +20,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       api_slot(
         "other",
         stc1,
-        [api_static_fragment($fragment1(), "@other:2")],
+        [api_static_fragment($fragment1, "@other:2")],
         $slotset
       ),
-      api_slot("", stc2, [api_static_fragment($fragment2(), "@:4")], $slotset),
+      api_slot("", stc2, [api_static_fragment($fragment2, "@:4")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
index c535900e4c..1abae59233 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
@@ -11,8 +11,8 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1(), 1),
-      api_slot("", stc1, [api_static_fragment($fragment2(), "@:3")], $slotset),
+      api_static_fragment($fragment1, 1),
+      api_slot("", stc1, [api_static_fragment($fragment2, "@:3")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
index dffdbe8152..e4424cd47b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
@@ -10,7 +10,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_slot("", stc1, [api_static_fragment($fragment1(), "@:2")], $slotset),
+      api_slot("", stc1, [api_static_fragment($fragment1, "@:2")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
index 2c48adae8c..da3fba48b7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
@@ -31,15 +31,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1(), 1),
+      api_static_fragment($fragment1, 1),
       api_slot("header", stc1, [api_text("Default header")], $slotset),
-      api_static_fragment($fragment2(), 3),
-      api_static_fragment($fragment3(), 4),
-      api_slot("", stc2, [api_static_fragment($fragment4(), "@:6")], $slotset),
+      api_static_fragment($fragment2, 3),
+      api_static_fragment($fragment3, 4),
+      api_slot("", stc2, [api_static_fragment($fragment4, "@:6")], $slotset),
       api_slot(
         "footer",
         stc3,
-        [api_static_fragment($fragment5(), "@footer:8")],
+        [api_static_fragment($fragment5, "@footer:8")],
         $slotset
       ),
     ]),
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 87ead6d93e..89d6dc4ba9 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
@@ -24,7 +24,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         _xB,
         stc1,
         api_flatten([
-          $cmp.isLoading ? api_static_fragment($fragment1(), 2) : null,
+          $cmp.isLoading ? api_static_fragment($fragment1, 2) : null,
           $cmp.haveLoadedItems
             ? api_iterator($cmp.menuItems, function (item) {
                 return api_text("x");
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
index c4b596393d..d991969473 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
@@ -16,7 +16,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       api_slot(
         "test",
         stc1,
-        [api_static_fragment($fragment1(), "@test:2")],
+        [api_static_fragment($fragment1, "@test:2")],
         $slotset
       ),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
index a2eb31c8b7..8204708156 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
@@ -45,7 +45,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   return [
     api_element("section", stc0, [
       api_custom_element("ns-cmp", _nsCmp, stc1, [
-        api_static_fragment($fragment1(), 2),
+        api_static_fragment($fragment1, 2),
         api_element("p", stc2, [api_text("Slot Empty String Attribute")]),
         api_element("p", stc3, [api_text("Slot Boolean Attribute")]),
         api_element(
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
index 7a082cfbd9..0785c1df02 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1 data-foo="&quot;>\\x3Cscript>alert('pwned')\\x3C/script>\\x3Ch1 foo=&quot;"${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
index c73f3e88f8..83bd40c2be 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1 class="&quot;>\\x3Cscript>alert('pwned')\\x3C/script>\\x3Ch1 foo=&quot;${0}"${2}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
index d31dc8554b..520cc20945 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}><!-- --&gt;&lt;script&gt;alert(&#x27;pwned&#x27;)&lt;/script&gt; &lt;!-- --></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
index 2735503766..1c3c5265b7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
@@ -10,7 +10,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(4, stc0),
       api_static_part(5, {
         on: {
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
index aed1785909..b00ce75590 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
@@ -6,10 +6,10 @@ const $fragment4 = parseFragment`<noframes${3}><p${3}>It seems your browser does
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
-    api_static_fragment($fragment3(), 2),
-    api_static_fragment($fragment4(), 3),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment3, 2),
+    api_static_fragment($fragment4, 3),
   ];
   /*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 0f2190d494..23648fc5a1 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
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             {
               key: api_key(2, row.id),
             },
-            [api_static_fragment($fragment1(), 3)]
+            [api_static_fragment($fragment1, 3)]
           );
         })
       ),
@@ -41,7 +41,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             {
               key: api_key(5, row.id),
             },
-            [api_static_fragment($fragment2(), 6)]
+            [api_static_fragment($fragment2, 6)]
           );
         })
       ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
index da67653d21..f40fa7f92e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickFoo)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
index 6cf68d2b5f..be4e1b2b4c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
index 3790870b45..02ae7c0f6f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(2, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickFoo)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
index 76e1c4be38..b3029324ae 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" this comment should not be static "),
-    api_static_fragment($fragment1(), 0),
+    api_static_fragment($fragment1, 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
index 55b5a36d6e..bdfb188bcd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(0, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClick)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
index 14fc6c0095..8f8be41b4f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/><path${3}/></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
index 3e1ab2d4a8..360ec52f53 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg xmlns="http://www.w3.org/2000/svg"${3}><g${3}><path${3}/><path${3}/></g></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
index 53f14f8ded..d957e28b1b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/><path${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
index b3852c19d2..bf2ddf0a9d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
@@ -23,19 +23,19 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
   } = $api;
   return [
-    api_static_fragment($fragment1(), 0),
-    api_static_fragment($fragment2(), 1),
-    api_static_fragment($fragment3(), 2),
-    api_static_fragment($fragment4(), 3),
-    api_static_fragment($fragment5(), 4),
-    api_static_fragment($fragment6(), 5),
-    api_static_fragment($fragment7(), 6),
-    api_static_fragment($fragment8(), 7),
+    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment3, 2),
+    api_static_fragment($fragment4, 3),
+    api_static_fragment($fragment5, 4),
+    api_static_fragment($fragment6, 5),
+    api_static_fragment($fragment7, 6),
+    api_static_fragment($fragment8, 7),
     api_element("div", stc0, [
       api_text("Escape $" + api_dynamic_text($cmp.me)),
     ]),
-    api_static_fragment($fragment9(), 9),
-    api_static_fragment($fragment10(), 10),
+    api_static_fragment($fragment9, 9),
+    api_static_fragment($fragment10, 10),
     api_element("xmp", stc1, [
       api_text("Escape $" + api_dynamic_text($cmp.me)),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
index ca0f810579..d78c2995b1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>Hello &lt;div&gt;world&lt;/div&gt;</h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
index a85bfee3cf..f69862ed3e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
@@ -58,7 +58,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             key: 2,
             svg: true,
           },
-          [api_static_fragment($fragment1(), 3)]
+          [api_static_fragment($fragment1, 3)]
         ),
         api_element(
           "filter",
@@ -70,7 +70,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             key: 4,
             svg: true,
           },
-          [api_static_fragment($fragment2(), 5)]
+          [api_static_fragment($fragment2, 5)]
         ),
         api_element(
           "filter",
@@ -82,17 +82,17 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             key: 6,
             svg: true,
           },
-          [api_static_fragment($fragment3(), 7)]
+          [api_static_fragment($fragment3, 7)]
         ),
       ]),
-      api_static_fragment($fragment4(), 8),
-      api_static_fragment($fragment5(), 9),
-      api_static_fragment($fragment6(), 10),
-      api_static_fragment($fragment7(), 11),
+      api_static_fragment($fragment4, 8),
+      api_static_fragment($fragment5, 9),
+      api_static_fragment($fragment6, 10),
+      api_static_fragment($fragment7, 11),
     ]),
     api_element("svg", stc2, [
-      api_static_fragment($fragment8(), 13),
-      api_static_fragment($fragment9(), 14),
+      api_static_fragment($fragment8, 13),
+      api_static_fragment($fragment9, 14),
       api_element(
         "filter",
         {
@@ -108,13 +108,13 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           svg: true,
         },
         [
-          api_static_fragment($fragment10(), 16),
-          api_static_fragment($fragment11(), 17),
-          api_static_fragment($fragment12(), 18),
-          api_static_fragment($fragment13(), 19),
-          api_static_fragment($fragment14(), 20),
-          api_static_fragment($fragment15(), 21),
-          api_static_fragment($fragment16(), 22),
+          api_static_fragment($fragment10, 16),
+          api_static_fragment($fragment11, 17),
+          api_static_fragment($fragment12, 18),
+          api_static_fragment($fragment13, 19),
+          api_static_fragment($fragment14, 20),
+          api_static_fragment($fragment15, 21),
+          api_static_fragment($fragment16, 22),
         ]
       ),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
index 72189f4935..45e4644ba4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg width="706" height="180"${3}><g transform="translate(3,3)"${3}><g transform="translate(250,0)"${3}><foreignObject width="200" height="36" xlink:href="javascript:alert(1)"${3}><a${3}>x</a></foreignObject></g></g></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
index fb4cdd5536..804763049d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
@@ -33,12 +33,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             svg: true,
           },
           [
-            api_static_fragment($fragment1(), 3),
-            api_static_fragment($fragment2(), 4),
+            api_static_fragment($fragment1, 3),
+            api_static_fragment($fragment2, 4),
           ]
         ),
       ]),
-      api_static_fragment($fragment3(), 5),
+      api_static_fragment($fragment3, 5),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
index 98ebbdab24..1f3cf1a610 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"${3}><rect width="100%" height="100%" fill="red"${3}/><circle cx="150" cy="100" r="80" fill="green"${3}/><text x="150" y="125" font-size="60" text-anchor="middle" fill="white"${3}>SVG</text></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
index fd95ce91e4..33e2db4f18 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
index 7abeaa9537..84534c11c4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg width="200" height="200"${3}><image xlink:href="/foo.png" x="1" y="2" height="200" width="200"${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
index abda121e5c..e2c17ac566 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg${3}><a${3}/><circle${3}/><defs${3}/><desc${3}/><ellipse${3}/><filter${3}/><g${3}/><line${3}/><marker${3}/><mask${3}/><path${3}/><pattern${3}/><polygon${3}/><polyline${3}/><rect${3}/><stop${3}/><symbol${3}/><text${3}/><title${3}/><tspan${3}/><use${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1(), 0)];
+  return [api_static_fragment($fragment1, 0)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);

From f704afad74db69bbc45bdf3ea7f0463df1ce964c Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Wed, 13 Mar 2024 11:31:15 -0700
Subject: [PATCH 05/10] chore: update unit test

---
 .../fixtures/static-content/deep-data-ref-only/expected.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
index a94f6aea84..a2c7270ed4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
@@ -15,7 +15,7 @@ const stc3 = {
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1(), 0, [
+    api_static_fragment($fragment1, 0, [
       api_static_part(4, stc0),
       api_static_part(5, stc1),
       api_static_part(6, stc2),

From 7c28fe9a24f0848d9de962899ac42e19daa0402f Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Wed, 13 Mar 2024 12:52:10 -0700
Subject: [PATCH 06/10] fix: revert template compiler databag changes :(

---
 .../attributes/attribute-allow/expected.js    |  2 +-
 .../attribute-crossorigin/expected.js         |  6 +--
 .../attributes/attribute-part/expected.js     |  2 +-
 .../hidden-global-attr/expected.js            | 20 +++++-----
 .../boolean-attribute/required/expected.js    | 20 +++++-----
 .../boolean-attributes-valid/expected.js      |  6 +--
 .../fixtures/attributes/boolean/expected.js   |  4 +-
 .../fixtures/attributes/class/expected.js     |  8 ++--
 .../attributes/dataset-complex/expected.js    |  2 +-
 .../fixtures/attributes/dataset/expected.js   |  2 +-
 .../attributes/error-empty-value/expected.js  |  4 +-
 .../fixtures/attributes/escaped/expected.js   |  2 +-
 .../attributes/html-input/expected.js         |  2 +-
 .../attributes/html-tag-invalid/expected.js   |  2 +-
 .../fixtures/attributes/html-tag/expected.js  |  2 +-
 .../attributes/mixed-props-attrs/expected.js  | 12 +++---
 .../expected.js                               |  2 +-
 .../__tests__/fixtures/base/class/expected.js |  2 +-
 .../fixtures/base/html-entities/expected.js   |  4 +-
 .../fixtures/base/style-important/expected.js |  2 +-
 .../fixtures/base/style-static/expected.js    |  4 +-
 .../fixtures/base/template/expected.js        |  2 +-
 .../fixtures/comments/basic/expected.js       |  2 +-
 .../comments/directive-if/expected.js         |  4 +-
 .../preserve-html-comments-option/expected.js |  2 +-
 .../fixtures/comments/slots/expected.js       |  2 +-
 .../directive-dynamic/sibbling/expected.js    |  6 +--
 .../directive-for-each/children/expected.js   | 16 ++++----
 .../inline-sibling/expected.js                |  2 +-
 .../directive-for-each/inline/expected.js     |  2 +-
 .../dynamic-component/expected.js             |  6 +--
 .../inline-both-standard-element/expected.js  |  2 +-
 .../directive-if/inline-multiple/expected.js  |  6 +--
 .../inline-sibling-static/expected.js         |  4 +-
 .../directive-if/strict-true/expected.js      |  2 +-
 .../directive-if/template-both/expected.js    |  2 +-
 .../directive-if/template-if-else/expected.js |  4 +-
 .../template-multiple/expected.js             |  6 +--
 .../template-sibiling/expected.js             |  6 +--
 .../outside-iterator/expected.js              |  2 +-
 .../dynamic-components/if-else/expected.js    |  4 +-
 .../if-elseif-else-nested/expected.js         | 16 ++++----
 .../if-elseif-else/expected.js                |  6 +--
 .../if-elseif-multiple/expected.js            |  8 ++--
 .../dynamic-components/if-elseif/expected.js  |  4 +-
 .../dynamic-components/inline/expected.js     | 10 ++---
 .../dynamic/if-else/expected.js               |  4 +-
 .../dynamic/if-elseif-else-nested/expected.js | 16 ++++----
 .../dynamic/if-elseif-else/expected.js        |  6 +--
 .../dynamic/if-elseif-multiple/expected.js    |  8 ++--
 .../dynamic/if-elseif/expected.js             |  4 +-
 .../if-else/html-elements/expected.js         |  4 +-
 .../if-elseif-else/html-elements/expected.js  |  6 +--
 .../if-elseif/html-elements/expected.js       |  4 +-
 .../if-only/html-elements/expected.js         |  2 +-
 .../mixed-elements/expected.js                |  4 +-
 .../simple/expected.js                        |  6 +--
 .../with-siblings/expected.js                 | 10 ++---
 .../static-container/expected.js              |  2 +-
 .../fixtures/directive-ref/valid/expected.js  |  2 +-
 .../shadow-template/expected.js               |  2 +-
 .../template/expected.js                      |  8 ++--
 .../valid/children/expected.js                |  2 +-
 .../valid/nested/expected.js                  |  6 +--
 .../valid/siblings/expected.js                |  6 +--
 .../fixtures/events/static/expected.js        |  2 +-
 .../__tests__/fixtures/events/tag/expected.js |  2 +-
 .../fixtures/events/type-valid/expected.js    | 18 ++++-----
 .../valid/assignment-inside-arrow/expected.js |  2 +-
 .../valid/iterator/expected.js                |  6 +--
 .../valid/update-inside-arrow/expected.js     |  2 +-
 .../expression/empty-paranthesis/expected.js  |  4 +-
 .../fixtures/expression/escaped/expected.js   |  2 +-
 .../quoted-empty-paranthesis/expected.js      |  4 +-
 .../html-tags/unkown-element/expected.js      |  8 ++--
 .../fixtures/lwc-tags/invalid/expected.js     |  2 +-
 .../double-close-div/expected.js              |  2 +-
 .../expected.js                               |  2 +-
 .../stranded-open-svg-ellipse/expected.js     |  2 +-
 .../attribute-with-equal/expected.js          |  2 +-
 .../regression/dashed-html-tag/expected.js    |  2 +-
 .../keygen/expected.js                        |  4 +-
 .../menuitem/expected.js                      |  2 +-
 .../param/expected.js                         |  2 +-
 .../handler-memoization/expected.js           | 12 +++---
 .../invalid-html-recovery/expected.js         |  4 +-
 .../slot-name-with-dash/expected.js           |  2 +-
 .../regression/table-with-tr/expected.js      |  2 +-
 .../config/multiple-tagname/expected.js       | 10 ++---
 .../config/tag-with-namespace/expected.js     |  2 +-
 .../tagname-with-attributes/expected.js       |  2 +-
 .../parent-mixed-slot-content/expected.js     |  2 +-
 .../text-non-direct-child/expected.js         |  2 +-
 .../definition-sibiling-slot/expected.js      |  6 +--
 .../definition-sibling-static/expected.js     |  6 +--
 .../fixtures/slots/definition/expected.js     |  2 +-
 .../fixtures/slots/mixed-1/expected.js        | 16 ++++----
 .../fixtures/slots/mixed/expected.js          |  2 +-
 .../fixtures/slots/usage-named/expected.js    |  2 +-
 .../fixtures/slots/usage/expected.js          | 20 +++++-----
 .../static-content/attr-escaping/expected.js  |  2 +-
 .../class-attr-escaping/expected.js           |  2 +-
 .../comment-escaping/expected.js              |  2 +-
 .../deep-data-ref-only/expected.js            |  2 +-
 .../static-content/deep-data/expected.js      |  2 +-
 .../no-escaping-tags/expected.js              |  8 ++--
 .../static-content/no-th-or-td/expected.js    |  8 ++--
 .../expected.js                               |  2 +-
 .../preserve-comments-off/expected.js         |  2 +-
 .../expected.js                               |  2 +-
 .../preserve-comments-on/expected.js          |  2 +-
 .../static-content/shallow-data/expected.js   |  6 +--
 .../static-content/svg-within-div/expected.js |  2 +-
 .../static-content/svg-within-g/expected.js   |  2 +-
 .../fixtures/static-content/svg/expected.js   |  2 +-
 .../template-string-escape/expected.js        | 24 +++++------
 .../static-content/text-escaping/expected.js  |  2 +-
 .../__tests__/fixtures/svg/filter/expected.js | 40 +++++++++----------
 .../fixtures/svg/foreign-object/expected.js   |  2 +-
 .../fixtures/svg/linear-gradient/expected.js  |  6 +--
 .../fixtures/svg/simple-svg/expected.js       |  2 +-
 .../svg/stranded-open-path/expected.js        |  2 +-
 .../fixtures/svg/valid-image/expected.js      |  2 +-
 .../fixtures/svg/valid-svg/expected.js        |  2 +-
 .../template-compiler/src/codegen/index.ts    |  5 ++-
 125 files changed, 317 insertions(+), 316 deletions(-)

diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
index 8e24d7ceaf..705bc456b5 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-allow/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<iframe allow="geolocation https://google-developers.appspot.com"${3}></iframe>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
index 3667cfb04d..cb9280e256 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-crossorigin/expected.js
@@ -5,9 +5,9 @@ const $fragment3 = parseFragment`<audio src="http://www.example.com/video.mp3" c
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
-    api_static_fragment($fragment3, 2),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
+    api_static_fragment($fragment3, 5),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
index 8492e169a7..49183fca2a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-part/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div part="foo"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
index 63eb18c620..520240d635 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
@@ -8,25 +8,25 @@ const stc0 = {
   props: {
     hidden: true,
   },
-  key: 5,
+  key: 9,
 };
 const stc1 = {
   props: {
     hidden: true,
   },
-  key: 6,
+  key: 10,
 };
 const stc2 = {
   props: {
     hidden: true,
   },
-  key: 7,
+  key: 11,
 };
 const stc3 = {
   props: {
     hidden: true,
   },
-  key: 9,
+  key: 13,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -36,20 +36,20 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     c: api_custom_element,
   } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
-    api_static_fragment($fragment3, 2),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
+    api_static_fragment($fragment3, 5),
     api_element(
       "p",
       {
         attrs: {
           hidden: $cmp.computed ? "" : null,
         },
-        key: 3,
+        key: 6,
       },
       [api_text("computed value, should be resolved in component")]
     ),
-    api_static_fragment($fragment4, 4),
+    api_static_fragment($fragment4, 8),
     api_custom_element("x-foo", _xFoo, stc0, [api_text("boolean present")]),
     api_custom_element("x-foo", _xFoo, stc1, [
       api_text("empty string, should be true"),
@@ -64,7 +64,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         props: {
           hidden: $cmp.computed,
         },
-        key: 8,
+        key: 12,
       },
       [api_text("computed value, should be resolved in component")]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
index 54d94e9a16..6f1ed49731 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
@@ -11,25 +11,25 @@ const stc1 = {
   props: {
     required: true,
   },
-  key: 5,
+  key: 9,
 };
 const stc2 = {
   props: {
     required: "",
   },
-  key: 6,
+  key: 10,
 };
 const stc3 = {
   props: {
     required: "other than true",
   },
-  key: 7,
+  key: 11,
 };
 const stc4 = {
   props: {
     required: "3",
   },
-  key: 9,
+  key: 13,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -39,17 +39,17 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     c: api_custom_element,
   } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
-    api_static_fragment($fragment3, 2),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
+    api_static_fragment($fragment3, 5),
     api_element("input", {
       attrs: {
         required: $cmp.computed ? "" : null,
       },
       props: stc0,
-      key: 3,
+      key: 6,
     }),
-    api_static_fragment($fragment4, 4),
+    api_static_fragment($fragment4, 8),
     api_custom_element("x-foo", _xFoo, stc1, [api_text("boolean present")]),
     api_custom_element("x-foo", _xFoo, stc2, [api_text("empty string")]),
     api_custom_element("x-foo", _xFoo, stc3, [api_text("string value")]),
@@ -60,7 +60,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         props: {
           required: $cmp.computed,
         },
-        key: 8,
+        key: 12,
       },
       [api_text("computed value, should be resolved in component")]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
index e504373def..a6d0380449 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
@@ -19,7 +19,7 @@ const stc0 = {
     reversed: "true",
     selected: "true",
   },
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
   } = $api;
   return [
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
     api_custom_element("x-foo", _xFoo, stc0),
     api_element("input", {
       attrs: {
@@ -36,7 +36,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         disabled: "",
         title: "foo",
       },
-      key: 2,
+      key: 3,
     }),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
index 55ea5e6e30..34e923c106 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
@@ -3,14 +3,14 @@ const $fragment1 = parseFragment`<p hidden${3}>x</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
     api_element("input", {
       attrs: {
         readonly: $cmp.getReadOnly ? "" : null,
         disabled: "",
         title: "foo",
       },
-      key: 1,
+      key: 2,
     }),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
index 885ac8958e..786a35b7f2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/class/expected.js
@@ -6,10 +6,10 @@ const $fragment4 = parseFragment`<div class="foo   bar${0}"${2}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
-    api_static_fragment($fragment3, 2),
-    api_static_fragment($fragment4, 3),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
+    api_static_fragment($fragment3, 5),
+    api_static_fragment($fragment4, 7),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
index 216021e0b4..d713103399 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset-complex/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p data--bar-baz="xyz"${3}></p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
index 39547ba64e..02cd049986 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/dataset/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p data-foo="1" data-bar-baz="xyz"${3}></p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
index 672ca0cd19..c4a2016b92 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/error-empty-value/expected.js
@@ -6,12 +6,12 @@ const stc0 = {
     content: "",
     visible: true,
   },
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, c: api_custom_element } = $api;
   return [
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
     api_custom_element("foo-bar", _fooBar, stc0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
index cdb07fc216..c9ac4d0fe9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/escaped/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input title="\\\\{myValue}"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
index 84923c2489..35ac6ff880 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-input/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input type="checkbox" required readonly minlength="5" maxlength="10" checked${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
index 2e9d084762..405148d84e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag-invalid/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><textarea minlength="1" maxlength="5" unknown-attr="should-error"${3}>x</textarea></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
index edd2cf9991..83fc6b1e19 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/html-tag/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><p title="x" aria-hidden="x"${3}>x</p></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
index afb00a1bac..b51d4bc7bf 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/mixed-props-attrs/expected.js
@@ -16,7 +16,7 @@ const stc2 = {
   attrs: {
     focusable: "true",
   },
-  key: 3,
+  key: 4,
   svg: true,
 };
 const stc3 = {
@@ -37,7 +37,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       key: 0,
     }),
-    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment1, 2),
     api_custom_element("ns-bar", _nsBar, {
       classMap: stc0,
       attrs: stc1,
@@ -50,7 +50,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         tabIndex: "0",
         bgColor: "blue",
       },
-      key: 2,
+      key: 3,
     }),
     api_element("svg", stc2, [
       api_element("use", {
@@ -62,15 +62,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             "xx"
           ),
         },
-        key: 4,
+        key: 5,
         svg: true,
       }),
     ]),
-    api_static_fragment($fragment2, 5),
+    api_static_fragment($fragment2, 7),
     api_element("div", {
       className: $cmp.foo,
       attrs: stc3,
-      key: 6,
+      key: 8,
     }),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
index 2c33801dcb..c8d2f2d3ee 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unknown-html-tag-known-attribute/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<somefancytag min="4"${3}></somefancytag>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
index 0ed2538cb0..8a098f1f1d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/class/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section class="foo bar   baz-fiz${0}"${2}></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
index 61f4a2b8c1..66d15c74ab 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/html-entities/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<p${3}>const { foo } = bar;</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
index e13da44b6a..fe74662740 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div style="background: blue !important; color: red; opacity: 0.5 !important"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
index c8eb33ad21..213a1c41e2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-static/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<section style="--my-color: blue; color: var(--
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
index 64c3dfbaaf..a1ed5708ab 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/template/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p${3}>Root</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
index 6d49ff0ea3..c12a440a3a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/basic/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" This is an HTML comment "),
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
index 0f903989c3..28e74df7f8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/directive-if/expected.js
@@ -5,9 +5,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     $cmp.truthyValue ? api_comment(" HTML comment inside if:true ") : null,
-    $cmp.truthyValue ? api_static_fragment($fragment1, 0) : null,
+    $cmp.truthyValue ? api_static_fragment($fragment1, 1) : null,
     !$cmp.truthyValue ? api_comment(" HTML comment inside if:false ") : null,
-    !$cmp.truthyValue ? api_static_fragment($fragment2, 1) : null,
+    !$cmp.truthyValue ? api_static_fragment($fragment2, 3) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
index 6d49ff0ea3..c12a440a3a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/preserve-html-comments-option/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" This is an HTML comment "),
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
index f8773a368c..fe1a6f09b2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/comments/slots/expected.js
@@ -13,7 +13,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   return [
     api_custom_element("x-child", _xChild, stc0, [
       api_comment(" HTML comment inside slot "),
-      api_static_fragment($fragment1, 1),
+      api_static_fragment($fragment1, 2),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
index 573ac66fa7..ce12845115 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/sibbling/expected.js
@@ -2,15 +2,15 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}>before</div>`;
 const $fragment2 = parseFragment`<div${3}>after</div>`;
 const stc0 = {
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, ddc: api_deprecated_dynamic_component } =
     $api;
   return [
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
     api_deprecated_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0),
-    api_static_fragment($fragment2, 2),
+    api_static_fragment($fragment2, 4),
   ];
   /*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 1e85247a76..fa0e747ceb 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,14 +12,14 @@ const stc1 = {
   classMap: {
     s2: true,
   },
-  key: 2,
+  key: 3,
 };
 const stc2 = [];
 const stc3 = {
   classMap: {
     s3: true,
   },
-  key: 5,
+  key: 6,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -39,7 +39,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         api_iterator($cmp.items, function (item) {
           return api_text("X");
         }),
-        api_static_fragment($fragment1, 1),
+        api_static_fragment($fragment1, 2),
       ])
     ),
     api_element(
@@ -53,14 +53,14 @@ function tmpl($api, $cmp, $slotset, $ctx) {
                 api_element(
                   "p",
                   {
-                    key: api_key(3, item.id),
+                    key: api_key(4, item.id),
                   },
                   [api_text("X1")]
                 ),
                 api_element(
                   "p",
                   {
-                    key: api_key(4, item.id),
+                    key: api_key(5, item.id),
                   },
                   [api_text("X2")]
                 ),
@@ -73,15 +73,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       "section",
       stc3,
       api_flatten([
-        api_static_fragment($fragment2, 6),
+        api_static_fragment($fragment2, 8),
         api_iterator($cmp.items, function (item) {
           return api_element("div", {
-            key: api_key(7, item.id),
+            key: api_key(9, item.id),
           });
         }),
       ])
     ),
-    api_static_fragment($fragment3, 8),
+    api_static_fragment($fragment3, 11),
   ];
   /*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 0cd654a244..a9462f57f9 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
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             [api_text(api_dynamic_text(item))]
           );
         }),
-        api_static_fragment($fragment1, 2),
+        api_static_fragment($fragment1, 3),
       ])
     ),
   ];
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 66c9a3500e..89d76490c7 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
@@ -24,7 +24,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             classMap: stc1,
             key: api_key(1, item.id),
           },
-          [api_static_fragment($fragment1, 2)]
+          [api_static_fragment($fragment1, 3)]
         );
       })
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
index 725b91fb7d..94b40652e3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/dynamic-component/expected.js
@@ -5,19 +5,19 @@ const stc0 = {
   key: 0,
 };
 const stc1 = {
-  key: 2,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, dc: api_dynamic_component } = $api;
   return [
     $cmp.isTrue
       ? api_dynamic_component($cmp.ctor, stc0, [
-          api_static_fragment($fragment1, 1),
+          api_static_fragment($fragment1, 2),
         ])
       : null,
     !$cmp.isTrue2
       ? api_dynamic_component($cmp.ctor, stc1, [
-          api_static_fragment($fragment2, 3),
+          api_static_fragment($fragment2, 5),
         ])
       : null,
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
index 26ac06b959..df20e8d002 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-both-standard-element/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [$cmp.ifTrue ? api_static_fragment($fragment1, 0) : null];
+  return [$cmp.ifTrue ? api_static_fragment($fragment1, 1) : null];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
index c22ed406dd..e9f40c5538 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-multiple/expected.js
@@ -9,9 +9,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue ? api_static_fragment($fragment1, 1) : null,
-      $cmp.isTrue ? api_static_fragment($fragment2, 2) : null,
-      $cmp.isTrue ? api_static_fragment($fragment3, 3) : null,
+      $cmp.isTrue ? api_static_fragment($fragment1, 2) : null,
+      $cmp.isTrue ? api_static_fragment($fragment2, 4) : null,
+      $cmp.isTrue ? api_static_fragment($fragment3, 6) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
index a5c600f08a..264b306a30 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/inline-sibling-static/expected.js
@@ -13,9 +13,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue ? api_static_fragment($fragment1, 1) : null,
+      $cmp.isTrue ? api_static_fragment($fragment1, 2) : null,
       api_text(api_dynamic_text($cmp.foo)),
-      $cmp.isTrue ? api_static_fragment($fragment2, 2) : null,
+      $cmp.isTrue ? api_static_fragment($fragment2, 4) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
index cc193ef72b..20051b63c9 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/strict-true/expected.js
@@ -7,7 +7,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue === true ? api_static_fragment($fragment1, 1) : null,
+      $cmp.isTrue === true ? api_static_fragment($fragment1, 2) : null,
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
index 26ac06b959..df20e8d002 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-both/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [$cmp.ifTrue ? api_static_fragment($fragment1, 0) : null];
+  return [$cmp.ifTrue ? api_static_fragment($fragment1, 1) : null];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
index 5373464e99..fda78d28ec 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<p${3}>2</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    $cmp.isTrue ? api_static_fragment($fragment1, 0) : null,
-    !$cmp.isTrue2 ? api_static_fragment($fragment2, 1) : null,
+    $cmp.isTrue ? api_static_fragment($fragment1, 1) : null,
+    !$cmp.isTrue2 ? api_static_fragment($fragment2, 3) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
index b804f0b258..589b64f5a0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-multiple/expected.js
@@ -5,9 +5,9 @@ const $fragment3 = parseFragment`<p${3}>3</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    $cmp.isTrue ? api_static_fragment($fragment1, 0) : null,
-    $cmp.isTrue ? api_static_fragment($fragment2, 1) : null,
-    $cmp.isTrue ? api_static_fragment($fragment3, 2) : null,
+    $cmp.isTrue ? api_static_fragment($fragment1, 1) : null,
+    $cmp.isTrue ? api_static_fragment($fragment2, 3) : null,
+    $cmp.isTrue ? api_static_fragment($fragment3, 5) : null,
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
index 3c7decb9d8..8e8f505378 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-sibiling/expected.js
@@ -9,9 +9,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1, 1),
-      $cmp.bar ? api_static_fragment($fragment2, 2) : null,
-      api_static_fragment($fragment3, 3),
+      api_static_fragment($fragment1, 2),
+      $cmp.bar ? api_static_fragment($fragment2, 4) : null,
+      api_static_fragment($fragment3, 6),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
index be4e1b2b4c..2521190d48 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-key/outside-iterator/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
index 0611cf5ff8..1f6f477a32 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-else/expected.js
@@ -1,7 +1,7 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const stc0 = {
-  key: 2,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
index a036831089..9ec111a42c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else-nested/expected.js
@@ -6,7 +6,7 @@ const $fragment4 = parseFragment`<h1${3}>inner elseif</h1>`;
 const $fragment5 = parseFragment`<h1${3}>inner else</h1>`;
 const $fragment6 = parseFragment`<h1${3}>outer else</h1>`;
 const stc0 = {
-  key: 6,
+  key: 10,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -16,28 +16,28 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.outer.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.outer.elseif1
-      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 4)], 0)
       : $cmp.outer.elseif2
       ? api_fragment(
           0,
           [
             $cmp.inner.if
-              ? api_fragment(3, [api_static_fragment($fragment3, 4)], 0)
+              ? api_fragment(5, [api_static_fragment($fragment3, 7)], 0)
               : $cmp.inner.elseif
-              ? api_fragment(3, [api_static_fragment($fragment4, 5)], 0)
+              ? api_fragment(5, [api_static_fragment($fragment4, 9)], 0)
               : $cmp.inner.elseif2
               ? api_fragment(
-                  3,
+                  5,
                   [api_dynamic_component($cmp.trackedProp.foo, stc0)],
                   0
                 )
-              : api_fragment(3, [api_static_fragment($fragment5, 7)], 0),
+              : api_fragment(5, [api_static_fragment($fragment5, 12)], 0),
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment6, 8)], 0),
+      : api_fragment(0, [api_static_fragment($fragment6, 14)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
index 6ecea093ee..cb22c44f7d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-else/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const $fragment2 = parseFragment`<h1${3}>elseif condition</h1>`;
 const stc0 = {
-  key: 3,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -12,9 +12,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 4)], 0)
       : api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
index 5513772c28..c4af4d0f86 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif-multiple/expected.js
@@ -3,7 +3,7 @@ const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const $fragment2 = parseFragment`<h1${3}>elseif condition</h1>`;
 const $fragment3 = parseFragment`<h1${3}>else condition</h1>`;
 const stc0 = {
-  key: 3,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -13,12 +13,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 4)], 0)
       : $cmp.visible.elseif2
       ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0)
-      : api_fragment(0, [api_static_fragment($fragment3, 4)], 0),
+      : api_fragment(0, [api_static_fragment($fragment3, 7)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
index 730136e9a0..b88f08b0ad 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/if-elseif/expected.js
@@ -1,7 +1,7 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const stc0 = {
-  key: 2,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.visible.elseif
       ? api_fragment(0, [api_dynamic_component($cmp.trackedProp.foo, stc0)], 0)
       : null,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
index 5f39efa0b3..b7fe497eb6 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic-components/inline/expected.js
@@ -6,10 +6,10 @@ const stc0 = {
   key: 1,
 };
 const stc1 = {
-  key: 3,
+  key: 4,
 };
 const stc2 = {
-  key: 5,
+  key: 7,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -23,7 +23,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor1, stc0, [
-              api_static_fragment($fragment1, 2),
+              api_static_fragment($fragment1, 3),
             ]),
           ],
           0
@@ -33,7 +33,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor2, stc1, [
-              api_static_fragment($fragment2, 4),
+              api_static_fragment($fragment2, 6),
             ]),
           ],
           0
@@ -42,7 +42,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           0,
           [
             api_dynamic_component($cmp.ctor3, stc2, [
-              api_static_fragment($fragment3, 6),
+              api_static_fragment($fragment3, 9),
             ]),
           ],
           0
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
index 49811f78fa..3020932b5e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-else/expected.js
@@ -1,7 +1,7 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const stc0 = {
-  key: 2,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
index 435f3964be..33000ff3e1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else-nested/expected.js
@@ -6,7 +6,7 @@ const $fragment4 = parseFragment`<h1${3}>inner elseif</h1>`;
 const $fragment5 = parseFragment`<h1${3}>inner else</h1>`;
 const $fragment6 = parseFragment`<h1${3}>outer else</h1>`;
 const stc0 = {
-  key: 6,
+  key: 10,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -16,20 +16,20 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.outer.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.outer.elseif1
-      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 4)], 0)
       : $cmp.outer.elseif2
       ? api_fragment(
           0,
           [
             $cmp.inner.if
-              ? api_fragment(3, [api_static_fragment($fragment3, 4)], 0)
+              ? api_fragment(5, [api_static_fragment($fragment3, 7)], 0)
               : $cmp.inner.elseif
-              ? api_fragment(3, [api_static_fragment($fragment4, 5)], 0)
+              ? api_fragment(5, [api_static_fragment($fragment4, 9)], 0)
               : $cmp.inner.elseif2
               ? api_fragment(
-                  3,
+                  5,
                   [
                     api_deprecated_dynamic_component(
                       "x-foo",
@@ -39,11 +39,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
                   ],
                   0
                 )
-              : api_fragment(3, [api_static_fragment($fragment5, 7)], 0),
+              : api_fragment(5, [api_static_fragment($fragment5, 12)], 0),
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment6, 8)], 0),
+      : api_fragment(0, [api_static_fragment($fragment6, 14)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
index 102a27c95d..01d6aa37a7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-else/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const $fragment2 = parseFragment`<h1${3}>elseif condition</h1>`;
 const stc0 = {
-  key: 3,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -12,9 +12,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 4)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
index e333686129..83529dd10c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif-multiple/expected.js
@@ -3,7 +3,7 @@ const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const $fragment2 = parseFragment`<h1${3}>elseif condition</h1>`;
 const $fragment3 = parseFragment`<h1${3}>else condition</h1>`;
 const stc0 = {
-  key: 3,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -13,9 +13,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.visible.elseif
-      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 4)], 0)
       : $cmp.visible.elseif2
       ? api_fragment(
           0,
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           ],
           0
         )
-      : api_fragment(0, [api_static_fragment($fragment3, 4)], 0),
+      : api_fragment(0, [api_static_fragment($fragment3, 7)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
index 77b3227bb8..5fe7fcd23a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/dynamic/if-elseif/expected.js
@@ -1,7 +1,7 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>if condition</h1>`;
 const stc0 = {
-  key: 2,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     $cmp.visible.if
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.visible.elseif
       ? api_fragment(
           0,
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
index bed6cbb50e..7d2bbe1dd5 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-else/html-elements/expected.js
@@ -5,8 +5,8 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
-      : api_fragment(0, [api_static_fragment($fragment2, 2)], 0),
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
+      : api_fragment(0, [api_static_fragment($fragment2, 4)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
index 47998b90bc..650fb538e7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif-else/html-elements/expected.js
@@ -6,10 +6,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
-      : api_fragment(0, [api_static_fragment($fragment3, 3)], 0),
+      ? api_fragment(0, [api_static_fragment($fragment2, 4)], 0)
+      : api_fragment(0, [api_static_fragment($fragment3, 6)], 0),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
index 7c2fe1cf44..aa1effa93a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-elseif/html-elements/expected.js
@@ -5,9 +5,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment2, 2)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment2, 4)], 0)
       : null,
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
index 226c2cee27..250fabd0f6 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/if-only/html-elements/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, fr: api_fragment } = $api;
   return [
     $cmp.visible
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : null,
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
index 880bc8c4c9..68c27520fe 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/mixed-elements/expected.js
@@ -2,7 +2,7 @@ import _cDefault from "c/default";
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}>Elseif!</div>`;
 const stc0 = {
-  key: 2,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -15,7 +15,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     $cmp.visible
       ? api_fragment(0, [api_text("Conditional Text")], 0)
       : $cmp.elseifCondition
-      ? api_fragment(0, [api_static_fragment($fragment1, 1)], 0)
+      ? api_fragment(0, [api_static_fragment($fragment1, 2)], 0)
       : api_fragment(
           0,
           [
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
index d2af5c4864..a68bcccccd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/slots/duplicate-slots-warning/simple/expected.js
@@ -14,13 +14,13 @@ const stc2 = {
 };
 const stc3 = [];
 const stc4 = {
-  key: 4,
+  key: 5,
 };
 const stc5 = {
   attrs: {
     name: "conditional-slot",
   },
-  key: 5,
+  key: 6,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { s: api_slot, h: api_element, st: api_static_fragment } = $api;
@@ -30,7 +30,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         api_slot("conditional-slot", stc2, stc3, $slotset),
       ]),
     ]),
-    api_static_fragment($fragment1, 3),
+    api_static_fragment($fragment1, 4),
     api_element("div", stc4, [
       api_slot("conditional-slot", stc5, stc3, $slotset),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
index 9b95720e5f..80e35162de 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/with-siblings/expected.js
@@ -10,19 +10,19 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     $cmp.visible
       ? api_fragment(
           0,
-          [api_text("Conditional Text"), api_static_fragment($fragment1, 1)],
+          [api_text("Conditional Text"), api_static_fragment($fragment1, 2)],
           0
         )
       : api_fragment(
           0,
           [
-            api_static_fragment($fragment2, 2),
-            api_static_fragment($fragment3, 3),
+            api_static_fragment($fragment2, 4),
+            api_static_fragment($fragment3, 6),
           ],
           0
         ),
-    api_static_fragment($fragment4, 4),
-    api_static_fragment($fragment5, 5),
+    api_static_fragment($fragment4, 8),
+    api_static_fragment($fragment5, 10),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
index b3d93061ff..a71502d531 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/static-container/expected.js
@@ -5,7 +5,7 @@ const stc0 = {
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0, [api_static_part(1, stc0)])];
+  return [api_static_fragment($fragment1, 1, [api_static_part(1, stc0)])];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
index 1c14b7b2e0..8cfcad166d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/valid/expected.js
@@ -5,7 +5,7 @@ const stc0 = {
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0, [api_static_part(0, stc0)])];
+  return [api_static_fragment($fragment1, 1, [api_static_part(0, stc0)])];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
index 64c3dfbaaf..a1ed5708ab 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p${3}>Root</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
index 5b8e3a05e2..c2af3e7608 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/template/expected.js
@@ -1,25 +1,25 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p${3}>Root</p>`;
 const stc0 = {
-  key: 1,
+  key: 2,
 };
 const stc1 = {
   attrs: {
     name: "named",
   },
-  key: 2,
+  key: 3,
 };
 const stc2 = {
   slotAssignment: "forward",
   attrs: {
     name: "forwarded",
   },
-  key: 3,
+  key: 4,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, t: api_text, s: api_slot } = $api;
   return [
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
     api_slot("", stc0, [api_text("Default")], $slotset),
     api_slot("named", stc1, [api_text("Named")], $slotset),
     api_slot("forwarded", stc2, [api_text("Forwarded")], $slotset),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
index fb2fe6493b..ec8b9a345a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/children/expected.js
@@ -7,7 +7,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, dc: api_dynamic_component } = $api;
   return [
     api_dynamic_component($cmp.ctor, stc0, [
-      api_static_fragment($fragment1, 1),
+      api_static_fragment($fragment1, 2),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
index e6dcbad36a..d4fa507a5e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/nested/expected.js
@@ -26,18 +26,18 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         },
       },
       [
-        api_static_fragment($fragment1, 1),
+        api_static_fragment($fragment1, 2),
         api_dynamic_component(
           $cmp.ctor2,
           {
             classMap: stc0,
             props: stc1,
-            key: 2,
+            key: 3,
             on: {
               click: _m1 || ($ctx._m1 = api_bind($cmp.handleOuterClick)),
             },
           },
-          [api_static_fragment($fragment2, 3)]
+          [api_static_fragment($fragment2, 5)]
         ),
       ]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
index 75aed7d7e4..bfe164dbda 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/dynamic-components/valid/siblings/expected.js
@@ -2,14 +2,14 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}>before</div>`;
 const $fragment2 = parseFragment`<div${3}>after</div>`;
 const stc0 = {
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, dc: api_dynamic_component } = $api;
   return [
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
     api_dynamic_component($cmp.trackedProp.foo, stc0),
-    api_static_fragment($fragment2, 2),
+    api_static_fragment($fragment2, 4),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
index a011e064e2..ae4b5dfcd7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/static/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
index 7df34559bc..6546aba23a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/tag/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
index 443c201525..7c9492bbb5 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/events/type-valid/expected.js
@@ -5,33 +5,33 @@ const $fragment3 = parseFragment`<div${3}>Click</div>`;
 const $fragment4 = parseFragment`<div${3}>Click</div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
-  const { _m0, _m1, _m2, _m3 } = $ctx;
+  const { _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(0, {
         on: {
-          a123: _m0 || ($ctx._m0 = api_bind($cmp.handleClick)),
+          a123: _m1 || ($ctx._m1 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment2, 1, [
+    api_static_fragment($fragment2, 3, [
       api_static_part(0, {
         on: {
-          foo_bar: _m1 || ($ctx._m1 = api_bind($cmp.handleClick)),
+          foo_bar: _m3 || ($ctx._m3 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment3, 2, [
+    api_static_fragment($fragment3, 5, [
       api_static_part(0, {
         on: {
-          foo_: _m2 || ($ctx._m2 = api_bind($cmp.handleClick)),
+          foo_: _m5 || ($ctx._m5 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
-    api_static_fragment($fragment4, 3, [
+    api_static_fragment($fragment4, 7, [
       api_static_part(0, {
         on: {
-          a123: _m3 || ($ctx._m3 = api_bind($cmp.handleClick)),
+          a123: _m7 || ($ctx._m7 = api_bind($cmp.handleClick)),
         },
       }),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
index f31b91b0a3..5d322972c0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/assignment-inside-arrow/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind(() => ($cmp.myField = "foo"))),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
index d921c20db9..f2d28ddff4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/iterator/expected.js
@@ -9,7 +9,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
     i: api_iterator,
   } = $api;
-  const { _m0 } = $ctx;
+  const { _m0, _m1 } = $ctx;
   return api_iterator($cmp.bento, function (okazu) {
     return api_element(
       "div",
@@ -17,10 +17,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         key: api_key(0, okazu),
       },
       [
-        api_static_fragment($fragment1, 1, [
+        api_static_fragment($fragment1, 2, [
           api_static_part(0, {
             on: {
-              click: _m0 || ($ctx._m0 = api_bind(() => $cmp.taberu(okazu))),
+              click: _m1 || ($ctx._m1 = api_bind(() => $cmp.taberu(okazu))),
             },
           }),
         ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
index 19ca020fd7..349585a265 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression-complex/valid/update-inside-arrow/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind(() => $cmp.foo++)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
index aee9561f4d..a0a4385f23 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/empty-paranthesis/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<div${3}>{}</div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
index 07efcc3c86..1642e4a00a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/escaped/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input value="{value}"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
index d3a547d5c7..42cd27130d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/expression/quoted-empty-paranthesis/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<div data-foo="{}"${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
index 454ada5f39..44a2334d56 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
@@ -7,15 +7,15 @@ const stc0 = {
   props: {
     someTruthyValue: true,
   },
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, c: api_custom_element } = $api;
   return [
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
     api_custom_element("x-custom-component", _xCustomComponent, stc0),
-    api_static_fragment($fragment2, 2),
-    api_static_fragment($fragment3, 3),
+    api_static_fragment($fragment2, 4),
+    api_static_fragment($fragment3, 6),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
index 19b928a5e9..1fffeabefd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/lwc-tags/invalid/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<lwc:invalid${3}></lwc:invalid>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
index be4e1b2b4c..2521190d48 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
index dd8cc3e7c0..81f29595fd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template-older-api-version/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>hello</h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
index 9f787e02fb..ca009083b0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/stranded-open-svg-ellipse/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><ellipse${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
index e95316984a..620b9a49bd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/attribute-with-equal/expected.js
@@ -11,7 +11,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { c: api_custom_element, st: api_static_fragment } = $api;
   return [
     api_custom_element("x-foo", _xFoo, stc0),
-    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment1, 2),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
index 511b1c1c87..04e41417f1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/dashed-html-tag/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<section${3}><color-profile local="x"${3}></color-profile></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
index 9906043a31..ad7b629ccb 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/keygen/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<keygen name="name" challenge="some challenge"
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, t: api_text } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
     api_text("</input>"),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
index 0cf8b3a883..41fa5f222b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/menuitem/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<menu${3}><menuitem label="my-menuitem"${3}></menu>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
index cec475588a..a1d1f5b02a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/deprecated-void-elements/param/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<param name="hello" value="world"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*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 ee725aa6fd..ebaec591e5 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
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<button${3}>New</button>`;
 const $fragment2 = parseFragment`<button${3}>[X]</button>`;
 const stc0 = {
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -15,12 +15,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
     i: api_iterator,
   } = $api;
-  const { _m0 } = $ctx;
+  const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(0, {
         on: {
-          click: _m0 || ($ctx._m0 = api_bind($cmp.create)),
+          click: _m1 || ($ctx._m1 = api_bind($cmp.create)),
         },
       }),
     ]),
@@ -31,11 +31,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         return api_element(
           "li",
           {
-            key: api_key(2, task.id),
+            key: api_key(3, task.id),
           },
           [
             api_text(api_dynamic_text(task.title)),
-            api_static_fragment($fragment2, 3, [
+            api_static_fragment($fragment2, 5, [
               api_static_part(0, {
                 on: {
                   click: api_bind(task.delete),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
index 99504a9c07..dea1e79750 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
@@ -4,8 +4,8 @@ const $fragment2 = parseFragment`<br${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
index b21885cad2..98c0044e46 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/slot-name-with-dash/expected.js
@@ -12,7 +12,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     api_slot(
       "secret-slot",
       stc0,
-      [api_static_fragment($fragment1, "@secret-slot:1")],
+      [api_static_fragment($fragment1, "@secret-slot:2")],
       $slotset
     ),
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
index a84a516394..b69b6a281e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/table-with-tr/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<table${3}><tbody${3}><tr${3}></tr></tbody></table>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
index 0395c4b33a..e13d25976c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/multiple-tagname/expected.js
@@ -6,7 +6,7 @@ const stc0 = {
   city: true,
 };
 const stc1 = {
-  key: 2,
+  key: 3,
 };
 const stc2 = [["color", "blue", false]];
 function tmpl($api, $cmp, $slotset, $ctx) {
@@ -20,14 +20,14 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         renderer: renderer,
       },
       [
-        api_static_fragment($fragment1, 1),
+        api_static_fragment($fragment1, 2),
         api_element("p", stc1, [
           api_text("London is the capital of "),
           api_element(
             "span",
             {
               styleDecls: stc2,
-              key: 3,
+              key: 4,
               renderer: renderer,
             },
             [api_text("England.")]
@@ -39,10 +39,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       "div",
       {
         classMap: stc0,
-        key: 4,
+        key: 5,
         renderer: renderer,
       },
-      [api_static_fragment($fragment2, 5), api_static_fragment($fragment3, 6)]
+      [api_static_fragment($fragment2, 7), api_static_fragment($fragment3, 9)]
     ),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
index 3a4219b01b..fae4db0906 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tag-with-namespace/expected.js
@@ -45,7 +45,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         },
         key: 3,
       }),
-      api_static_fragment($fragment1, 4),
+      api_static_fragment($fragment1, 5),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
index d13b1380a9..0e26d53a87 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/config/tagname-with-attributes/expected.js
@@ -15,7 +15,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       [api_text("Should get custom renderer")]
     ),
-    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment1, 2),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
index 44d128e4ac..8f5d83395a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/parent-mixed-slot-content/expected.js
@@ -35,7 +35,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         );
       }),
       api_element("span", stc2, [api_text("Willy Wonka")]),
-      api_static_fragment($fragment1, 3),
+      api_static_fragment($fragment1, 4),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
index cb43721b74..5e36509d64 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/scoped-slots/text-non-direct-child/expected.js
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
                 api_dynamic_text(item.id) + " - " + api_dynamic_text(item.name)
               ),
             ]),
-            api_static_fragment($fragment1, 2),
+            api_static_fragment($fragment1, 3),
           ],
           0
         );
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
index 385b20b7d8..86dad6c421 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
@@ -11,7 +11,7 @@ const stc1 = {
   key: 1,
 };
 const stc2 = {
-  key: 3,
+  key: 4,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
@@ -20,10 +20,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       api_slot(
         "other",
         stc1,
-        [api_static_fragment($fragment1, "@other:2")],
+        [api_static_fragment($fragment1, "@other:3")],
         $slotset
       ),
-      api_slot("", stc2, [api_static_fragment($fragment2, "@:4")], $slotset),
+      api_slot("", stc2, [api_static_fragment($fragment2, "@:6")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
index 1abae59233..70508b3432 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibling-static/expected.js
@@ -5,14 +5,14 @@ const stc0 = {
   key: 0,
 };
 const stc1 = {
-  key: 2,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1, 1),
-      api_slot("", stc1, [api_static_fragment($fragment2, "@:3")], $slotset),
+      api_static_fragment($fragment1, 2),
+      api_slot("", stc1, [api_static_fragment($fragment2, "@:5")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
index e4424cd47b..0ba54cd819 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition/expected.js
@@ -10,7 +10,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_slot("", stc1, [api_static_fragment($fragment1, "@:2")], $slotset),
+      api_slot("", stc1, [api_static_fragment($fragment1, "@:3")], $slotset),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
index da3fba48b7..5fa1d03e74 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed-1/expected.js
@@ -11,16 +11,16 @@ const stc1 = {
   attrs: {
     name: "header",
   },
-  key: 2,
+  key: 3,
 };
 const stc2 = {
-  key: 5,
+  key: 8,
 };
 const stc3 = {
   attrs: {
     name: "footer",
   },
-  key: 7,
+  key: 11,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -31,15 +31,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   } = $api;
   return [
     api_element("section", stc0, [
-      api_static_fragment($fragment1, 1),
+      api_static_fragment($fragment1, 2),
       api_slot("header", stc1, [api_text("Default header")], $slotset),
-      api_static_fragment($fragment2, 3),
-      api_static_fragment($fragment3, 4),
-      api_slot("", stc2, [api_static_fragment($fragment4, "@:6")], $slotset),
+      api_static_fragment($fragment2, 5),
+      api_static_fragment($fragment3, 7),
+      api_slot("", stc2, [api_static_fragment($fragment4, "@:10")], $slotset),
       api_slot(
         "footer",
         stc3,
-        [api_static_fragment($fragment5, "@footer:8")],
+        [api_static_fragment($fragment5, "@footer:13")],
         $slotset
       ),
     ]),
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 89d6dc4ba9..868d407451 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
@@ -24,7 +24,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         _xB,
         stc1,
         api_flatten([
-          $cmp.isLoading ? api_static_fragment($fragment1, 2) : null,
+          $cmp.isLoading ? api_static_fragment($fragment1, 3) : null,
           $cmp.haveLoadedItems
             ? api_iterator($cmp.menuItems, function (item) {
                 return api_text("x");
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
index d991969473..613a602a52 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage-named/expected.js
@@ -16,7 +16,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       api_slot(
         "test",
         stc1,
-        [api_static_fragment($fragment1, "@test:2")],
+        [api_static_fragment($fragment1, "@test:3")],
         $slotset
       ),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
index 8204708156..c53aa813d2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/usage/expected.js
@@ -9,31 +9,31 @@ const stc1 = {
 };
 const stc2 = {
   slotAssignment: "",
-  key: 3,
+  key: 4,
 };
 const stc3 = {
   slotAssignment: "true",
-  key: 4,
+  key: 5,
 };
 const stc4 = {
   slotAssignment: "header",
-  key: 7,
+  key: 8,
 };
 const stc5 = {
   slotAssignment: "",
-  key: 8,
+  key: 9,
 };
 const stc6 = {
   slotAssignment: "undefined",
-  key: 9,
+  key: 10,
 };
 const stc7 = {
   slotAssignment: "null",
-  key: 10,
+  key: 11,
 };
 const stc8 = {
   slotAssignment: "",
-  key: 11,
+  key: 12,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -45,14 +45,14 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   return [
     api_element("section", stc0, [
       api_custom_element("ns-cmp", _nsCmp, stc1, [
-        api_static_fragment($fragment1, 2),
+        api_static_fragment($fragment1, 3),
         api_element("p", stc2, [api_text("Slot Empty String Attribute")]),
         api_element("p", stc3, [api_text("Slot Boolean Attribute")]),
         api_element(
           "p",
           {
             slotAssignment: $cmp.slot.name,
-            key: 5,
+            key: 6,
           },
           [api_text("Dynamic Slot Content")]
         ),
@@ -60,7 +60,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           "p",
           {
             slotAssignment: $cmp.slotVariable,
-            key: 6,
+            key: 7,
           },
           [api_text("Variable As Slot Assignment")]
         ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
index 0785c1df02..0aa55b5965 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1 data-foo="&quot;>\\x3Cscript>alert('pwned')\\x3C/script>\\x3Ch1 foo=&quot;"${3}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
index 83bd40c2be..7487642ae8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1 class="&quot;>\\x3Cscript>alert('pwned')\\x3C/script>\\x3Ch1 foo=&quot;${0}"${2}></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
index 520cc20945..fd239ff4b2 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}><!-- --&gt;&lt;script&gt;alert(&#x27;pwned&#x27;)&lt;/script&gt; &lt;!-- --></h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
index a2c7270ed4..1ca6e27dad 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-ref-only/expected.js
@@ -15,7 +15,7 @@ const stc3 = {
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { sp: api_static_part, st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(4, stc0),
       api_static_part(5, stc1),
       api_static_part(6, stc2),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
index 1c3c5265b7..827173ea47 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
@@ -10,7 +10,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(4, stc0),
       api_static_part(5, {
         on: {
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
index b00ce75590..3356af88a5 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
@@ -6,10 +6,10 @@ const $fragment4 = parseFragment`<noframes${3}><p${3}>It seems your browser does
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
-    api_static_fragment($fragment3, 2),
-    api_static_fragment($fragment4, 3),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
+    api_static_fragment($fragment3, 5),
+    api_static_fragment($fragment4, 7),
   ];
   /*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 23648fc5a1..5967ded149 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: 4,
+  key: 5,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -28,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             {
               key: api_key(2, row.id),
             },
-            [api_static_fragment($fragment1, 3)]
+            [api_static_fragment($fragment1, 4)]
           );
         })
       ),
@@ -39,9 +39,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           return api_element(
             "tr",
             {
-              key: api_key(5, row.id),
+              key: api_key(6, row.id),
             },
-            [api_static_fragment($fragment2, 6)]
+            [api_static_fragment($fragment2, 8)]
           );
         })
       ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
index f40fa7f92e..f206b5d0d3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(1, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickFoo)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
index be4e1b2b4c..2521190d48 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
index 02ae7c0f6f..d96c27cb2b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(2, {
         on: {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickFoo)),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
index b3029324ae..d14760750c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
@@ -4,7 +4,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" this comment should not be static "),
-    api_static_fragment($fragment1, 0),
+    api_static_fragment($fragment1, 1),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
index bdfb188bcd..575e41eb95 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
@@ -2,12 +2,12 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
-  const { _m0 } = $ctx;
+  const { _m0, _m1 } = $ctx;
   return [
-    api_static_fragment($fragment1, 0, [
+    api_static_fragment($fragment1, 1, [
       api_static_part(0, {
         on: {
-          click: _m0 || ($ctx._m0 = api_bind($cmp.onClick)),
+          click: _m1 || ($ctx._m1 = api_bind($cmp.onClick)),
         },
         ref: "foo",
       }),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
index 8f8be41b4f..923e23907a 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-div/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/><path${3}/></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
index 360ec52f53..b4fa4b9ad4 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg-within-g/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg xmlns="http://www.w3.org/2000/svg"${3}><g${3}><path${3}/><path${3}/></g></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
index d957e28b1b..766733b112 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/><path${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
index bf2ddf0a9d..4727524995 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/template-string-escape/expected.js
@@ -10,10 +10,10 @@ const $fragment8 = parseFragment`<xmp${3}>Escape \\\`me\`</xmp>`;
 const $fragment9 = parseFragment`<div data-message="Escape \${me}"${3}></div>`;
 const $fragment10 = parseFragment`<div${3}><!-- Escape \${me} --></div>`;
 const stc0 = {
-  key: 8,
+  key: 16,
 };
 const stc1 = {
-  key: 11,
+  key: 21,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -23,19 +23,19 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     h: api_element,
   } = $api;
   return [
-    api_static_fragment($fragment1, 0),
-    api_static_fragment($fragment2, 1),
-    api_static_fragment($fragment3, 2),
-    api_static_fragment($fragment4, 3),
-    api_static_fragment($fragment5, 4),
-    api_static_fragment($fragment6, 5),
-    api_static_fragment($fragment7, 6),
-    api_static_fragment($fragment8, 7),
+    api_static_fragment($fragment1, 1),
+    api_static_fragment($fragment2, 3),
+    api_static_fragment($fragment3, 5),
+    api_static_fragment($fragment4, 7),
+    api_static_fragment($fragment5, 9),
+    api_static_fragment($fragment6, 11),
+    api_static_fragment($fragment7, 13),
+    api_static_fragment($fragment8, 15),
     api_element("div", stc0, [
       api_text("Escape $" + api_dynamic_text($cmp.me)),
     ]),
-    api_static_fragment($fragment9, 9),
-    api_static_fragment($fragment10, 10),
+    api_static_fragment($fragment9, 18),
+    api_static_fragment($fragment10, 20),
     api_element("xmp", stc1, [
       api_text("Escape $" + api_dynamic_text($cmp.me)),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
index d78c2995b1..8561f28c94 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<h1${3}>Hello &lt;div&gt;world&lt;/div&gt;</h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
index f69862ed3e..dc3e5b3e97 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/filter/expected.js
@@ -36,7 +36,7 @@ const stc2 = {
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink",
   },
-  key: 12,
+  key: 19,
   svg: true,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
@@ -58,7 +58,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             key: 2,
             svg: true,
           },
-          [api_static_fragment($fragment1, 3)]
+          [api_static_fragment($fragment1, 4)]
         ),
         api_element(
           "filter",
@@ -67,10 +67,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
               id: api_scoped_id("blend"),
               primitiveUnits: "objectBoundingBox",
             },
-            key: 4,
+            key: 5,
             svg: true,
           },
-          [api_static_fragment($fragment2, 5)]
+          [api_static_fragment($fragment2, 7)]
         ),
         api_element(
           "filter",
@@ -79,20 +79,20 @@ function tmpl($api, $cmp, $slotset, $ctx) {
               id: api_scoped_id("merge"),
               primitiveUnits: "objectBoundingBox",
             },
-            key: 6,
+            key: 8,
             svg: true,
           },
-          [api_static_fragment($fragment3, 7)]
+          [api_static_fragment($fragment3, 10)]
         ),
       ]),
-      api_static_fragment($fragment4, 8),
-      api_static_fragment($fragment5, 9),
-      api_static_fragment($fragment6, 10),
-      api_static_fragment($fragment7, 11),
+      api_static_fragment($fragment4, 12),
+      api_static_fragment($fragment5, 14),
+      api_static_fragment($fragment6, 16),
+      api_static_fragment($fragment7, 18),
     ]),
     api_element("svg", stc2, [
-      api_static_fragment($fragment8, 13),
-      api_static_fragment($fragment9, 14),
+      api_static_fragment($fragment8, 21),
+      api_static_fragment($fragment9, 23),
       api_element(
         "filter",
         {
@@ -104,17 +104,17 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             width: "200",
             height: "120",
           },
-          key: 15,
+          key: 24,
           svg: true,
         },
         [
-          api_static_fragment($fragment10, 16),
-          api_static_fragment($fragment11, 17),
-          api_static_fragment($fragment12, 18),
-          api_static_fragment($fragment13, 19),
-          api_static_fragment($fragment14, 20),
-          api_static_fragment($fragment15, 21),
-          api_static_fragment($fragment16, 22),
+          api_static_fragment($fragment10, 26),
+          api_static_fragment($fragment11, 28),
+          api_static_fragment($fragment12, 30),
+          api_static_fragment($fragment13, 32),
+          api_static_fragment($fragment14, 34),
+          api_static_fragment($fragment15, 36),
+          api_static_fragment($fragment16, 38),
         ]
       ),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
index 45e4644ba4..05631241d5 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/foreign-object/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<div${3}><svg width="706" height="180"${3}><g transform="translate(3,3)"${3}><g transform="translate(250,0)"${3}><foreignObject width="200" height="36" xlink:href="javascript:alert(1)"${3}><a${3}>x</a></foreignObject></g></g></svg></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
index 804763049d..4731da8cc3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/linear-gradient/expected.js
@@ -33,12 +33,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             svg: true,
           },
           [
-            api_static_fragment($fragment1, 3),
-            api_static_fragment($fragment2, 4),
+            api_static_fragment($fragment1, 4),
+            api_static_fragment($fragment2, 6),
           ]
         ),
       ]),
-      api_static_fragment($fragment3, 5),
+      api_static_fragment($fragment3, 8),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
index 1f3cf1a610..20a291fec0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/simple-svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"${3}><rect width="100%" height="100%" fill="red"${3}/><circle cx="150" cy="100" r="80" fill="green"${3}/><text x="150" y="125" font-size="60" text-anchor="middle" fill="white"${3}>SVG</text></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
index 33e2db4f18..8e0ac4b589 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/stranded-open-path/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg xmlns="http://www.w3.org/2000/svg"${3}><path${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
index 84534c11c4..2f6ed21429 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-image/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg width="200" height="200"${3}><image xlink:href="/foo.png" x="1" y="2" height="200" width="200"${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
index e2c17ac566..4b4fc120dc 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/valid-svg/expected.js
@@ -2,7 +2,7 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<svg${3}><a${3}/><circle${3}/><defs${3}/><desc${3}/><ellipse${3}/><filter${3}/><g${3}/><line${3}/><marker${3}/><mask${3}/><path${3}/><pattern${3}/><polygon${3}/><polyline${3}/><rect${3}/><stop${3}/><symbol${3}/><text${3}/><title${3}/><tspan${3}/><use${3}/></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { st: api_static_fragment } = $api;
-  return [api_static_fragment($fragment1, 0)];
+  return [api_static_fragment($fragment1, 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/codegen/index.ts b/packages/@lwc/template-compiler/src/codegen/index.ts
index f6abf5ff53..9840f0b47f 100644
--- a/packages/@lwc/template-compiler/src/codegen/index.ts
+++ b/packages/@lwc/template-compiler/src/codegen/index.ts
@@ -79,14 +79,15 @@ import { format as formatModule } from './formatters/module';
 function transform(codeGen: CodeGen): t.Expression {
     const instrumentation = codeGen.state.config.instrumentation;
     function transformElement(element: BaseElement, slotParentName?: string): t.Expression {
+        const databag = elementDataBag(element, slotParentName);
+
         if (codeGen.staticNodes.has(element) && isElement(element)) {
             // do not process children of static nodes.
             return codeGen.genStaticElement(element as StaticElement, slotParentName);
         }
 
-        let res: t.Expression;
-        const databag = elementDataBag(element, slotParentName);
         const children = transformChildren(element);
+        let res: t.Expression;
 
         const { name } = element;
         // lwc:dynamic directive

From 11cd3db985b4d0883d5c8184d9c1293e790afb90 Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Mon, 18 Mar 2024 11:01:53 -0700
Subject: [PATCH 07/10] chore: add comments for fixtures

---
 .../attributes/scoped-id/expression/not-scoped/actual.html    | 2 ++
 .../fixtures/attributes/scoped-id/not-scoped/actual.html      | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/actual.html
index 897c302fbc..8b0c79230d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/actual.html
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/actual.html
@@ -1,4 +1,6 @@
 <template>
+    <!-- These are invalid aria attributes -->
+    <!-- Note the extra '-' after the second word, ex: aria-described-by instead of aria-describedby -->
     <div 
         aria-described-by={scoped}
         aria-active-descendant={scoped}
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/not-scoped/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/not-scoped/actual.html
index e2672e5ea2..42e4ec2ebf 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/not-scoped/actual.html
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/not-scoped/actual.html
@@ -1,5 +1,7 @@
 <template>
-    <lightning-combobox 
+    <!-- These are invalid aria attributes -->
+    <!-- Note the extra '-' after the second word, ex: aria-described-by instead of aria-describedby -->
+    <lightning-combobox
         aria-described-by="not-scoped-foo"
         aria-active-descendant="not-scoped-foo"
         aria-error-message="not-scoped-foo"

From fc7c4a1efbeb5aab5eeb732ce9885adea42eb25c Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Mon, 18 Mar 2024 12:45:21 -0700
Subject: [PATCH 08/10] chore: fix test fixures

---
 .../scoped-id/expression/not-scoped/ast.json  | 142 +++++++++++-------
 .../expression/not-scoped/metadata.json       |  20 +--
 .../attributes/scoped-id/not-scoped/ast.json  | 102 ++++++++-----
 3 files changed, 158 insertions(+), 106 deletions(-)

diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/ast.json
index 15c2e18168..918afb4028 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/ast.json
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/ast.json
@@ -4,10 +4,10 @@
         "location": {
             "startLine": 1,
             "startColumn": 1,
-            "endLine": 9,
+            "endLine": 11,
             "endColumn": 12,
             "start": 0,
-            "end": 219,
+            "end": 371,
             "startTag": {
                 "startLine": 1,
                 "startColumn": 1,
@@ -17,42 +17,68 @@
                 "end": 10
             },
             "endTag": {
-                "startLine": 9,
+                "startLine": 11,
                 "startColumn": 1,
-                "endLine": 9,
+                "endLine": 11,
                 "endColumn": 12,
-                "start": 208,
-                "end": 219
+                "start": 360,
+                "end": 371
             }
         },
         "directives": [],
         "children": [
+            {
+                "type": "Comment",
+                "raw": " These are invalid aria attributes ",
+                "value": " These are invalid aria attributes ",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 2,
+                    "endColumn": 47,
+                    "start": 15,
+                    "end": 57
+                }
+            },
+            {
+                "type": "Comment",
+                "raw": " Note the extra '-' after the second word, ex: aria-described-by instead of aria-describedby ",
+                "value": " Note the extra '-' after the second word, ex: aria-described-by instead of aria-describedby ",
+                "location": {
+                    "startLine": 3,
+                    "startColumn": 5,
+                    "endLine": 3,
+                    "endColumn": 105,
+                    "start": 62,
+                    "end": 162
+                }
+            },
             {
                 "type": "Element",
                 "name": "div",
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "location": {
-                    "startLine": 2,
+                    "startLine": 4,
                     "startColumn": 5,
-                    "endLine": 8,
+                    "endLine": 10,
                     "endColumn": 12,
-                    "start": 15,
-                    "end": 207,
+                    "start": 167,
+                    "end": 359,
                     "startTag": {
-                        "startLine": 2,
+                        "startLine": 4,
                         "startColumn": 5,
-                        "endLine": 8,
+                        "endLine": 10,
                         "endColumn": 6,
-                        "start": 15,
-                        "end": 201
+                        "start": 167,
+                        "end": 353
                     },
                     "endTag": {
-                        "startLine": 8,
+                        "startLine": 10,
                         "startColumn": 6,
-                        "endLine": 8,
+                        "endLine": 10,
                         "endColumn": 12,
-                        "start": 201,
-                        "end": 207
+                        "start": 353,
+                        "end": 359
                     }
                 },
                 "attributes": [
@@ -65,21 +91,21 @@
                             "end": 7,
                             "name": "scoped",
                             "location": {
-                                "startLine": 3,
+                                "startLine": 5,
                                 "startColumn": 9,
-                                "endLine": 3,
+                                "endLine": 5,
                                 "endColumn": 35,
-                                "start": 29,
-                                "end": 55
+                                "start": 181,
+                                "end": 207
                             }
                         },
                         "location": {
-                            "startLine": 3,
+                            "startLine": 5,
                             "startColumn": 9,
-                            "endLine": 3,
+                            "endLine": 5,
                             "endColumn": 35,
-                            "start": 29,
-                            "end": 55
+                            "start": 181,
+                            "end": 207
                         }
                     },
                     {
@@ -91,21 +117,21 @@
                             "end": 7,
                             "name": "scoped",
                             "location": {
-                                "startLine": 4,
+                                "startLine": 6,
                                 "startColumn": 9,
-                                "endLine": 4,
+                                "endLine": 6,
                                 "endColumn": 40,
-                                "start": 64,
-                                "end": 95
+                                "start": 216,
+                                "end": 247
                             }
                         },
                         "location": {
-                            "startLine": 4,
+                            "startLine": 6,
                             "startColumn": 9,
-                            "endLine": 4,
+                            "endLine": 6,
                             "endColumn": 40,
-                            "start": 64,
-                            "end": 95
+                            "start": 216,
+                            "end": 247
                         }
                     },
                     {
@@ -117,21 +143,21 @@
                             "end": 7,
                             "name": "scoped",
                             "location": {
-                                "startLine": 5,
+                                "startLine": 7,
                                 "startColumn": 9,
-                                "endLine": 5,
+                                "endLine": 7,
                                 "endColumn": 36,
-                                "start": 104,
-                                "end": 131
+                                "start": 256,
+                                "end": 283
                             }
                         },
                         "location": {
-                            "startLine": 5,
+                            "startLine": 7,
                             "startColumn": 9,
-                            "endLine": 5,
+                            "endLine": 7,
                             "endColumn": 36,
-                            "start": 104,
-                            "end": 131
+                            "start": 256,
+                            "end": 283
                         }
                     },
                     {
@@ -143,21 +169,21 @@
                             "end": 7,
                             "name": "scoped",
                             "location": {
-                                "startLine": 6,
+                                "startLine": 8,
                                 "startColumn": 9,
-                                "endLine": 6,
+                                "endLine": 8,
                                 "endColumn": 30,
-                                "start": 140,
-                                "end": 161
+                                "start": 292,
+                                "end": 313
                             }
                         },
                         "location": {
-                            "startLine": 6,
+                            "startLine": 8,
                             "startColumn": 9,
-                            "endLine": 6,
+                            "endLine": 8,
                             "endColumn": 30,
-                            "start": 140,
-                            "end": 161
+                            "start": 292,
+                            "end": 313
                         }
                     },
                     {
@@ -169,21 +195,21 @@
                             "end": 7,
                             "name": "scoped",
                             "location": {
-                                "startLine": 7,
+                                "startLine": 9,
                                 "startColumn": 9,
-                                "endLine": 7,
+                                "endLine": 9,
                                 "endColumn": 34,
-                                "start": 170,
-                                "end": 195
+                                "start": 322,
+                                "end": 347
                             }
                         },
                         "location": {
-                            "startLine": 7,
+                            "startLine": 9,
                             "startColumn": 9,
-                            "endLine": 7,
+                            "endLine": 9,
                             "endColumn": 34,
-                            "start": 170,
-                            "end": 195
+                            "start": 322,
+                            "end": 347
                         }
                     }
                 ],
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/metadata.json
index 2bc87eaa03..d56d3749df 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/metadata.json
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/metadata.json
@@ -5,9 +5,9 @@
             "message": "LWC1057: aria-described-by is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
             "level": 2,
             "location": {
-                "line": 3,
+                "line": 5,
                 "column": 9,
-                "start": 29,
+                "start": 181,
                 "length": 26
             }
         },
@@ -16,9 +16,9 @@
             "message": "LWC1057: aria-active-descendant is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
             "level": 2,
             "location": {
-                "line": 4,
+                "line": 6,
                 "column": 9,
-                "start": 64,
+                "start": 216,
                 "length": 31
             }
         },
@@ -27,9 +27,9 @@
             "message": "LWC1057: aria-error-message is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
             "level": 2,
             "location": {
-                "line": 5,
+                "line": 7,
                 "column": 9,
-                "start": 104,
+                "start": 256,
                 "length": 27
             }
         },
@@ -38,9 +38,9 @@
             "message": "LWC1057: aria-flow-to is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
             "level": 2,
             "location": {
-                "line": 6,
+                "line": 8,
                 "column": 9,
-                "start": 140,
+                "start": 292,
                 "length": 21
             }
         },
@@ -49,9 +49,9 @@
             "message": "LWC1057: aria-labelled-by is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div",
             "level": 2,
             "location": {
-                "line": 7,
+                "line": 9,
                 "column": 9,
-                "start": 170,
+                "start": 322,
                 "length": 25
             }
         }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/not-scoped/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/not-scoped/ast.json
index 8a304c1513..aa32c1848d 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/not-scoped/ast.json
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/not-scoped/ast.json
@@ -4,10 +4,10 @@
         "location": {
             "startLine": 1,
             "startColumn": 1,
-            "endLine": 9,
+            "endLine": 11,
             "endColumn": 12,
             "start": 0,
-            "end": 289,
+            "end": 440,
             "startTag": {
                 "startLine": 1,
                 "startColumn": 1,
@@ -17,42 +17,68 @@
                 "end": 10
             },
             "endTag": {
-                "startLine": 9,
+                "startLine": 11,
                 "startColumn": 1,
-                "endLine": 9,
+                "endLine": 11,
                 "endColumn": 12,
-                "start": 278,
-                "end": 289
+                "start": 429,
+                "end": 440
             }
         },
         "directives": [],
         "children": [
+            {
+                "type": "Comment",
+                "raw": " These are invalid aria attributes ",
+                "value": " These are invalid aria attributes ",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 2,
+                    "endColumn": 47,
+                    "start": 15,
+                    "end": 57
+                }
+            },
+            {
+                "type": "Comment",
+                "raw": " Note the extra '-' after the second word, ex: aria-described-by instead of aria-describedby ",
+                "value": " Note the extra '-' after the second word, ex: aria-described-by instead of aria-describedby ",
+                "location": {
+                    "startLine": 3,
+                    "startColumn": 5,
+                    "endLine": 3,
+                    "endColumn": 105,
+                    "start": 62,
+                    "end": 162
+                }
+            },
             {
                 "type": "Component",
                 "name": "lightning-combobox",
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "location": {
-                    "startLine": 2,
+                    "startLine": 4,
                     "startColumn": 5,
-                    "endLine": 8,
+                    "endLine": 10,
                     "endColumn": 27,
-                    "start": 15,
-                    "end": 277,
+                    "start": 167,
+                    "end": 428,
                     "startTag": {
-                        "startLine": 2,
+                        "startLine": 4,
                         "startColumn": 5,
-                        "endLine": 8,
+                        "endLine": 10,
                         "endColumn": 6,
-                        "start": 15,
-                        "end": 256
+                        "start": 167,
+                        "end": 407
                     },
                     "endTag": {
-                        "startLine": 8,
+                        "startLine": 10,
                         "startColumn": 6,
-                        "endLine": 8,
+                        "endLine": 10,
                         "endColumn": 27,
-                        "start": 256,
-                        "end": 277
+                        "start": 407,
+                        "end": 428
                     }
                 },
                 "attributes": [],
@@ -66,12 +92,12 @@
                             "value": "not-scoped-foo"
                         },
                         "location": {
-                            "startLine": 3,
+                            "startLine": 5,
                             "startColumn": 9,
-                            "endLine": 3,
+                            "endLine": 5,
                             "endColumn": 43,
-                            "start": 44,
-                            "end": 78
+                            "start": 195,
+                            "end": 229
                         }
                     },
                     {
@@ -83,12 +109,12 @@
                             "value": "not-scoped-foo"
                         },
                         "location": {
-                            "startLine": 4,
+                            "startLine": 6,
                             "startColumn": 9,
-                            "endLine": 4,
+                            "endLine": 6,
                             "endColumn": 48,
-                            "start": 87,
-                            "end": 126
+                            "start": 238,
+                            "end": 277
                         }
                     },
                     {
@@ -100,12 +126,12 @@
                             "value": "not-scoped-foo"
                         },
                         "location": {
-                            "startLine": 5,
+                            "startLine": 7,
                             "startColumn": 9,
-                            "endLine": 5,
+                            "endLine": 7,
                             "endColumn": 44,
-                            "start": 135,
-                            "end": 170
+                            "start": 286,
+                            "end": 321
                         }
                     },
                     {
@@ -117,12 +143,12 @@
                             "value": "not-scoped-foo"
                         },
                         "location": {
-                            "startLine": 6,
+                            "startLine": 8,
                             "startColumn": 9,
-                            "endLine": 6,
+                            "endLine": 8,
                             "endColumn": 38,
-                            "start": 179,
-                            "end": 208
+                            "start": 330,
+                            "end": 359
                         }
                     },
                     {
@@ -134,12 +160,12 @@
                             "value": "not-scoped-foo"
                         },
                         "location": {
-                            "startLine": 7,
+                            "startLine": 9,
                             "startColumn": 9,
-                            "endLine": 7,
+                            "endLine": 9,
                             "endColumn": 42,
-                            "start": 217,
-                            "end": 250
+                            "start": 368,
+                            "end": 401
                         }
                     }
                 ],

From b1989896acf65d6be6fbab5301d1825bc0ee91f4 Mon Sep 17 00:00:00 2001
From: James Tu <jmsjtu@gmail.com>
Date: Tue, 19 Mar 2024 11:43:02 -0700
Subject: [PATCH 09/10] perf: apply static parts optimization to dynamic
 attributes - part 2 (#4056)

---
 package.json                                  |   2 +-
 packages/@lwc/aria-reflection/package.json    |   2 +-
 .../@lwc/babel-plugin-component/package.json  |   6 +-
 packages/@lwc/compiler/package.json           |  12 +-
 packages/@lwc/engine-core/package.json        |   8 +-
 .../@lwc/engine-core/src/framework/api.ts     |   8 +-
 .../engine-core/src/framework/hydration.ts    |  50 +-
 .../src/framework/modules/attrs.ts            |  15 +-
 .../src/framework/modules/static-parts.ts     |  46 +-
 .../engine-core/src/framework/rendering.ts    |   2 +-
 .../engine-core/src/framework/template.ts     |  91 +++-
 .../@lwc/engine-core/src/framework/vnodes.ts  |   2 +-
 packages/@lwc/engine-dom/package.json         |   6 +-
 packages/@lwc/engine-server/package.json      |   8 +-
 .../src/__tests__/fixtures.spec.ts            |   4 +-
 .../attribute-boolean-expr/expected.html      |   5 +
 .../fixtures/attribute-boolean-expr/index.js  |   2 +
 .../attribute-boolean-expr.html               |   3 +
 .../attribute-boolean-expr.js                 |   7 +
 .../attribute-namespace/expected.html         |   9 +
 .../fixtures/attribute-namespace/index.js     |   2 +
 .../attribute-namespace.html                  |   8 +
 .../attribute-namespace.js                    |   6 +
 .../attribute-scoped-id/expected.html         |  24 +
 .../fixtures/attribute-scoped-id/index.js     |   2 +
 .../modules/x/scoped-id/scoped-id.html        |  17 +
 .../modules/x/scoped-id/scoped-id.js          |  16 +
 packages/@lwc/engine-server/src/serializer.ts |   2 +
 packages/@lwc/errors/package.json             |   2 +-
 packages/@lwc/features/package.json           |   4 +-
 packages/@lwc/integration-karma/package.json  |  12 +-
 .../attributes/expression/index.spec.js       |  17 +
 .../attributes/expression/x/main/main.html    |   3 +
 .../attributes/expression/x/main/main.js      |   5 +
 .../mismatches/attrs-expression/index.spec.js |  26 +
 .../attrs-expression/x/main/main.html         |   3 +
 .../attrs-expression/x/main/main.js           |   5 +
 .../test/static-content/index.spec.js         |  50 ++
 .../attributeExpression.html                  |  10 +
 .../attributeExpression.js                    |   8 +
 .../deepAttributeExpression.html              |  25 +
 .../deepAttributeExpression.js                |   8 +
 packages/@lwc/integration-tests/package.json  |   6 +-
 packages/@lwc/module-resolver/package.json    |   2 +-
 .../perf-benchmarks-components/package.json   |   4 +-
 packages/@lwc/perf-benchmarks/package.json    |  10 +-
 packages/@lwc/rollup-plugin/package.json      |   8 +-
 packages/@lwc/shared/package.json             |   2 +-
 packages/@lwc/shared/src/index.ts             |   1 +
 .../@lwc/shared/src/static-part-tokens.ts     |  13 +
 packages/@lwc/signals/package.json            |   2 +-
 packages/@lwc/style-compiler/package.json     |   4 +-
 packages/@lwc/synthetic-shadow/package.json   |   6 +-
 packages/@lwc/template-compiler/package.json  |   6 +-
 .../expected.js                               |  26 +-
 .../hidden-global-attr/expected.js            |  28 +-
 .../boolean-attribute/required/expected.js    |  48 +-
 .../boolean-attributes-valid/expected.js      |  18 +-
 .../fixtures/attributes/boolean/expected.js   |  18 +-
 .../fixtures/attributes/id/actual.html        |   2 +
 .../__tests__/fixtures/attributes/id/ast.json | 352 +++++++++-----
 .../fixtures/attributes/id/expected.js        |  27 +-
 .../expression/not-scoped/expected.js         |  26 +-
 .../scoped-id/expression/scoped/expected.js   |  38 +-
 .../spellcheck/expression/actual.html         |   4 +
 .../attributes/spellcheck/expression/ast.json | 155 ++++++
 .../spellcheck/expression/expected.js         |  28 ++
 .../spellcheck/expression/metadata.json       |   3 +
 .../attributes/tabindex-computed/expected.js  |  20 +-
 .../unquoted-value-unary/expected.js          |  18 +-
 .../static-content-optimization/actual.html   |  10 +
 .../static-content-optimization/ast.json      | 301 ++++++++++++
 .../static-content-optimization/expected.js   |  42 ++
 .../static-content-optimization/metadata.json |   3 +
 .../static-content-optimization/actual.html   |  14 +
 .../static-content-optimization/ast.json      | 459 ++++++++++++++++++
 .../static-content-optimization/expected.js   |  63 +++
 .../static-content-optimization/metadata.json |   3 +
 .../directive-ref/dynamic-ref/expected.js     |  20 +-
 .../href-with-expression-value/expected.js    |  31 +-
 .../deep-data-attrs-only/actual.html          |  13 +
 .../deep-data-attrs-only/ast.json             | 415 ++++++++++++++++
 .../deep-data-attrs-only/expected.js          |  32 ++
 .../deep-data-attrs-only/metadata.json        |   3 +
 .../static-content/deep-data/actual.html      |   2 +
 .../static-content/deep-data/ast.json         | 242 ++++++---
 .../static-content/deep-data/expected.js      |  16 +-
 .../actual.html                               |   4 +-
 .../preserve-comments-off-with-parts/ast.json | 136 ++++--
 .../expected.js                               |   8 +-
 .../actual.html                               |   4 +-
 .../preserve-comments-on-with-parts/ast.json  | 136 ++++--
 .../expected.js                               |   8 +-
 .../static-content/shallow-data/actual.html   |   2 +-
 .../static-content/shallow-data/ast.json      |  51 +-
 .../static-content/shallow-data/expected.js   |   5 +-
 .../svg/scoped-id-dynamic/expected.js         |  37 +-
 .../template-compiler/src/codegen/codegen.ts  |  80 ++-
 .../src/codegen/expression.ts                 |  56 ++-
 .../template-compiler/src/codegen/helpers.ts  |  17 +-
 .../template-compiler/src/codegen/index.ts    |  39 +-
 .../src/codegen/static-element-serializer.ts  |  45 +-
 packages/@lwc/wire-service/package.json       |   6 +-
 packages/lwc/package.json                     |  32 +-
 playground/package.json                       |   6 +-
 105 files changed, 3135 insertions(+), 624 deletions(-)
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/expected.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/index.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/modules/x/attribute-boolean-expr/attribute-boolean-expr.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/modules/x/attribute-boolean-expr/attribute-boolean-expr.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/expected.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/index.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/modules/x/attribute-namespace/attribute-namespace.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/modules/x/attribute-namespace/attribute-namespace.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/expected.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/index.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/modules/x/scoped-id/scoped-id.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/modules/x/scoped-id/scoped-id.js
 create mode 100644 packages/@lwc/integration-karma/test-hydration/attributes/expression/index.spec.js
 create mode 100644 packages/@lwc/integration-karma/test-hydration/attributes/expression/x/main/main.html
 create mode 100644 packages/@lwc/integration-karma/test-hydration/attributes/expression/x/main/main.js
 create mode 100644 packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js
 create mode 100644 packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/x/main/main.html
 create mode 100644 packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/x/main/main.js
 create mode 100644 packages/@lwc/integration-karma/test/static-content/x/attributeExpression/attributeExpression.html
 create mode 100644 packages/@lwc/integration-karma/test/static-content/x/attributeExpression/attributeExpression.js
 create mode 100644 packages/@lwc/integration-karma/test/static-content/x/deepAttributeExpression/deepAttributeExpression.html
 create mode 100644 packages/@lwc/integration-karma/test/static-content/x/deepAttributeExpression/deepAttributeExpression.js
 create mode 100644 packages/@lwc/shared/src/static-part-tokens.ts
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/actual.html
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/ast.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/expected.js
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/metadata.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/actual.html
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/ast.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/expected.js
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/metadata.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/actual.html
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/ast.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/expected.js
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/metadata.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/actual.html
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/ast.json
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/expected.js
 create mode 100644 packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/metadata.json

diff --git a/package.json b/package.json
index 56e53812c2..564a3f14e8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "lwc-monorepo",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "private": true,
     "description": "Lightning Web Components",
     "repository": {
diff --git a/packages/@lwc/aria-reflection/package.json b/packages/@lwc/aria-reflection/package.json
index 0cf11e2340..8bff5d4090 100644
--- a/packages/@lwc/aria-reflection/package.json
+++ b/packages/@lwc/aria-reflection/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/aria-reflection",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "ARIA element reflection polyfill for strings",
     "keywords": [
         "aom",
diff --git a/packages/@lwc/babel-plugin-component/package.json b/packages/@lwc/babel-plugin-component/package.json
index 33a0a41ce7..0e9f009eff 100644
--- a/packages/@lwc/babel-plugin-component/package.json
+++ b/packages/@lwc/babel-plugin-component/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/babel-plugin-component",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Babel plugin to transform a LWC module",
     "keywords": [
         "lwc"
@@ -43,8 +43,8 @@
     },
     "dependencies": {
         "@babel/helper-module-imports": "7.22.15",
-        "@lwc/errors": "6.3.3",
-        "@lwc/shared": "6.3.3",
+        "@lwc/errors": "6.3.4",
+        "@lwc/shared": "6.3.4",
         "line-column": "~1.0.2"
     },
     "devDependencies": {
diff --git a/packages/@lwc/compiler/package.json b/packages/@lwc/compiler/package.json
index 7ffdc5587f..fd8a42fcb6 100755
--- a/packages/@lwc/compiler/package.json
+++ b/packages/@lwc/compiler/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/compiler",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "LWC compiler",
     "keywords": [
         "lwc"
@@ -48,10 +48,10 @@
         "@babel/plugin-proposal-object-rest-spread": "7.20.7",
         "@babel/plugin-transform-async-to-generator": "7.23.3",
         "@locker/babel-plugin-transform-unforgeables": "0.20.0",
-        "@lwc/babel-plugin-component": "6.3.3",
-        "@lwc/errors": "6.3.3",
-        "@lwc/shared": "6.3.3",
-        "@lwc/style-compiler": "6.3.3",
-        "@lwc/template-compiler": "6.3.3"
+        "@lwc/babel-plugin-component": "6.3.4",
+        "@lwc/errors": "6.3.4",
+        "@lwc/shared": "6.3.4",
+        "@lwc/style-compiler": "6.3.4",
+        "@lwc/template-compiler": "6.3.4"
     }
 }
diff --git a/packages/@lwc/engine-core/package.json b/packages/@lwc/engine-core/package.json
index fc37265402..aa1320f786 100644
--- a/packages/@lwc/engine-core/package.json
+++ b/packages/@lwc/engine-core/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/engine-core",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Core LWC engine APIs.",
     "keywords": [
         "lwc"
@@ -42,11 +42,11 @@
         }
     },
     "dependencies": {
-        "@lwc/features": "6.3.3",
-        "@lwc/shared": "6.3.3"
+        "@lwc/features": "6.3.4",
+        "@lwc/shared": "6.3.4"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0",
-        "@lwc/signals": "6.3.3"
+        "@lwc/signals": "6.3.4"
     }
 }
diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts
index 80b324cda2..7a2a273e43 100644
--- a/packages/@lwc/engine-core/src/framework/api.ts
+++ b/packages/@lwc/engine-core/src/framework/api.ts
@@ -84,9 +84,13 @@ function ssf(slotName: unknown, factory: (value: any, key: any) => VFragment): V
 }
 
 // [st]atic node
-function st(fragmentFactory: () => Element, key: Key, parts?: VStaticPart[]): VStatic {
+function st(
+    fragmentFactory: (parts?: VStaticPart[]) => Element,
+    key: Key,
+    parts?: VStaticPart[]
+): VStatic {
     const owner = getVMBeingRendered()!;
-    const fragment = fragmentFactory();
+    const fragment = fragmentFactory(parts);
     const vnode: VStatic = {
         type: VNodeType.Static,
         sel: undefined,
diff --git a/packages/@lwc/engine-core/src/framework/hydration.ts b/packages/@lwc/engine-core/src/framework/hydration.ts
index a77eb8e70c..2cfd95f257 100644
--- a/packages/@lwc/engine-core/src/framework/hydration.ts
+++ b/packages/@lwc/engine-core/src/framework/hydration.ts
@@ -19,6 +19,7 @@ import {
     StringToLowerCase,
     APIFeature,
     isAPIFeatureEnabled,
+    isFalse,
 } from '@lwc/shared';
 
 import { logError, logWarn } from '../shared/logger';
@@ -48,11 +49,12 @@ import {
     VStatic,
     VFragment,
     isVCustomElement,
+    VStaticPart,
 } from './vnodes';
 
 import { patchProps } from './modules/props';
 import { applyEventListeners } from './modules/events';
-import { mountStaticParts } from './modules/static-parts';
+import { hydrateStaticParts, traverseAndSetElements } from './modules/static-parts';
 import { getScopeTokenClass, getStylesheetTokenHost } from './stylesheet';
 import { renderComponent } from './component';
 import { applyRefs } from './modules/refs';
@@ -226,9 +228,26 @@ function hydrateStaticElement(elm: Node, vnode: VStatic, renderer: RendererAPI):
         return handleMismatch(elm, vnode, renderer);
     }
 
+    return hydrateStaticElementParts(elm, vnode, renderer);
+}
+
+function hydrateStaticElementParts(elm: Element, vnode: VStatic, renderer: RendererAPI) {
+    const { parts } = vnode;
+
+    if (!isUndefined(parts)) {
+        // Elements must first be set on the static part to validate against.
+        traverseAndSetElements(elm, parts, renderer);
+    }
+
+    if (!haveCompatibleStaticParts(vnode, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
+    }
+
     vnode.elm = elm;
 
-    mountStaticParts(elm, vnode, renderer);
+    // Hydration only requires applying event listeners and refs.
+    // All other expressions should be applied during SSR or through the handleMismatch routine.
+    hydrateStaticParts(vnode, renderer);
 
     return elm;
 }
@@ -482,7 +501,7 @@ function isMatchingElement(
         return false;
     }
 
-    const hasCompatibleAttrs = validateAttrs(vnode, elm, renderer, shouldValidateAttr);
+    const hasCompatibleAttrs = validateAttrs(vnode, elm, vnode.owner, renderer, shouldValidateAttr);
     const hasCompatibleClass = shouldValidateAttr('class')
         ? validateClassAttr(vnode, elm, renderer)
         : true;
@@ -514,14 +533,15 @@ function attributeValuesAreEqual(
 }
 
 function validateAttrs(
-    vnode: VBaseElement,
+    node: VBaseElement | VStaticPart,
     elm: Element,
+    owner: VM,
     renderer: RendererAPI,
     shouldValidateAttr: (attrName: string) => boolean
 ): boolean {
     const {
         data: { attrs = {} },
-    } = vnode;
+    } = node;
 
     let nodesAreCompatible = true;
 
@@ -531,7 +551,6 @@ function validateAttrs(
         if (!shouldValidateAttr(attrName)) {
             continue;
         }
-        const { owner } = vnode;
         const { getAttribute } = renderer;
         const elmAttrValue = getAttribute(elm, attrName);
         if (!attributeValuesAreEqual(attrValue, elmAttrValue)) {
@@ -755,3 +774,22 @@ function areCompatibleNodes(client: Node, ssr: Node, vnode: VNode, renderer: Ren
 
     return isCompatibleElements;
 }
+
+function haveCompatibleStaticParts(vnode: VStatic, renderer: RendererAPI) {
+    const { owner, parts } = vnode;
+
+    if (isUndefined(parts)) {
+        return true;
+    }
+
+    // The validation here relies on 2 key invariants:
+    // 1. It's never the case that `parts` is undefined on the server but defined on the client (or vice-versa)
+    // 2. It's never the case that `parts` has one length on the server but another on the client
+    for (const part of parts) {
+        const hasMatchingAttrs = validateAttrs(part, part.elm!, owner, renderer, () => true);
+        if (isFalse(hasMatchingAttrs)) {
+            return false;
+        }
+    }
+    return true;
+}
diff --git a/packages/@lwc/engine-core/src/framework/modules/attrs.ts b/packages/@lwc/engine-core/src/framework/modules/attrs.ts
index 16d6f88f3f..d47a757a37 100644
--- a/packages/@lwc/engine-core/src/framework/modules/attrs.ts
+++ b/packages/@lwc/engine-core/src/framework/modules/attrs.ts
@@ -15,29 +15,32 @@ import {
 import { RendererAPI } from '../renderer';
 
 import { EmptyObject } from '../utils';
-import { VBaseElement, VStatic } from '../vnodes';
+import { VBaseElement, VStatic, VStaticPart } from '../vnodes';
 
 const ColonCharCode = 58;
 
 export function patchAttributes(
-    oldVnode: VBaseElement | null,
-    vnode: VBaseElement,
+    oldVnode: VBaseElement | VStaticPart | null,
+    vnode: VBaseElement | VStaticPart,
     renderer: RendererAPI
 ) {
-    const { attrs, external } = vnode.data;
+    const { data, elm } = vnode;
+    const { attrs } = data;
+
     if (isUndefined(attrs)) {
         return;
     }
 
     const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
-
     // Attrs may be the same due to the static content optimization, so we can skip diffing
     if (oldAttrs === attrs) {
         return;
     }
 
-    const { elm } = vnode;
+    // Note VStaticPartData does not contain the external property so it will always default to false.
+    const external = 'external' in data ? data.external : false;
     const { setAttribute, removeAttribute, setProperty } = renderer;
+
     for (const key in attrs) {
         const cur = attrs[key];
         const old = oldAttrs[key];
diff --git a/packages/@lwc/engine-core/src/framework/modules/static-parts.ts b/packages/@lwc/engine-core/src/framework/modules/static-parts.ts
index b8d0d18fef..bae0a923ff 100644
--- a/packages/@lwc/engine-core/src/framework/modules/static-parts.ts
+++ b/packages/@lwc/engine-core/src/framework/modules/static-parts.ts
@@ -10,8 +10,19 @@ import { VStatic, VStaticPart } from '../vnodes';
 import { RendererAPI } from '../renderer';
 import { applyEventListeners } from './events';
 import { applyRefs } from './refs';
+import { patchAttributes } from './attrs';
 
-function traverseAndSetElements(root: Element, parts: VStaticPart[], renderer: RendererAPI): void {
+/**
+ * Given an array of static parts, mounts the DOM element to the part based on the staticPartId
+ * @param root the root element
+ * @param parts an array of VStaticParts
+ * @param renderer the renderer to use
+ */
+export function traverseAndSetElements(
+    root: Element,
+    parts: VStaticPart[],
+    renderer: RendererAPI
+): void {
     const numParts = parts.length;
 
     // Optimization given that, in most cases, there will be one part, and it's just the root
@@ -93,15 +104,17 @@ export function mountStaticParts(root: Element, vnode: VStatic, renderer: Render
         applyEventListeners(part, renderer);
         // Refs must be updated after every render due to refVNodes getting reset before every render
         applyRefs(part, owner);
+        patchAttributes(null, part, renderer);
     }
 }
 
 /**
- * Mounts elements to the newly generated VStatic node
+ * Updates the static elements based on the content of the VStaticParts
  * @param n1 the previous VStatic vnode
  * @param n2 the current VStatic vnode
+ * @param renderer the renderer to use
  */
-export function patchStaticParts(n1: VStatic, n2: VStatic) {
+export function patchStaticParts(n1: VStatic, n2: VStatic, renderer: RendererAPI) {
     // On the server, we don't support ref (because it relies on renderedCallback), nor do we
     // support event listeners (no interactivity), so traversing parts makes no sense
     if (!process.env.IS_BROWSER) {
@@ -128,5 +141,32 @@ export function patchStaticParts(n1: VStatic, n2: VStatic) {
         part.elm = prevParts![i].elm;
         // Refs must be updated after every render due to refVNodes getting reset before every render
         applyRefs(part, currPartsOwner);
+        patchAttributes(prevParts![i], part, renderer);
+    }
+}
+
+/**
+ * Mounts the hydration specific attributes
+ * @param vnode the parent VStatic node
+ * @param renderer the renderer to use
+ */
+export function hydrateStaticParts(vnode: VStatic, renderer: RendererAPI): void {
+    if (!process.env.IS_BROWSER) {
+        return;
+    }
+
+    const { parts, owner } = vnode;
+    if (isUndefined(parts)) {
+        return;
+    }
+
+    // Note, hydration doesn't patch attributes because hydration validation occurs before this routine
+    // which guarantees that the elements are the same.
+    // We only need to apply the parts for things that cannot be done on the server.
+    for (const part of parts) {
+        // Event listeners only need to be applied once when mounting
+        applyEventListeners(part, renderer);
+        // Refs must be updated after every render due to refVNodes getting reset before every render
+        applyRefs(part, owner);
     }
 }
diff --git a/packages/@lwc/engine-core/src/framework/rendering.ts b/packages/@lwc/engine-core/src/framework/rendering.ts
index 26d748da3e..2415667d9c 100644
--- a/packages/@lwc/engine-core/src/framework/rendering.ts
+++ b/packages/@lwc/engine-core/src/framework/rendering.ts
@@ -270,7 +270,7 @@ function patchStatic(n1: VStatic, n2: VStatic, renderer: RendererAPI) {
     // slotAssignments can only apply to the top level element, never to a static part.
     patchSlotAssignment(n1, n2, renderer);
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
-    patchStaticParts(n1, n2);
+    patchStaticParts(n1, n2, renderer);
 }
 
 function patchElement(n1: VElement, n2: VElement, renderer: RendererAPI) {
diff --git a/packages/@lwc/engine-core/src/framework/template.ts b/packages/@lwc/engine-core/src/framework/template.ts
index 2cb85f6815..9f24d6c603 100644
--- a/packages/@lwc/engine-core/src/framework/template.ts
+++ b/packages/@lwc/engine-core/src/framework/template.ts
@@ -8,6 +8,7 @@ import {
     ArrayUnshift,
     assert,
     create,
+    htmlEscape,
     isArray,
     isNull,
     isTrue,
@@ -16,6 +17,7 @@ import {
     keys,
     noop,
     toString,
+    STATIC_PART_TOKEN_ID,
 } from '@lwc/shared';
 
 import { logError } from '../shared/logger';
@@ -30,7 +32,7 @@ import {
     TemplateCache,
     VM,
 } from './vm';
-import { assertNotProd } from './utils';
+import { assertNotProd, EmptyObject } from './utils';
 import { defaultEmptyTemplate, isTemplateRegistered } from './secure-template';
 import {
     createStylesheet,
@@ -40,7 +42,7 @@ import {
 } from './stylesheet';
 import { logOperationEnd, logOperationStart, OperationId } from './profiler';
 import { getTemplateOrSwappedTemplate, setActiveVM } from './hot-swaps';
-import { VNodes } from './vnodes';
+import { VNodes, VStaticPart } from './vnodes';
 import { RendererAPI } from './renderer';
 
 export interface Template {
@@ -110,6 +112,69 @@ function validateLightDomTemplate(template: Template, vm: VM) {
     }
 }
 
+// This function serializes the expressions generated by static content optimization.
+// Currently this is only needed for SSR.
+// TODO [#4078]: Split the implementation between @lwc/engine-dom and @lwc/engine-server
+function buildSerializeExpressionFn(parts?: VStaticPart[]) {
+    if (process.env.IS_BROWSER || isUndefined(parts)) {
+        return () => '';
+    }
+    const partIdsToParts = new Map<string, VStaticPart>();
+    for (const staticPart of parts) {
+        partIdsToParts.set(`${staticPart.partId}`, staticPart);
+    }
+    return (partToken: string) => {
+        // The partTokens are split into 3 section:
+        // 1. The first character represents the expression type (attribute, class, style, or text).
+        // 2. The characters from index 1 to the first occurrence of a ':' is the partId.
+        // 3. Everything after the first ':' represents the attribute name.
+        // For example: a0:data-name, a = an attribute, 0 = partId, data-name = attribute name.
+        const type = partToken.charAt(0);
+        const delimiterIndex = partToken.indexOf(':');
+        const partId = partToken.substring(1, delimiterIndex);
+        const rest = partToken.substring(delimiterIndex + 1);
+        const part = partIdsToParts.get(partId) ?? EmptyObject;
+
+        let result = '';
+        switch (type) {
+            case STATIC_PART_TOKEN_ID.ATTRIBUTE:
+                result = serializeAttribute(part, rest);
+                break;
+            case STATIC_PART_TOKEN_ID.CLASS: // class
+                // TODO [#3624]: Add class serialization
+                break;
+            case STATIC_PART_TOKEN_ID.STYLE: // style
+                // TODO [#3624]: Add style serialization
+                break;
+            case STATIC_PART_TOKEN_ID.TEXT: // text
+                // TODO [#3624]: Add text serialization
+                break;
+            default:
+                // This should not be reachable
+                throw new Error(
+                    `LWC internal error, unrecognized part token during serialization ${partToken}`
+                );
+        }
+        return result;
+    };
+}
+
+function serializeAttribute(part: VStaticPart, name: string) {
+    const {
+        data: { attrs = {} },
+    } = part;
+    const rawValue = attrs[name];
+    let value = '';
+    // The undefined and null checks here are designed to match patchAttributes routine.
+    if (!isUndefined(rawValue) && !isNull(rawValue)) {
+        const stringifiedValue = String(rawValue);
+        value = stringifiedValue.length
+            ? ` ${name}="${htmlEscape(stringifiedValue, true)}"`
+            : ` ${name}`;
+    }
+    return value;
+}
+
 const enum FragmentCache {
     HAS_SCOPED_STYLE = 1 << 0,
     SHADOW_MODE_SYNTHETIC = 1 << 1,
@@ -137,13 +202,13 @@ if (process.env.NODE_ENV === 'test-karma-lwc') {
 
 function buildParseFragmentFn(
     createFragmentFn: (html: string, renderer: RendererAPI) => Element
-): (strings: string[], ...keys: number[]) => () => Element {
-    return (strings: string[], ...keys: number[]) => {
+): (strings: string[], ...keys: (string | number)[]) => () => Element {
+    return (strings: string[], ...keys: (string | number)[]) => {
         const cache = create(null);
 
         registerFragmentCache(cache);
 
-        return function (): Element {
+        return function (parts?: VStaticPart[]): Element {
             const {
                 context: { hasScopedStyles, stylesheetToken, legacyStylesheetToken },
                 shadowMode,
@@ -162,8 +227,13 @@ function buildParseFragmentFn(
                 cacheKey |= FragmentCache.SHADOW_MODE_SYNTHETIC;
             }
 
-            if (!isUndefined(cache[cacheKey])) {
-                return cache[cacheKey];
+            // Cache is only here to prevent calling innerHTML multiple times which doesn't happen on the server.
+            if (process.env.IS_BROWSER) {
+                // Disable this on the server to prevent cache poisoning when expressions are used.
+                const cached = cache[cacheKey];
+                if (!isUndefined(cached)) {
+                    return cached;
+                }
             }
 
             // If legacy stylesheet tokens are required, then add them to the rendered string
@@ -177,6 +247,10 @@ function buildParseFragmentFn(
             const attrToken =
                 hasStyleToken && isSyntheticShadow ? ' ' + stylesheetTokenToRender : '';
 
+            // TODO [#3624]: The implementation of this function should be specific to @lwc/engine-dom and @lwc/engine-server.
+            // Find a way to split this in a future refactor.
+            const serializeExpression = buildSerializeExpressionFn(parts);
+
             let htmlFragment = '';
             for (let i = 0, n = keys.length; i < n; i++) {
                 switch (keys[i]) {
@@ -192,6 +266,9 @@ function buildParseFragmentFn(
                     case 3: // ${1}${2}
                         htmlFragment += strings[i] + classAttrToken + attrToken;
                         break;
+                    default: // expressions ${partId:attributeName/textId}
+                        htmlFragment += strings[i] + serializeExpression(keys[i] as string);
+                        break;
                 }
             }
 
diff --git a/packages/@lwc/engine-core/src/framework/vnodes.ts b/packages/@lwc/engine-core/src/framework/vnodes.ts
index ea040890c9..0ae4b97676 100644
--- a/packages/@lwc/engine-core/src/framework/vnodes.ts
+++ b/packages/@lwc/engine-core/src/framework/vnodes.ts
@@ -54,7 +54,7 @@ export interface VStaticPart {
     readonly data: VStaticPartData;
     elm: Element | undefined;
 }
-export type VStaticPartData = Pick<VElementData, 'on' | 'ref'>;
+export type VStaticPartData = Pick<VElementData, 'on' | 'ref' | 'attrs'>;
 
 export interface VStatic extends BaseVNode {
     readonly type: VNodeType.Static;
diff --git a/packages/@lwc/engine-dom/package.json b/packages/@lwc/engine-dom/package.json
index 421923c901..32bb294a78 100644
--- a/packages/@lwc/engine-dom/package.json
+++ b/packages/@lwc/engine-dom/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/engine-dom",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Renders LWC components in a DOM environment.",
     "keywords": [
         "lwc"
@@ -42,8 +42,8 @@
         }
     },
     "devDependencies": {
-        "@lwc/engine-core": "6.3.3",
-        "@lwc/shared": "6.3.3"
+        "@lwc/engine-core": "6.3.4",
+        "@lwc/shared": "6.3.4"
     },
     "lwc": {
         "modules": [
diff --git a/packages/@lwc/engine-server/package.json b/packages/@lwc/engine-server/package.json
index 663c529ca3..e5232f55c6 100644
--- a/packages/@lwc/engine-server/package.json
+++ b/packages/@lwc/engine-server/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/engine-server",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Renders LWC components in a server environment.",
     "keywords": [
         "lwc"
@@ -42,9 +42,9 @@
         }
     },
     "devDependencies": {
-        "@lwc/engine-core": "6.3.3",
-        "@lwc/rollup-plugin": "6.3.3",
-        "@lwc/shared": "6.3.3",
+        "@lwc/engine-core": "6.3.4",
+        "@lwc/rollup-plugin": "6.3.4",
+        "@lwc/shared": "6.3.4",
         "@parse5/tools": "^0.4.0",
         "@rollup/plugin-virtual": "^3.0.1",
         "parse5": "^7.1.2"
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts b/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts
index 0ddeaa6b78..f852b618cb 100755
--- a/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts
@@ -42,12 +42,14 @@ async function compileFixture({ input, dirname }: { input: string; dirname: stri
                 ],
             }),
         ],
-        onwarn(warning) {
+        onwarn(warning, warn) {
             if (warning.message.includes('LWC1187')) {
                 // TODO [#3331]: The existing lwc:dynamic fixture test will generate warnings that can be safely suppressed.
                 // The warning message is expected and appears when the compiler detects usage of the directive.
                 // We plan to remove the directive in a future release, see #3331 for details.
                 warnings.push(warning);
+            } else {
+                warn(warning);
             }
         },
     });
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/expected.html
new file mode 100644
index 0000000000..cb313bddff
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/expected.html
@@ -0,0 +1,5 @@
+<x-attribute-boolean-expr>
+  <template shadowrootmode="open">
+    <input readonly disabled title="foo">
+  </template>
+</x-attribute-boolean-expr>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/index.js
new file mode 100644
index 0000000000..e66254e83f
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/index.js
@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-boolean-expr';
+export { default } from 'x/attribute-boolean-expr';
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/modules/x/attribute-boolean-expr/attribute-boolean-expr.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/modules/x/attribute-boolean-expr/attribute-boolean-expr.html
new file mode 100644
index 0000000000..fc5c9f59c2
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/modules/x/attribute-boolean-expr/attribute-boolean-expr.html
@@ -0,0 +1,3 @@
+<template>
+    <input readonly={readOnly} disabled title="foo" />
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/modules/x/attribute-boolean-expr/attribute-boolean-expr.js b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/modules/x/attribute-boolean-expr/attribute-boolean-expr.js
new file mode 100644
index 0000000000..ebcca02d4c
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean-expr/modules/x/attribute-boolean-expr/attribute-boolean-expr.js
@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    get readOnly() {
+        return true;
+    }
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/expected.html
new file mode 100644
index 0000000000..ea4609bec8
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/expected.html
@@ -0,0 +1,9 @@
+<x-attribute-namespace>
+  <template shadowrootmode="open">
+    <a xml:lang="french">
+    </a>
+    <svg>
+      <image xlink:title="bonjour"/>
+    </svg>
+  </template>
+</x-attribute-namespace>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/index.js
new file mode 100644
index 0000000000..c5c695bbf7
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/index.js
@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-namespace';
+export { default } from 'x/attribute-namespace';
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/modules/x/attribute-namespace/attribute-namespace.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/modules/x/attribute-namespace/attribute-namespace.html
new file mode 100644
index 0000000000..81a103c0bf
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/modules/x/attribute-namespace/attribute-namespace.html
@@ -0,0 +1,8 @@
+<template>
+    <!-- xml -->
+    <a xml:lang={lang}></a>
+    <svg>
+        <!-- svg -->
+        <image xlink:title={title}></image>
+    </svg>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/modules/x/attribute-namespace/attribute-namespace.js b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/modules/x/attribute-namespace/attribute-namespace.js
new file mode 100644
index 0000000000..403a18cf79
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-namespace/modules/x/attribute-namespace/attribute-namespace.js
@@ -0,0 +1,6 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api lang = 'french';
+    @api title = 'bonjour';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/expected.html
new file mode 100644
index 0000000000..6ae63a2102
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/expected.html
@@ -0,0 +1,24 @@
+<x-attribute-scoped-id>
+  <template shadowrootmode="open">
+    <div class="sanjo" id="sanjo">
+    </div>
+    <div>
+      <a class="anchor-fragment-url" href="#sanjo" data-id="#sanjo">
+        fragment url
+      </a>
+      <a class="anchor-relative-url" href="/shijo#kawaramachi" data-id="/shijo#kawaramachi">
+        relative url
+      </a>
+      <a class="anchor-absolute-url" href="https://www.salesforce.com/jp/" data-id="https://www.salesforce.com/jp/">
+        absolute url
+      </a>
+    </div>
+    <div>
+      <map name="blackdot">
+        <area class="area-fragment-url" href="#sanjo" data-id="#sanjo" shape="circle" coords="75,75,75">
+        <area class="area-relative-url" href="/shijo#kawaramachi" data-id="/shijo#kawaramachi" shape="circle" coords="75,75,75">
+        <area class="area-absolute-url" href="https://www.salesforce.com/jp/" data-id="https://www.salesforce.com/jp/" shape="circle" coords="75,75,75">
+      </map>
+    </div>
+  </template>
+</x-attribute-scoped-id>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/index.js
new file mode 100644
index 0000000000..b2afa9c9d8
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/index.js
@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-scoped-id';
+export { default } from 'x/scoped-id';
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/modules/x/scoped-id/scoped-id.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/modules/x/scoped-id/scoped-id.html
new file mode 100644
index 0000000000..615feb4b8e
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/modules/x/scoped-id/scoped-id.html
@@ -0,0 +1,17 @@
+<template>
+    <div class="sanjo" id={attrValue}></div>
+
+    <div>
+        <a class="anchor-fragment-url" href={fragmentUrl} data-id={fragmentUrl}>fragment url</a>
+        <a class="anchor-relative-url" href={relativeUrl} data-id={relativeUrl}>relative url</a>
+        <a class="anchor-absolute-url" href={absoluteUrl} data-id={absoluteUrl}>absolute url</a>
+    </div>
+
+    <div>
+        <map name="blackdot">
+            <area class="area-fragment-url" href={fragmentUrl} data-id={fragmentUrl} shape="circle" coords="75,75,75" />
+            <area class="area-relative-url" href={relativeUrl} data-id={relativeUrl} shape="circle" coords="75,75,75" />
+            <area class="area-absolute-url" href={absoluteUrl} data-id={absoluteUrl} shape="circle" coords="75,75,75" />
+        </map>
+    </div>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/modules/x/scoped-id/scoped-id.js b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/modules/x/scoped-id/scoped-id.js
new file mode 100644
index 0000000000..f0caed3e37
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-scoped-id/modules/x/scoped-id/scoped-id.js
@@ -0,0 +1,16 @@
+import { LightningElement } from 'lwc';
+
+export default class HrefDynamic extends LightningElement {
+    get attrValue() {
+        return 'sanjo';
+    }
+    get fragmentUrl() {
+        return '#sanjo';
+    }
+    get relativeUrl() {
+        return '/shijo#kawaramachi';
+    }
+    get absoluteUrl() {
+        return 'https://www.salesforce.com/jp/';
+    }
+}
diff --git a/packages/@lwc/engine-server/src/serializer.ts b/packages/@lwc/engine-server/src/serializer.ts
index f86318f21d..9b455b0978 100644
--- a/packages/@lwc/engine-server/src/serializer.ts
+++ b/packages/@lwc/engine-server/src/serializer.ts
@@ -22,6 +22,8 @@ import {
 } from './types';
 import { validateStyleTextContents } from './utils/validate-style-text-contents';
 
+// Note that for statically optimized content the expression serialization is done in
+// buildParseFragmentFn in @lwc/engine-core. It takes the same logic used here.
 function serializeAttributes(attributes: HostAttribute[]): string {
     return attributes
         .map((attr) =>
diff --git a/packages/@lwc/errors/package.json b/packages/@lwc/errors/package.json
index a51c9415d3..bd58f6f15a 100644
--- a/packages/@lwc/errors/package.json
+++ b/packages/@lwc/errors/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/errors",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "LWC Error Utilities",
     "keywords": [
         "lwc"
diff --git a/packages/@lwc/features/package.json b/packages/@lwc/features/package.json
index 90183933ba..e20314dec8 100644
--- a/packages/@lwc/features/package.json
+++ b/packages/@lwc/features/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/features",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "LWC Features Flags",
     "keywords": [
         "lwc"
@@ -42,6 +42,6 @@
         }
     },
     "dependencies": {
-        "@lwc/shared": "6.3.3"
+        "@lwc/shared": "6.3.4"
     }
 }
diff --git a/packages/@lwc/integration-karma/package.json b/packages/@lwc/integration-karma/package.json
index ba8fe1b133..b0111e9e14 100644
--- a/packages/@lwc/integration-karma/package.json
+++ b/packages/@lwc/integration-karma/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@lwc/integration-karma",
     "private": true,
-    "version": "6.3.3",
+    "version": "6.3.4",
     "scripts": {
         "start": "KARMA_MODE=watch karma start ./scripts/karma-configs/test/local.js",
         "test": "karma start ./scripts/karma-configs/test/local.js --single-run --browsers ChromeHeadless",
@@ -17,11 +17,11 @@
         "karma-sauce-launcher-fix-firefox": "using a fork to work around https://github.com/karma-runner/karma-sauce-launcher/issues/275"
     },
     "devDependencies": {
-        "@lwc/compiler": "6.3.3",
-        "@lwc/engine-dom": "6.3.3",
-        "@lwc/engine-server": "6.3.3",
-        "@lwc/rollup-plugin": "6.3.3",
-        "@lwc/synthetic-shadow": "6.3.3",
+        "@lwc/compiler": "6.3.4",
+        "@lwc/engine-dom": "6.3.4",
+        "@lwc/engine-server": "6.3.4",
+        "@lwc/rollup-plugin": "6.3.4",
+        "@lwc/synthetic-shadow": "6.3.4",
         "chokidar": "^3.6.0",
         "istanbul-lib-coverage": "^3.2.2",
         "istanbul-lib-report": "^3.0.1",
diff --git a/packages/@lwc/integration-karma/test-hydration/attributes/expression/index.spec.js b/packages/@lwc/integration-karma/test-hydration/attributes/expression/index.spec.js
new file mode 100644
index 0000000000..5eab1e2f9d
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/attributes/expression/index.spec.js
@@ -0,0 +1,17 @@
+export default {
+    clientProps: {
+        foo: 'foo',
+    },
+    snapshot(target) {
+        const div = target.shadowRoot.querySelector('div');
+        return {
+            div,
+            foo: div.getAttribute('data-foo'),
+        };
+    },
+    test(target, snapshots) {
+        const div = target.shadowRoot.querySelector('div');
+        expect(div).toBe(snapshots.div);
+        expect(div.getAttribute('data-foo')).toBe(snapshots.foo);
+    },
+};
diff --git a/packages/@lwc/integration-karma/test-hydration/attributes/expression/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/attributes/expression/x/main/main.html
new file mode 100644
index 0000000000..3d8e7daedc
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/attributes/expression/x/main/main.html
@@ -0,0 +1,3 @@
+<template>
+    <div data-foo={foo}></div>
+</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/attributes/expression/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/attributes/expression/x/main/main.js
new file mode 100644
index 0000000000..3d2456f1a4
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/attributes/expression/x/main/main.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    foo = 'foo';
+}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js
new file mode 100644
index 0000000000..6a984ac720
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/index.spec.js
@@ -0,0 +1,26 @@
+export default {
+    props: {
+        foo: 'server',
+    },
+    clientProps: {
+        foo: 'client',
+    },
+    snapshot(target) {
+        const div = target.shadowRoot.querySelector('div');
+        return {
+            div,
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        const div = target.shadowRoot.querySelector('div');
+        expect(div).not.toBe(snapshots.div);
+        expect(div.getAttribute('data-foo')).toBe('client');
+        expect(div.getAttribute('data-static')).toBe('same-value');
+
+        expect(consoleCalls.error).toHaveSize(2);
+        expect(consoleCalls.error[0][0].message).toContain(
+            'Mismatch hydrating element <div>: attribute "data-foo" has different values, expected "client" but found "server"'
+        );
+        expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
+    },
+};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/x/main/main.html
new file mode 100644
index 0000000000..1a3f98cdd6
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/x/main/main.html
@@ -0,0 +1,3 @@
+<template>
+    <div data-foo={foo} data-static="same-value"></div>
+</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/x/main/main.js
new file mode 100644
index 0000000000..869ac698f9
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/mismatches/attrs-expression/x/main/main.js
@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api foo;
+}
diff --git a/packages/@lwc/integration-karma/test/static-content/index.spec.js b/packages/@lwc/integration-karma/test/static-content/index.spec.js
index 043b1d010d..91967626c4 100644
--- a/packages/@lwc/integration-karma/test/static-content/index.spec.js
+++ b/packages/@lwc/integration-karma/test/static-content/index.spec.js
@@ -16,6 +16,8 @@ import ListenerStaticWithUpdates from 'x/listenerStaticWithUpdates';
 import DeepListener from 'x/deepListener';
 import Comments from 'x/comments';
 import PreserveComments from 'x/preserveComments';
+import AttributeExpression from 'x/attributeExpression';
+import DeepAttributeExpression from 'x/DeepAttributeExpression';
 
 if (!process.env.NATIVE_SHADOW) {
     describe('Mixed mode for static content', () => {
@@ -432,3 +434,51 @@ describe('static parts applies to comments correctly', () => {
         expect(refs.bar).toBe(bar);
     });
 });
+
+describe('static optimization with attributes', () => {
+    it('applies expressions on mount', async () => {
+        const elm = createElement('x-attribute-expression', { is: AttributeExpression });
+        document.body.appendChild(elm);
+        await Promise.resolve();
+
+        const nodes = extractDataIds(elm);
+        expect(nodes['loaded-on-mount'].getAttribute('data-mount')).toEqual('loaded on mount');
+        expect(nodes['loaded-on-mount-nested'].getAttribute('data-mount')).toEqual(
+            'loaded on mount'
+        );
+    });
+
+    it('updates expressions when data changes', async () => {
+        const elm = createElement('x-attribute-expression', { is: AttributeExpression });
+        document.body.appendChild(elm);
+        await Promise.resolve();
+
+        const nodes = extractDataIds(elm);
+        expect(nodes['loaded-on-update'].getAttribute('data-update')).toBe(null);
+        expect(nodes['loaded-on-update-nested'].getAttribute('data-update')).toBe(null);
+
+        elm.update = 'expression updated';
+        await Promise.resolve();
+
+        expect(nodes['loaded-on-update'].getAttribute('data-update')).toEqual('expression updated');
+        expect(nodes['loaded-on-update-nested'].getAttribute('data-update')).toEqual(
+            'expression updated'
+        );
+    });
+
+    it('applies expression from deeply nested data structure', async () => {
+        const elm = createElement('x-deep-attribute-expression', { is: DeepAttributeExpression });
+        document.body.appendChild(elm);
+        await Promise.resolve();
+
+        const nodes = extractDataIds(elm);
+        expect(nodes['deep1'].getAttribute('data-dynamic')).toEqual('1');
+        expect(nodes['deep1nested'].getAttribute('data-dynamic')).toEqual('1');
+        expect(nodes['deep2'].getAttribute('data-dynamic')).toEqual('2');
+        expect(nodes['deep2nested'].getAttribute('data-dynamic')).toEqual('2');
+        expect(nodes['deep3'].getAttribute('data-dynamic')).toEqual('3');
+        expect(nodes['deep3nested'].getAttribute('data-dynamic')).toEqual('3');
+        expect(nodes['deep4'].getAttribute('data-dynamic')).toEqual('4');
+        expect(nodes['deep4nested'].getAttribute('data-dynamic')).toEqual('4');
+    });
+});
diff --git a/packages/@lwc/integration-karma/test/static-content/x/attributeExpression/attributeExpression.html b/packages/@lwc/integration-karma/test/static-content/x/attributeExpression/attributeExpression.html
new file mode 100644
index 0000000000..adfe84ff8d
--- /dev/null
+++ b/packages/@lwc/integration-karma/test/static-content/x/attributeExpression/attributeExpression.html
@@ -0,0 +1,10 @@
+<template>
+    <div data-id="loaded-on-mount" data-mount={mount}></div>
+    <div>
+        <div data-id="loaded-on-mount-nested" data-mount={mount}></div>
+    </div>
+    <div data-id="loaded-on-update" data-update={update}></div>
+    <div>
+        <div data-id="loaded-on-update-nested" data-update={update}></div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/integration-karma/test/static-content/x/attributeExpression/attributeExpression.js b/packages/@lwc/integration-karma/test/static-content/x/attributeExpression/attributeExpression.js
new file mode 100644
index 0000000000..bb65cc8824
--- /dev/null
+++ b/packages/@lwc/integration-karma/test/static-content/x/attributeExpression/attributeExpression.js
@@ -0,0 +1,8 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    mount = 'loaded on mount';
+
+    @api
+    update;
+}
diff --git a/packages/@lwc/integration-karma/test/static-content/x/deepAttributeExpression/deepAttributeExpression.html b/packages/@lwc/integration-karma/test/static-content/x/deepAttributeExpression/deepAttributeExpression.html
new file mode 100644
index 0000000000..cbbc73643d
--- /dev/null
+++ b/packages/@lwc/integration-karma/test/static-content/x/deepAttributeExpression/deepAttributeExpression.html
@@ -0,0 +1,25 @@
+<template>
+    <!-- 1 level deep -->
+    <div data-id="deep1" data-dynamic={one}></div>
+    <div>
+        <div data-id="deep1nested" data-dynamic={one}></div>
+    </div>
+
+    <!-- 2 levels deep -->
+    <div data-id="deep2" data-dynamic={un.deux}></div>
+    <div>
+        <div data-id="deep2nested" data-dynamic={un.deux}></div>
+    </div>
+
+    <!-- 3 levels deep -->
+    <div data-id="deep3" data-dynamic={uno.dos.tres}></div>
+    <div>
+        <div data-id="deep3nested" data-dynamic={uno.dos.tres}></div>
+    </div>
+
+    <!-- 4 levels deep -->
+    <div data-id="deep4" data-dynamic={ichi.ni.san.shi}></div>
+    <div>
+        <div data-id="deep4nested" data-dynamic={ichi.ni.san.shi}></div>
+    </div>
+</template>
diff --git a/packages/@lwc/integration-karma/test/static-content/x/deepAttributeExpression/deepAttributeExpression.js b/packages/@lwc/integration-karma/test/static-content/x/deepAttributeExpression/deepAttributeExpression.js
new file mode 100644
index 0000000000..30bc67f6b6
--- /dev/null
+++ b/packages/@lwc/integration-karma/test/static-content/x/deepAttributeExpression/deepAttributeExpression.js
@@ -0,0 +1,8 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    one = 1;
+    un = { deux: 2 };
+    uno = { dos: { tres: 3 } };
+    ichi = { ni: { san: { shi: 4 } } };
+}
diff --git a/packages/@lwc/integration-tests/package.json b/packages/@lwc/integration-tests/package.json
index 4b06b9d9de..76ca400a82 100644
--- a/packages/@lwc/integration-tests/package.json
+++ b/packages/@lwc/integration-tests/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@lwc/integration-tests",
     "private": true,
-    "version": "6.3.3",
+    "version": "6.3.4",
     "scripts": {
         "build": "node scripts/build.js",
         "build:dev": "MODE=dev yarn build",
@@ -16,7 +16,7 @@
         "sauce:prod:ci": "MODE=prod yarn build:prod && MODE=prod ../../../scripts/ci/retry.sh wdio ./scripts/wdio.sauce.conf.js"
     },
     "devDependencies": {
-        "@lwc/rollup-plugin": "6.3.3",
+        "@lwc/rollup-plugin": "6.3.4",
         "@wdio/cli": "^8.33.1",
         "@wdio/local-runner": "^8.33.1",
         "@wdio/mocha-framework": "^8.33.1",
@@ -25,7 +25,7 @@
         "@wdio/static-server-service": "^8.32.4",
         "deepmerge": "^4.3.0",
         "dotenv": "^16.4.5",
-        "lwc": "6.3.3",
+        "lwc": "6.3.4",
         "minimist": "^1.2.8",
         "webdriverio": "^8.33.1"
     }
diff --git a/packages/@lwc/module-resolver/package.json b/packages/@lwc/module-resolver/package.json
index 3f11350c2e..b1572c15f4 100644
--- a/packages/@lwc/module-resolver/package.json
+++ b/packages/@lwc/module-resolver/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/module-resolver",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Resolves paths for LWC components",
     "keywords": [
         "lwc"
diff --git a/packages/@lwc/perf-benchmarks-components/package.json b/packages/@lwc/perf-benchmarks-components/package.json
index 9dd5b21221..3b1df13a58 100644
--- a/packages/@lwc/perf-benchmarks-components/package.json
+++ b/packages/@lwc/perf-benchmarks-components/package.json
@@ -1,12 +1,12 @@
 {
     "name": "@lwc/perf-benchmarks-components",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "private": true,
     "scripts": {
         "build": "rm -fr dist && rollup -c ./rollup.config.mjs"
     },
     "devDependencies": {
-        "@lwc/rollup-plugin": "6.3.3"
+        "@lwc/rollup-plugin": "6.3.4"
     },
     "nx": {
         "targets": {
diff --git a/packages/@lwc/perf-benchmarks/package.json b/packages/@lwc/perf-benchmarks/package.json
index 90c143cdab..0d59447737 100644
--- a/packages/@lwc/perf-benchmarks/package.json
+++ b/packages/@lwc/perf-benchmarks/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@lwc/perf-benchmarks",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "private": true,
     "scripts": {
         "build": "rm -fr dist && rollup -c  ./rollup.config.mjs && node scripts/build.js && ./scripts/fix-deps.sh",
@@ -17,10 +17,10 @@
         "Also note that we use legacy versions of rollup-plugin-node-resolve and rollup-plugin-commonjs because Best uses an old version of Rollup."
     ],
     "dependencies": {
-        "@lwc/engine-dom": "6.3.3",
-        "@lwc/engine-server": "6.3.3",
-        "@lwc/perf-benchmarks-components": "6.3.3",
-        "@lwc/synthetic-shadow": "6.3.3"
+        "@lwc/engine-dom": "6.3.4",
+        "@lwc/engine-server": "6.3.4",
+        "@lwc/perf-benchmarks-components": "6.3.4",
+        "@lwc/synthetic-shadow": "6.3.4"
     },
     "devDependencies": {
         "@best/cli": "^11.0.0",
diff --git a/packages/@lwc/rollup-plugin/package.json b/packages/@lwc/rollup-plugin/package.json
index ecb9c44415..0559d1e1dc 100644
--- a/packages/@lwc/rollup-plugin/package.json
+++ b/packages/@lwc/rollup-plugin/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/rollup-plugin",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Rollup plugin to compile LWC",
     "keywords": [
         "lwc"
@@ -42,12 +42,12 @@
         }
     },
     "dependencies": {
-        "@lwc/compiler": "6.3.3",
-        "@lwc/module-resolver": "6.3.3",
+        "@lwc/compiler": "6.3.4",
+        "@lwc/module-resolver": "6.3.4",
         "@rollup/pluginutils": "~5.1.0"
     },
     "devDependencies": {
-        "@lwc/errors": "6.3.3"
+        "@lwc/errors": "6.3.4"
     },
     "peerDependencies": {
         "rollup": "^1.2.0||^2.0.0||^3.0.0||^4.0.0"
diff --git a/packages/@lwc/shared/package.json b/packages/@lwc/shared/package.json
index 48d005c44f..2fb45bfdc3 100644
--- a/packages/@lwc/shared/package.json
+++ b/packages/@lwc/shared/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/shared",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Utilities and methods that are shared across packages",
     "keywords": [
         "lwc"
diff --git a/packages/@lwc/shared/src/index.ts b/packages/@lwc/shared/src/index.ts
index b5e7e918fd..091638e8c2 100644
--- a/packages/@lwc/shared/src/index.ts
+++ b/packages/@lwc/shared/src/index.ts
@@ -15,5 +15,6 @@ export * from './html-attributes';
 export * from './html-escape';
 export * from './namespaces';
 export * from './meta';
+export * from './static-part-tokens';
 
 export { assert };
diff --git a/packages/@lwc/shared/src/static-part-tokens.ts b/packages/@lwc/shared/src/static-part-tokens.ts
new file mode 100644
index 0000000000..925c545052
--- /dev/null
+++ b/packages/@lwc/shared/src/static-part-tokens.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+export const enum STATIC_PART_TOKEN_ID {
+    ATTRIBUTE = 'a',
+    CLASS = 'c',
+    STYLE = 's',
+    TEXT = 't',
+}
diff --git a/packages/@lwc/signals/package.json b/packages/@lwc/signals/package.json
index 1f2ec78cd7..5fc0d00e8e 100644
--- a/packages/@lwc/signals/package.json
+++ b/packages/@lwc/signals/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/signals",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Provides the interface to interact with reactivity from outside the framework",
     "keywords": [
         "lwc"
diff --git a/packages/@lwc/style-compiler/package.json b/packages/@lwc/style-compiler/package.json
index 5d7b741064..b7e9823ad7 100644
--- a/packages/@lwc/style-compiler/package.json
+++ b/packages/@lwc/style-compiler/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/style-compiler",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Transform style sheet to be consumed by the LWC engine",
     "keywords": [
         "lwc"
@@ -42,7 +42,7 @@
         }
     },
     "dependencies": {
-        "@lwc/shared": "6.3.3",
+        "@lwc/shared": "6.3.4",
         "postcss": "~8.4.35",
         "postcss-selector-parser": "~6.0.15",
         "postcss-value-parser": "~4.2.0"
diff --git a/packages/@lwc/synthetic-shadow/package.json b/packages/@lwc/synthetic-shadow/package.json
index 585b08ecac..bf12c9f20d 100644
--- a/packages/@lwc/synthetic-shadow/package.json
+++ b/packages/@lwc/synthetic-shadow/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/synthetic-shadow",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Synthetic Shadow Root for LWC",
     "keywords": [
         "lwc"
@@ -42,8 +42,8 @@
         }
     },
     "devDependencies": {
-        "@lwc/features": "6.3.3",
-        "@lwc/shared": "6.3.3"
+        "@lwc/features": "6.3.4",
+        "@lwc/shared": "6.3.4"
     },
     "lwc": {
         "modules": [
diff --git a/packages/@lwc/template-compiler/package.json b/packages/@lwc/template-compiler/package.json
index 817a9720d8..6efc1893b3 100644
--- a/packages/@lwc/template-compiler/package.json
+++ b/packages/@lwc/template-compiler/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/template-compiler",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Template compiler package",
     "keywords": [
         "lwc"
@@ -42,8 +42,8 @@
         }
     },
     "dependencies": {
-        "@lwc/errors": "6.3.3",
-        "@lwc/shared": "6.3.3",
+        "@lwc/errors": "6.3.4",
+        "@lwc/shared": "6.3.4",
         "acorn": "8.10.0",
         "astring": "~1.8.6",
         "estree-walker": "~2.0.2",
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-href-with-id-expression/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-href-with-id-expression/expected.js
index e21442b9c1..e1e041b8fe 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-href-with-id-expression/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/attribute-href-with-id-expression/expected.js
@@ -1,37 +1,37 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<a${"a0:href"}${3}>KIX</a>`;
 const stc0 = {
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     fid: api_scoped_frag_id,
-    t: api_text,
+    sp: api_static_part,
+    st: api_static_fragment,
     h: api_element,
     gid: api_scoped_id,
+    t: api_text,
   } = $api;
   return [
-    api_element(
-      "a",
-      {
+    api_static_fragment($fragment1, 1, [
+      api_static_part(0, {
         attrs: {
           href: api_scoped_frag_id($cmp.narita),
         },
-        key: 0,
-      },
-      [api_text("KIX")]
-    ),
+      }),
+    ]),
     api_element("map", stc0, [
       api_element("area", {
         attrs: {
           href: api_scoped_frag_id("#haneda"),
         },
-        key: 2,
+        key: 3,
       }),
       api_element("area", {
         attrs: {
           href: api_scoped_frag_id("#chubu"),
         },
-        key: 3,
+        key: 4,
       }),
     ]),
     api_element(
@@ -40,7 +40,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         attrs: {
           id: api_scoped_id("#narita"),
         },
-        key: 4,
+        key: 5,
       },
       [api_text("Time to travel!")]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
index 520240d635..a4c778b9cf 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
@@ -3,53 +3,51 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p hidden${3}>boolean present</p>`;
 const $fragment2 = parseFragment`<p hidden=""${3}>empty string, should be true</p>`;
 const $fragment3 = parseFragment`<p hidden="other than true"${3}>string value, should be true</p>`;
-const $fragment4 = parseFragment`<p hidden="3"${3}>integer value, should be true</p>`;
+const $fragment4 = parseFragment`<p${"a0:hidden"}${3}>computed value, should be resolved in component</p>`;
+const $fragment5 = parseFragment`<p hidden="3"${3}>integer value, should be true</p>`;
 const stc0 = {
   props: {
     hidden: true,
   },
-  key: 9,
+  key: 10,
 };
 const stc1 = {
   props: {
     hidden: true,
   },
-  key: 10,
+  key: 11,
 };
 const stc2 = {
   props: {
     hidden: true,
   },
-  key: 11,
+  key: 12,
 };
 const stc3 = {
   props: {
     hidden: true,
   },
-  key: 13,
+  key: 14,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     st: api_static_fragment,
+    sp: api_static_part,
     t: api_text,
-    h: api_element,
     c: api_custom_element,
   } = $api;
   return [
     api_static_fragment($fragment1, 1),
     api_static_fragment($fragment2, 3),
     api_static_fragment($fragment3, 5),
-    api_element(
-      "p",
-      {
+    api_static_fragment($fragment4, 7, [
+      api_static_part(0, {
         attrs: {
           hidden: $cmp.computed ? "" : null,
         },
-        key: 6,
-      },
-      [api_text("computed value, should be resolved in component")]
-    ),
-    api_static_fragment($fragment4, 8),
+      }),
+    ]),
+    api_static_fragment($fragment5, 9),
     api_custom_element("x-foo", _xFoo, stc0, [api_text("boolean present")]),
     api_custom_element("x-foo", _xFoo, stc1, [
       api_text("empty string, should be true"),
@@ -64,7 +62,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         props: {
           hidden: $cmp.computed,
         },
-        key: 12,
+        key: 13,
       },
       [api_text("computed value, should be resolved in component")]
     ),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
index 6f1ed49731..4e3f732f86 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/required/expected.js
@@ -3,38 +3,36 @@ import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<input required value="boolean present"${3}>`;
 const $fragment2 = parseFragment`<input required="" value="empty string"${3}>`;
 const $fragment3 = parseFragment`<input required="other than true" value="string value"${3}>`;
-const $fragment4 = parseFragment`<input required="3" value="integer value"${3}>`;
+const $fragment4 = parseFragment`<input${"a0:required"} value="computed value"${3}>`;
+const $fragment5 = parseFragment`<input required="3" value="integer value"${3}>`;
 const stc0 = {
-  value: "computed value",
-};
-const stc1 = {
   props: {
     required: true,
   },
-  key: 9,
+  key: 10,
 };
-const stc2 = {
+const stc1 = {
   props: {
     required: "",
   },
-  key: 10,
+  key: 11,
 };
-const stc3 = {
+const stc2 = {
   props: {
     required: "other than true",
   },
-  key: 11,
+  key: 12,
 };
-const stc4 = {
+const stc3 = {
   props: {
     required: "3",
   },
-  key: 13,
+  key: 14,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     st: api_static_fragment,
-    h: api_element,
+    sp: api_static_part,
     t: api_text,
     c: api_custom_element,
   } = $api;
@@ -42,17 +40,17 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     api_static_fragment($fragment1, 1),
     api_static_fragment($fragment2, 3),
     api_static_fragment($fragment3, 5),
-    api_element("input", {
-      attrs: {
-        required: $cmp.computed ? "" : null,
-      },
-      props: stc0,
-      key: 6,
-    }),
-    api_static_fragment($fragment4, 8),
-    api_custom_element("x-foo", _xFoo, stc1, [api_text("boolean present")]),
-    api_custom_element("x-foo", _xFoo, stc2, [api_text("empty string")]),
-    api_custom_element("x-foo", _xFoo, stc3, [api_text("string value")]),
+    api_static_fragment($fragment4, 7, [
+      api_static_part(0, {
+        attrs: {
+          required: $cmp.computed ? "" : null,
+        },
+      }),
+    ]),
+    api_static_fragment($fragment5, 9),
+    api_custom_element("x-foo", _xFoo, stc0, [api_text("boolean present")]),
+    api_custom_element("x-foo", _xFoo, stc1, [api_text("empty string")]),
+    api_custom_element("x-foo", _xFoo, stc2, [api_text("string value")]),
     api_custom_element(
       "x-foo",
       _xFoo,
@@ -60,11 +58,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         props: {
           required: $cmp.computed,
         },
-        key: 12,
+        key: 13,
       },
       [api_text("computed value, should be resolved in component")]
     ),
-    api_custom_element("x-foo", _xFoo, stc4, [api_text("integer value")]),
+    api_custom_element("x-foo", _xFoo, stc3, [api_text("integer value")]),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
index a6d0380449..6bc16df8d1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attributes-valid/expected.js
@@ -1,6 +1,7 @@
 import _xFoo from "x/foo";
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p hidden${3}>x</p>`;
+const $fragment2 = parseFragment`<input${"a0:readonly"} disabled title="foo"${3}>`;
 const stc0 = {
   props: {
     autofocus: "true",
@@ -25,19 +26,18 @@ function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     st: api_static_fragment,
     c: api_custom_element,
-    h: api_element,
+    sp: api_static_part,
   } = $api;
   return [
     api_static_fragment($fragment1, 1),
     api_custom_element("x-foo", _xFoo, stc0),
-    api_element("input", {
-      attrs: {
-        readonly: $cmp.getReadOnly ? "" : null,
-        disabled: "",
-        title: "foo",
-      },
-      key: 3,
-    }),
+    api_static_fragment($fragment2, 4, [
+      api_static_part(0, {
+        attrs: {
+          readonly: $cmp.getReadOnly ? "" : null,
+        },
+      }),
+    ]),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
index 34e923c106..2518ecfe43 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean/expected.js
@@ -1,17 +1,17 @@
 import { parseFragment, registerTemplate } from "lwc";
 const $fragment1 = parseFragment`<p hidden${3}>x</p>`;
+const $fragment2 = parseFragment`<input${"a0:readonly"} disabled title="foo"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { st: api_static_fragment, h: api_element } = $api;
+  const { st: api_static_fragment, sp: api_static_part } = $api;
   return [
     api_static_fragment($fragment1, 1),
-    api_element("input", {
-      attrs: {
-        readonly: $cmp.getReadOnly ? "" : null,
-        disabled: "",
-        title: "foo",
-      },
-      key: 2,
-    }),
+    api_static_fragment($fragment2, 3, [
+      api_static_part(0, {
+        attrs: {
+          readonly: $cmp.getReadOnly ? "" : null,
+        },
+      }),
+    ]),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/actual.html
index 2398e2cb25..e7ad2c9711 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/actual.html
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/actual.html
@@ -3,9 +3,11 @@
     <x-description id="bar"></x-description>
     <x-description id="baz"></x-description>
     <x-textarea id="foo" aria-describedby="bar baz"></x-textarea>
+    <x-textarea id={computed} aria-describedby="bar baz"></x-textarea>
 
     <label for="boof">label text</label>
     <input id="boof">
+    <input id={computed}>
 
     <template for:each={things} for:item="thing">
         <p key={thing.key} id={thing.id}>description text</p>
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/ast.json
index 8b61cc17d1..e7e9a5c324 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/ast.json
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/id/ast.json
@@ -4,10 +4,10 @@
         "location": {
             "startLine": 1,
             "startColumn": 1,
-            "endLine": 14,
+            "endLine": 16,
             "endColumn": 12,
             "start": 0,
-            "end": 469,
+            "end": 566,
             "startTag": {
                 "startLine": 1,
                 "startColumn": 1,
@@ -17,12 +17,12 @@
                 "end": 10
             },
             "endTag": {
-                "startLine": 14,
+                "startLine": 16,
                 "startColumn": 1,
-                "endLine": 14,
+                "endLine": 16,
                 "endColumn": 12,
-                "start": 458,
-                "end": 469
+                "start": 555,
+                "end": 566
             }
         },
         "directives": [],
@@ -252,32 +252,111 @@
                 "listeners": [],
                 "children": []
             },
+            {
+                "type": "Component",
+                "name": "x-textarea",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 6,
+                    "startColumn": 5,
+                    "endLine": 6,
+                    "endColumn": 71,
+                    "start": 209,
+                    "end": 275,
+                    "startTag": {
+                        "startLine": 6,
+                        "startColumn": 5,
+                        "endLine": 6,
+                        "endColumn": 58,
+                        "start": 209,
+                        "end": 262
+                    },
+                    "endTag": {
+                        "startLine": 6,
+                        "startColumn": 58,
+                        "endLine": 6,
+                        "endColumn": 71,
+                        "start": 262,
+                        "end": 275
+                    }
+                },
+                "attributes": [],
+                "properties": [
+                    {
+                        "type": "Property",
+                        "name": "id",
+                        "attributeName": "id",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 9,
+                            "name": "computed",
+                            "location": {
+                                "startLine": 6,
+                                "startColumn": 17,
+                                "endLine": 6,
+                                "endColumn": 30,
+                                "start": 221,
+                                "end": 234
+                            }
+                        },
+                        "location": {
+                            "startLine": 6,
+                            "startColumn": 17,
+                            "endLine": 6,
+                            "endColumn": 30,
+                            "start": 221,
+                            "end": 234
+                        }
+                    },
+                    {
+                        "type": "Property",
+                        "name": "ariaDescribedBy",
+                        "attributeName": "aria-describedby",
+                        "value": {
+                            "type": "Literal",
+                            "value": "bar baz"
+                        },
+                        "location": {
+                            "startLine": 6,
+                            "startColumn": 31,
+                            "endLine": 6,
+                            "endColumn": 57,
+                            "start": 235,
+                            "end": 261
+                        }
+                    }
+                ],
+                "directives": [],
+                "listeners": [],
+                "children": []
+            },
             {
                 "type": "Element",
                 "name": "label",
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "location": {
-                    "startLine": 7,
+                    "startLine": 8,
                     "startColumn": 5,
-                    "endLine": 7,
+                    "endLine": 8,
                     "endColumn": 41,
-                    "start": 210,
-                    "end": 246,
+                    "start": 281,
+                    "end": 317,
                     "startTag": {
-                        "startLine": 7,
+                        "startLine": 8,
                         "startColumn": 5,
-                        "endLine": 7,
+                        "endLine": 8,
                         "endColumn": 23,
-                        "start": 210,
-                        "end": 228
+                        "start": 281,
+                        "end": 299
                     },
                     "endTag": {
-                        "startLine": 7,
+                        "startLine": 8,
                         "startColumn": 33,
-                        "endLine": 7,
+                        "endLine": 8,
                         "endColumn": 41,
-                        "start": 238,
-                        "end": 246
+                        "start": 309,
+                        "end": 317
                     }
                 },
                 "attributes": [
@@ -289,12 +368,12 @@
                             "value": "boof"
                         },
                         "location": {
-                            "startLine": 7,
+                            "startLine": 8,
                             "startColumn": 12,
-                            "endLine": 7,
+                            "endLine": 8,
                             "endColumn": 22,
-                            "start": 217,
-                            "end": 227
+                            "start": 288,
+                            "end": 298
                         }
                     }
                 ],
@@ -310,12 +389,12 @@
                             "value": "label text"
                         },
                         "location": {
-                            "startLine": 7,
+                            "startLine": 8,
                             "startColumn": 23,
-                            "endLine": 7,
+                            "endLine": 8,
                             "endColumn": 33,
-                            "start": 228,
-                            "end": 238
+                            "start": 299,
+                            "end": 309
                         }
                     }
                 ]
@@ -325,19 +404,19 @@
                 "name": "input",
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "location": {
-                    "startLine": 8,
+                    "startLine": 9,
                     "startColumn": 5,
-                    "endLine": 8,
+                    "endLine": 9,
                     "endColumn": 22,
-                    "start": 251,
-                    "end": 268,
+                    "start": 322,
+                    "end": 339,
                     "startTag": {
-                        "startLine": 8,
+                        "startLine": 9,
                         "startColumn": 5,
-                        "endLine": 8,
+                        "endLine": 9,
                         "endColumn": 22,
-                        "start": 251,
-                        "end": 268
+                        "start": 322,
+                        "end": 339
                     }
                 },
                 "attributes": [
@@ -349,12 +428,65 @@
                             "value": "boof"
                         },
                         "location": {
-                            "startLine": 8,
+                            "startLine": 9,
                             "startColumn": 12,
-                            "endLine": 8,
+                            "endLine": 9,
                             "endColumn": 21,
-                            "start": 258,
-                            "end": 267
+                            "start": 329,
+                            "end": 338
+                        }
+                    }
+                ],
+                "properties": [],
+                "directives": [],
+                "listeners": [],
+                "children": []
+            },
+            {
+                "type": "Element",
+                "name": "input",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 10,
+                    "startColumn": 5,
+                    "endLine": 10,
+                    "endColumn": 26,
+                    "start": 344,
+                    "end": 365,
+                    "startTag": {
+                        "startLine": 10,
+                        "startColumn": 5,
+                        "endLine": 10,
+                        "endColumn": 26,
+                        "start": 344,
+                        "end": 365
+                    }
+                },
+                "attributes": [
+                    {
+                        "type": "Attribute",
+                        "name": "id",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 9,
+                            "name": "computed",
+                            "location": {
+                                "startLine": 10,
+                                "startColumn": 12,
+                                "endLine": 10,
+                                "endColumn": 25,
+                                "start": 351,
+                                "end": 364
+                            }
+                        },
+                        "location": {
+                            "startLine": 10,
+                            "startColumn": 12,
+                            "endLine": 10,
+                            "endColumn": 25,
+                            "start": 351,
+                            "end": 364
                         }
                     }
                 ],
@@ -371,41 +503,41 @@
                     "end": 7,
                     "name": "things",
                     "location": {
-                        "startLine": 10,
+                        "startLine": 12,
                         "startColumn": 15,
-                        "endLine": 10,
+                        "endLine": 12,
                         "endColumn": 32,
-                        "start": 284,
-                        "end": 301
+                        "start": 381,
+                        "end": 398
                     }
                 },
                 "item": {
                     "type": "Identifier",
                     "name": "thing",
                     "location": {
-                        "startLine": 10,
+                        "startLine": 12,
                         "startColumn": 33,
-                        "endLine": 10,
+                        "endLine": 12,
                         "endColumn": 49,
-                        "start": 302,
-                        "end": 318
+                        "start": 399,
+                        "end": 415
                     }
                 },
                 "location": {
-                    "startLine": 10,
+                    "startLine": 12,
                     "startColumn": 5,
-                    "endLine": 13,
+                    "endLine": 15,
                     "endColumn": 16,
-                    "start": 274,
-                    "end": 457
+                    "start": 371,
+                    "end": 554
                 },
                 "directiveLocation": {
-                    "startLine": 10,
+                    "startLine": 12,
                     "startColumn": 15,
-                    "endLine": 10,
+                    "endLine": 12,
                     "endColumn": 32,
-                    "start": 284,
-                    "end": 301
+                    "start": 381,
+                    "end": 398
                 },
                 "children": [
                     {
@@ -413,27 +545,27 @@
                         "name": "p",
                         "namespace": "http://www.w3.org/1999/xhtml",
                         "location": {
-                            "startLine": 11,
+                            "startLine": 13,
                             "startColumn": 9,
-                            "endLine": 11,
+                            "endLine": 13,
                             "endColumn": 62,
-                            "start": 328,
-                            "end": 381,
+                            "start": 425,
+                            "end": 478,
                             "startTag": {
-                                "startLine": 11,
+                                "startLine": 13,
                                 "startColumn": 9,
-                                "endLine": 11,
+                                "endLine": 13,
                                 "endColumn": 42,
-                                "start": 328,
-                                "end": 361
+                                "start": 425,
+                                "end": 458
                             },
                             "endTag": {
-                                "startLine": 11,
+                                "startLine": 13,
                                 "startColumn": 58,
-                                "endLine": 11,
+                                "endLine": 13,
                                 "endColumn": 62,
-                                "start": 377,
-                                "end": 381
+                                "start": 474,
+                                "end": 478
                             }
                         },
                         "attributes": [
@@ -459,21 +591,21 @@
                                     "computed": false,
                                     "optional": false,
                                     "location": {
-                                        "startLine": 11,
+                                        "startLine": 13,
                                         "startColumn": 28,
-                                        "endLine": 11,
+                                        "endLine": 13,
                                         "endColumn": 41,
-                                        "start": 347,
-                                        "end": 360
+                                        "start": 444,
+                                        "end": 457
                                     }
                                 },
                                 "location": {
-                                    "startLine": 11,
+                                    "startLine": 13,
                                     "startColumn": 28,
-                                    "endLine": 11,
+                                    "endLine": 13,
                                     "endColumn": 41,
-                                    "start": 347,
-                                    "end": 360
+                                    "start": 444,
+                                    "end": 457
                                 }
                             }
                         ],
@@ -501,21 +633,21 @@
                                     "computed": false,
                                     "optional": false,
                                     "location": {
-                                        "startLine": 11,
+                                        "startLine": 13,
                                         "startColumn": 12,
-                                        "endLine": 11,
+                                        "endLine": 13,
                                         "endColumn": 27,
-                                        "start": 331,
-                                        "end": 346
+                                        "start": 428,
+                                        "end": 443
                                     }
                                 },
                                 "location": {
-                                    "startLine": 11,
+                                    "startLine": 13,
                                     "startColumn": 12,
-                                    "endLine": 11,
+                                    "endLine": 13,
                                     "endColumn": 27,
-                                    "start": 331,
-                                    "end": 346
+                                    "start": 428,
+                                    "end": 443
                                 }
                             }
                         ],
@@ -529,12 +661,12 @@
                                     "value": "description text"
                                 },
                                 "location": {
-                                    "startLine": 11,
+                                    "startLine": 13,
                                     "startColumn": 42,
-                                    "endLine": 11,
+                                    "endLine": 13,
                                     "endColumn": 58,
-                                    "start": 361,
-                                    "end": 377
+                                    "start": 458,
+                                    "end": 474
                                 }
                             }
                         ]
@@ -544,19 +676,19 @@
                         "name": "input",
                         "namespace": "http://www.w3.org/1999/xhtml",
                         "location": {
-                            "startLine": 12,
+                            "startLine": 14,
                             "startColumn": 9,
-                            "endLine": 12,
+                            "endLine": 14,
                             "endColumn": 60,
-                            "start": 390,
-                            "end": 441,
+                            "start": 487,
+                            "end": 538,
                             "startTag": {
-                                "startLine": 12,
+                                "startLine": 14,
                                 "startColumn": 9,
-                                "endLine": 12,
+                                "endLine": 14,
                                 "endColumn": 60,
-                                "start": 390,
-                                "end": 441
+                                "start": 487,
+                                "end": 538
                             }
                         },
                         "attributes": [
@@ -582,21 +714,21 @@
                                     "computed": false,
                                     "optional": false,
                                     "location": {
-                                        "startLine": 12,
+                                        "startLine": 14,
                                         "startColumn": 32,
-                                        "endLine": 12,
+                                        "endLine": 14,
                                         "endColumn": 59,
-                                        "start": 413,
-                                        "end": 440
+                                        "start": 510,
+                                        "end": 537
                                     }
                                 },
                                 "location": {
-                                    "startLine": 12,
+                                    "startLine": 14,
                                     "startColumn": 32,
-                                    "endLine": 12,
+                                    "endLine": 14,
                                     "endColumn": 59,
-                                    "start": 413,
-                                    "end": 440
+                                    "start": 510,
+                                    "end": 537
                                 }
                             }
                         ],
@@ -624,21 +756,21 @@
                                     "computed": false,
                                     "optional": false,
                                     "location": {
-                                        "startLine": 12,
+                                        "startLine": 14,
                                         "startColumn": 16,
-                                        "endLine": 12,
+                                        "endLine": 14,
                                         "endColumn": 31,
-                                        "start": 397,
-                                        "end": 412
+                                        "start": 494,
+                                        "end": 509
                                     }
                                 },
                                 "location": {
-                                    "startLine": 12,
+                                    "startLine": 14,
                                     "startColumn": 16,
-                                    "endLine": 12,
+                                    "endLine": 14,
                                     "endColumn": 31,
-                                    "start": 397,
-                                    "end": 412
+                                    "start": 494,
+                                    "end": 509
                                 }
                             }
                         ],
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 ddea1efb49..89a6b07f5c 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
@@ -1,13 +1,16 @@
 import _xSubject from "x/subject";
 import _xDescription from "x/description";
 import _xTextarea from "x/textarea";
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<input${"a0:id"}${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     gid: api_scoped_id,
     c: api_custom_element,
     t: api_text,
     h: api_element,
+    sp: api_static_part,
+    st: api_static_fragment,
     k: api_key,
     i: api_iterator,
     f: api_flatten,
@@ -38,13 +41,20 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       key: 3,
     }),
+    api_custom_element("x-textarea", _xTextarea, {
+      props: {
+        id: api_scoped_id($cmp.computed),
+        ariaDescribedBy: api_scoped_id("bar baz"),
+      },
+      key: 4,
+    }),
     api_element(
       "label",
       {
         attrs: {
           for: api_scoped_id("boof"),
         },
-        key: 4,
+        key: 5,
       },
       [api_text("label text")]
     ),
@@ -52,8 +62,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       attrs: {
         id: api_scoped_id("boof"),
       },
-      key: 5,
+      key: 6,
     }),
+    api_static_fragment($fragment1, 8, [
+      api_static_part(0, {
+        attrs: {
+          id: api_scoped_id($cmp.computed),
+        },
+      }),
+    ]),
     api_iterator($cmp.things, function (thing) {
       return [
         api_element(
@@ -62,7 +79,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             attrs: {
               id: api_scoped_id(thing.id),
             },
-            key: api_key(6, thing.key),
+            key: api_key(9, thing.key),
           },
           [api_text("description text")]
         ),
@@ -70,7 +87,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           attrs: {
             "aria-describedby": api_scoped_id(thing.id),
           },
-          key: api_key(7, thing.key),
+          key: api_key(10, thing.key),
         }),
       ];
     }),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/expected.js
index 9bb9c92e8a..18e98acad8 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/not-scoped/expected.js
@@ -1,17 +1,19 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${"a0:aria-described-by"}${"a0:aria-active-descendant"}${"a0:aria-error-message"}${"a0:aria-flow-to"}${"a0:aria-labelled-by"}${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
+  const { sp: api_static_part, st: api_static_fragment } = $api;
   return [
-    api_element("div", {
-      attrs: {
-        "aria-described-by": $cmp.scoped,
-        "aria-active-descendant": $cmp.scoped,
-        "aria-error-message": $cmp.scoped,
-        "aria-flow-to": $cmp.scoped,
-        "aria-labelled-by": $cmp.scoped,
-      },
-      key: 0,
-    }),
+    api_static_fragment($fragment1, 1, [
+      api_static_part(0, {
+        attrs: {
+          "aria-described-by": $cmp.scoped,
+          "aria-active-descendant": $cmp.scoped,
+          "aria-error-message": $cmp.scoped,
+          "aria-flow-to": $cmp.scoped,
+          "aria-labelled-by": $cmp.scoped,
+        },
+      }),
+    ]),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/expected.js
index 9ae73e1463..5b8214dccd 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/scoped-id/expression/scoped/expected.js
@@ -1,21 +1,27 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${"a0:aria-describedby"}${"a0:aria-activedescendant"}${"a0:aria-errormessage"}${"a0:aria-flowto"}${"a0:aria-labelledby"}${"a0:aria-controls"}${"a0:aria-details"}${"a0:aria-owns"}${"a0:for"}${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { gid: api_scoped_id, h: api_element } = $api;
+  const {
+    gid: api_scoped_id,
+    sp: api_static_part,
+    st: api_static_fragment,
+  } = $api;
   return [
-    api_element("div", {
-      attrs: {
-        "aria-describedby": api_scoped_id($cmp.foo),
-        "aria-activedescendant": api_scoped_id($cmp.foo),
-        "aria-errormessage": api_scoped_id($cmp.foo),
-        "aria-flowto": api_scoped_id($cmp.foo),
-        "aria-labelledby": api_scoped_id($cmp.foo),
-        "aria-controls": api_scoped_id($cmp.foo),
-        "aria-details": api_scoped_id($cmp.foo),
-        "aria-owns": api_scoped_id($cmp.foo),
-        for: api_scoped_id($cmp.foo),
-      },
-      key: 0,
-    }),
+    api_static_fragment($fragment1, 1, [
+      api_static_part(0, {
+        attrs: {
+          "aria-describedby": api_scoped_id($cmp.foo),
+          "aria-activedescendant": api_scoped_id($cmp.foo),
+          "aria-errormessage": api_scoped_id($cmp.foo),
+          "aria-flowto": api_scoped_id($cmp.foo),
+          "aria-labelledby": api_scoped_id($cmp.foo),
+          "aria-controls": api_scoped_id($cmp.foo),
+          "aria-details": api_scoped_id($cmp.foo),
+          "aria-owns": api_scoped_id($cmp.foo),
+          for: api_scoped_id($cmp.foo),
+        },
+      }),
+    ]),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/actual.html
new file mode 100644
index 0000000000..1f5f4397b3
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/actual.html
@@ -0,0 +1,4 @@
+<template>
+    <div spellcheck={spellCheck}></div>
+    <x-foo spellcheck={spellCheck}></x-foo>
+</template>
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/ast.json
new file mode 100644
index 0000000000..843b8484a4
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/ast.json
@@ -0,0 +1,155 @@
+{
+    "root": {
+        "type": "Root",
+        "location": {
+            "startLine": 1,
+            "startColumn": 1,
+            "endLine": 4,
+            "endColumn": 12,
+            "start": 0,
+            "end": 106,
+            "startTag": {
+                "startLine": 1,
+                "startColumn": 1,
+                "endLine": 1,
+                "endColumn": 11,
+                "start": 0,
+                "end": 10
+            },
+            "endTag": {
+                "startLine": 4,
+                "startColumn": 1,
+                "endLine": 4,
+                "endColumn": 12,
+                "start": 95,
+                "end": 106
+            }
+        },
+        "directives": [],
+        "children": [
+            {
+                "type": "Element",
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 2,
+                    "endColumn": 40,
+                    "start": 15,
+                    "end": 50,
+                    "startTag": {
+                        "startLine": 2,
+                        "startColumn": 5,
+                        "endLine": 2,
+                        "endColumn": 34,
+                        "start": 15,
+                        "end": 44
+                    },
+                    "endTag": {
+                        "startLine": 2,
+                        "startColumn": 34,
+                        "endLine": 2,
+                        "endColumn": 40,
+                        "start": 44,
+                        "end": 50
+                    }
+                },
+                "attributes": [
+                    {
+                        "type": "Attribute",
+                        "name": "spellcheck",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 11,
+                            "name": "spellCheck",
+                            "location": {
+                                "startLine": 2,
+                                "startColumn": 10,
+                                "endLine": 2,
+                                "endColumn": 33,
+                                "start": 20,
+                                "end": 43
+                            }
+                        },
+                        "location": {
+                            "startLine": 2,
+                            "startColumn": 10,
+                            "endLine": 2,
+                            "endColumn": 33,
+                            "start": 20,
+                            "end": 43
+                        }
+                    }
+                ],
+                "properties": [],
+                "directives": [],
+                "listeners": [],
+                "children": []
+            },
+            {
+                "type": "Component",
+                "name": "x-foo",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 3,
+                    "startColumn": 5,
+                    "endLine": 3,
+                    "endColumn": 44,
+                    "start": 55,
+                    "end": 94,
+                    "startTag": {
+                        "startLine": 3,
+                        "startColumn": 5,
+                        "endLine": 3,
+                        "endColumn": 36,
+                        "start": 55,
+                        "end": 86
+                    },
+                    "endTag": {
+                        "startLine": 3,
+                        "startColumn": 36,
+                        "endLine": 3,
+                        "endColumn": 44,
+                        "start": 86,
+                        "end": 94
+                    }
+                },
+                "attributes": [],
+                "properties": [
+                    {
+                        "type": "Property",
+                        "name": "spellcheck",
+                        "attributeName": "spellcheck",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 11,
+                            "name": "spellCheck",
+                            "location": {
+                                "startLine": 3,
+                                "startColumn": 12,
+                                "endLine": 3,
+                                "endColumn": 35,
+                                "start": 62,
+                                "end": 85
+                            }
+                        },
+                        "location": {
+                            "startLine": 3,
+                            "startColumn": 12,
+                            "endLine": 3,
+                            "endColumn": 35,
+                            "start": 62,
+                            "end": 85
+                        }
+                    }
+                ],
+                "directives": [],
+                "listeners": [],
+                "children": []
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/expected.js
new file mode 100644
index 0000000000..a9ae1f7399
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/expected.js
@@ -0,0 +1,28 @@
+import _xFoo from "x/foo";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${"a0:spellcheck"}${3}></div>`;
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const {
+    sp: api_static_part,
+    st: api_static_fragment,
+    c: api_custom_element,
+  } = $api;
+  return [
+    api_static_fragment($fragment1, 1, [
+      api_static_part(0, {
+        attrs: {
+          spellcheck: $cmp.spellCheck,
+        },
+      }),
+    ]),
+    api_custom_element("x-foo", _xFoo, {
+      props: {
+        spellcheck: $cmp.spellCheck,
+      },
+      key: 2,
+    }),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/spellcheck/expression/metadata.json
@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/tabindex-computed/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/tabindex-computed/expected.js
index 3710b5dc9f..f608bbc9f5 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/tabindex-computed/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/tabindex-computed/expected.js
@@ -1,28 +1,26 @@
 import _xFoo from "x/foo";
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${"a0:tabindex"}${3}>valid</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     ti: api_tab_index,
-    t: api_text,
-    h: api_element,
+    sp: api_static_part,
+    st: api_static_fragment,
     c: api_custom_element,
   } = $api;
   return [
-    api_element(
-      "p",
-      {
+    api_static_fragment($fragment1, 1, [
+      api_static_part(0, {
         attrs: {
           tabindex: api_tab_index($cmp.computed),
         },
-        key: 0,
-      },
-      [api_text("valid")]
-    ),
+      }),
+    ]),
     api_custom_element("x-foo", _xFoo, {
       props: {
         tabIndex: api_tab_index($cmp.computed),
       },
-      key: 1,
+      key: 2,
     }),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unquoted-value-unary/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unquoted-value-unary/expected.js
index 9d558c4d43..14942c30ff 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unquoted-value-unary/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/unquoted-value-unary/expected.js
@@ -1,13 +1,15 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<input${"a0:title"}${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
+  const { sp: api_static_part, st: api_static_fragment } = $api;
   return [
-    api_element("input", {
-      attrs: {
-        title: $cmp.myValue,
-      },
-      key: 0,
-    }),
+    api_static_fragment($fragment1, 1, [
+      api_static_part(0, {
+        attrs: {
+          title: $cmp.myValue,
+        },
+      }),
+    ]),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/actual.html
new file mode 100644
index 0000000000..17248f5aca
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/actual.html
@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <template for:each={items} for:item="item">
+            <div key={item.key}>
+                <span data-dynamic={foo}></span>
+                <span data-static="bar"></span>
+            </div>
+        </template>
+    </div>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/ast.json
new file mode 100644
index 0000000000..196882a640
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/ast.json
@@ -0,0 +1,301 @@
+{
+    "root": {
+        "type": "Root",
+        "location": {
+            "startLine": 1,
+            "startColumn": 1,
+            "endLine": 10,
+            "endColumn": 12,
+            "start": 0,
+            "end": 264,
+            "startTag": {
+                "startLine": 1,
+                "startColumn": 1,
+                "endLine": 1,
+                "endColumn": 11,
+                "start": 0,
+                "end": 10
+            },
+            "endTag": {
+                "startLine": 10,
+                "startColumn": 1,
+                "endLine": 10,
+                "endColumn": 12,
+                "start": 253,
+                "end": 264
+            }
+        },
+        "directives": [],
+        "children": [
+            {
+                "type": "Element",
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 9,
+                    "endColumn": 11,
+                    "start": 15,
+                    "end": 252,
+                    "startTag": {
+                        "startLine": 2,
+                        "startColumn": 5,
+                        "endLine": 2,
+                        "endColumn": 10,
+                        "start": 15,
+                        "end": 20
+                    },
+                    "endTag": {
+                        "startLine": 9,
+                        "startColumn": 5,
+                        "endLine": 9,
+                        "endColumn": 11,
+                        "start": 246,
+                        "end": 252
+                    }
+                },
+                "attributes": [],
+                "properties": [],
+                "directives": [],
+                "listeners": [],
+                "children": [
+                    {
+                        "type": "ForEach",
+                        "expression": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 6,
+                            "name": "items",
+                            "location": {
+                                "startLine": 3,
+                                "startColumn": 19,
+                                "endLine": 3,
+                                "endColumn": 35,
+                                "start": 39,
+                                "end": 55
+                            }
+                        },
+                        "item": {
+                            "type": "Identifier",
+                            "name": "item",
+                            "location": {
+                                "startLine": 3,
+                                "startColumn": 36,
+                                "endLine": 3,
+                                "endColumn": 51,
+                                "start": 56,
+                                "end": 71
+                            }
+                        },
+                        "location": {
+                            "startLine": 3,
+                            "startColumn": 9,
+                            "endLine": 8,
+                            "endColumn": 20,
+                            "start": 29,
+                            "end": 241
+                        },
+                        "directiveLocation": {
+                            "startLine": 3,
+                            "startColumn": 19,
+                            "endLine": 3,
+                            "endColumn": 35,
+                            "start": 39,
+                            "end": 55
+                        },
+                        "children": [
+                            {
+                                "type": "Element",
+                                "name": "div",
+                                "namespace": "http://www.w3.org/1999/xhtml",
+                                "location": {
+                                    "startLine": 4,
+                                    "startColumn": 13,
+                                    "endLine": 7,
+                                    "endColumn": 19,
+                                    "start": 85,
+                                    "end": 221,
+                                    "startTag": {
+                                        "startLine": 4,
+                                        "startColumn": 13,
+                                        "endLine": 4,
+                                        "endColumn": 33,
+                                        "start": 85,
+                                        "end": 105
+                                    },
+                                    "endTag": {
+                                        "startLine": 7,
+                                        "startColumn": 13,
+                                        "endLine": 7,
+                                        "endColumn": 19,
+                                        "start": 215,
+                                        "end": 221
+                                    }
+                                },
+                                "attributes": [],
+                                "properties": [],
+                                "directives": [
+                                    {
+                                        "type": "Directive",
+                                        "name": "Key",
+                                        "value": {
+                                            "type": "MemberExpression",
+                                            "start": 1,
+                                            "end": 9,
+                                            "object": {
+                                                "type": "Identifier",
+                                                "start": 1,
+                                                "end": 5,
+                                                "name": "item"
+                                            },
+                                            "property": {
+                                                "type": "Identifier",
+                                                "start": 6,
+                                                "end": 9,
+                                                "name": "key"
+                                            },
+                                            "computed": false,
+                                            "optional": false,
+                                            "location": {
+                                                "startLine": 4,
+                                                "startColumn": 18,
+                                                "endLine": 4,
+                                                "endColumn": 32,
+                                                "start": 90,
+                                                "end": 104
+                                            }
+                                        },
+                                        "location": {
+                                            "startLine": 4,
+                                            "startColumn": 18,
+                                            "endLine": 4,
+                                            "endColumn": 32,
+                                            "start": 90,
+                                            "end": 104
+                                        }
+                                    }
+                                ],
+                                "listeners": [],
+                                "children": [
+                                    {
+                                        "type": "Element",
+                                        "name": "span",
+                                        "namespace": "http://www.w3.org/1999/xhtml",
+                                        "location": {
+                                            "startLine": 5,
+                                            "startColumn": 17,
+                                            "endLine": 5,
+                                            "endColumn": 49,
+                                            "start": 122,
+                                            "end": 154,
+                                            "startTag": {
+                                                "startLine": 5,
+                                                "startColumn": 17,
+                                                "endLine": 5,
+                                                "endColumn": 42,
+                                                "start": 122,
+                                                "end": 147
+                                            },
+                                            "endTag": {
+                                                "startLine": 5,
+                                                "startColumn": 42,
+                                                "endLine": 5,
+                                                "endColumn": 49,
+                                                "start": 147,
+                                                "end": 154
+                                            }
+                                        },
+                                        "attributes": [
+                                            {
+                                                "type": "Attribute",
+                                                "name": "data-dynamic",
+                                                "value": {
+                                                    "type": "Identifier",
+                                                    "start": 1,
+                                                    "end": 4,
+                                                    "name": "foo",
+                                                    "location": {
+                                                        "startLine": 5,
+                                                        "startColumn": 23,
+                                                        "endLine": 5,
+                                                        "endColumn": 41,
+                                                        "start": 128,
+                                                        "end": 146
+                                                    }
+                                                },
+                                                "location": {
+                                                    "startLine": 5,
+                                                    "startColumn": 23,
+                                                    "endLine": 5,
+                                                    "endColumn": 41,
+                                                    "start": 128,
+                                                    "end": 146
+                                                }
+                                            }
+                                        ],
+                                        "properties": [],
+                                        "directives": [],
+                                        "listeners": [],
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Element",
+                                        "name": "span",
+                                        "namespace": "http://www.w3.org/1999/xhtml",
+                                        "location": {
+                                            "startLine": 6,
+                                            "startColumn": 17,
+                                            "endLine": 6,
+                                            "endColumn": 48,
+                                            "start": 171,
+                                            "end": 202,
+                                            "startTag": {
+                                                "startLine": 6,
+                                                "startColumn": 17,
+                                                "endLine": 6,
+                                                "endColumn": 41,
+                                                "start": 171,
+                                                "end": 195
+                                            },
+                                            "endTag": {
+                                                "startLine": 6,
+                                                "startColumn": 41,
+                                                "endLine": 6,
+                                                "endColumn": 48,
+                                                "start": 195,
+                                                "end": 202
+                                            }
+                                        },
+                                        "attributes": [
+                                            {
+                                                "type": "Attribute",
+                                                "name": "data-static",
+                                                "value": {
+                                                    "type": "Literal",
+                                                    "value": "bar"
+                                                },
+                                                "location": {
+                                                    "startLine": 6,
+                                                    "startColumn": 23,
+                                                    "endLine": 6,
+                                                    "endColumn": 40,
+                                                    "start": 177,
+                                                    "end": 194
+                                                }
+                                            }
+                                        ],
+                                        "properties": [],
+                                        "directives": [],
+                                        "listeners": [],
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/expected.js
new file mode 100644
index 0000000000..3dc577646d
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/expected.js
@@ -0,0 +1,42 @@
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<span${"a0:data-dynamic"}${3}></span>`;
+const $fragment2 = parseFragment`<span data-static="bar"${3}></span>`;
+const stc0 = {
+  key: 0,
+};
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const {
+    k: api_key,
+    sp: api_static_part,
+    st: api_static_fragment,
+    h: api_element,
+    i: api_iterator,
+  } = $api;
+  return [
+    api_element(
+      "div",
+      stc0,
+      api_iterator($cmp.items, function (item) {
+        return api_element(
+          "div",
+          {
+            key: api_key(1, item.key),
+          },
+          [
+            api_static_fragment($fragment1, 3, [
+              api_static_part(0, {
+                attrs: {
+                  "data-dynamic": $cmp.foo,
+                },
+              }),
+            ]),
+            api_static_fragment($fragment2, 5),
+          ]
+        );
+      })
+    ),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/static-content-optimization/metadata.json
@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/actual.html
new file mode 100644
index 0000000000..4440802a11
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/actual.html
@@ -0,0 +1,14 @@
+<template>
+    <template lwc:if={showIf}>
+        <span data-dynamic={insideIf}></span>
+        <span data-static="staticInsideIf"></span>
+    </template>
+    <template lwc:elseif={showElseIf}>
+        <span data-dynamic={insideElseIf}></span>
+        <span data-static="staticInsideElseIf"></span>
+    </template>
+    <template lwc:else>
+        <span data-dynamic={insideElse}></span>
+        <span data-static="staticInsideElse"></span>
+    </template>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/ast.json
new file mode 100644
index 0000000000..388773f44c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/ast.json
@@ -0,0 +1,459 @@
+{
+    "root": {
+        "type": "Root",
+        "location": {
+            "startLine": 1,
+            "startColumn": 1,
+            "endLine": 14,
+            "endColumn": 12,
+            "start": 0,
+            "end": 467,
+            "startTag": {
+                "startLine": 1,
+                "startColumn": 1,
+                "endLine": 1,
+                "endColumn": 11,
+                "start": 0,
+                "end": 10
+            },
+            "endTag": {
+                "startLine": 14,
+                "startColumn": 1,
+                "endLine": 14,
+                "endColumn": 12,
+                "start": 456,
+                "end": 467
+            }
+        },
+        "directives": [],
+        "children": [
+            {
+                "type": "IfBlock",
+                "condition": {
+                    "type": "Identifier",
+                    "start": 1,
+                    "end": 7,
+                    "name": "showIf",
+                    "location": {
+                        "startLine": 2,
+                        "startColumn": 15,
+                        "endLine": 2,
+                        "endColumn": 30,
+                        "start": 25,
+                        "end": 40
+                    }
+                },
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 5,
+                    "endColumn": 16,
+                    "start": 15,
+                    "end": 154
+                },
+                "directiveLocation": {
+                    "startLine": 2,
+                    "startColumn": 15,
+                    "endLine": 2,
+                    "endColumn": 30,
+                    "start": 25,
+                    "end": 40
+                },
+                "children": [
+                    {
+                        "type": "Element",
+                        "name": "span",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "location": {
+                            "startLine": 3,
+                            "startColumn": 9,
+                            "endLine": 3,
+                            "endColumn": 46,
+                            "start": 50,
+                            "end": 87,
+                            "startTag": {
+                                "startLine": 3,
+                                "startColumn": 9,
+                                "endLine": 3,
+                                "endColumn": 39,
+                                "start": 50,
+                                "end": 80
+                            },
+                            "endTag": {
+                                "startLine": 3,
+                                "startColumn": 39,
+                                "endLine": 3,
+                                "endColumn": 46,
+                                "start": 80,
+                                "end": 87
+                            }
+                        },
+                        "attributes": [
+                            {
+                                "type": "Attribute",
+                                "name": "data-dynamic",
+                                "value": {
+                                    "type": "Identifier",
+                                    "start": 1,
+                                    "end": 9,
+                                    "name": "insideIf",
+                                    "location": {
+                                        "startLine": 3,
+                                        "startColumn": 15,
+                                        "endLine": 3,
+                                        "endColumn": 38,
+                                        "start": 56,
+                                        "end": 79
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 3,
+                                    "startColumn": 15,
+                                    "endLine": 3,
+                                    "endColumn": 38,
+                                    "start": 56,
+                                    "end": 79
+                                }
+                            }
+                        ],
+                        "properties": [],
+                        "directives": [],
+                        "listeners": [],
+                        "children": []
+                    },
+                    {
+                        "type": "Element",
+                        "name": "span",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "location": {
+                            "startLine": 4,
+                            "startColumn": 9,
+                            "endLine": 4,
+                            "endColumn": 51,
+                            "start": 96,
+                            "end": 138,
+                            "startTag": {
+                                "startLine": 4,
+                                "startColumn": 9,
+                                "endLine": 4,
+                                "endColumn": 44,
+                                "start": 96,
+                                "end": 131
+                            },
+                            "endTag": {
+                                "startLine": 4,
+                                "startColumn": 44,
+                                "endLine": 4,
+                                "endColumn": 51,
+                                "start": 131,
+                                "end": 138
+                            }
+                        },
+                        "attributes": [
+                            {
+                                "type": "Attribute",
+                                "name": "data-static",
+                                "value": {
+                                    "type": "Literal",
+                                    "value": "staticInsideIf"
+                                },
+                                "location": {
+                                    "startLine": 4,
+                                    "startColumn": 15,
+                                    "endLine": 4,
+                                    "endColumn": 43,
+                                    "start": 102,
+                                    "end": 130
+                                }
+                            }
+                        ],
+                        "properties": [],
+                        "directives": [],
+                        "listeners": [],
+                        "children": []
+                    }
+                ],
+                "else": {
+                    "type": "ElseifBlock",
+                    "condition": {
+                        "type": "Identifier",
+                        "start": 1,
+                        "end": 11,
+                        "name": "showElseIf",
+                        "location": {
+                            "startLine": 6,
+                            "startColumn": 15,
+                            "endLine": 6,
+                            "endColumn": 38,
+                            "start": 169,
+                            "end": 192
+                        }
+                    },
+                    "location": {
+                        "startLine": 6,
+                        "startColumn": 5,
+                        "endLine": 9,
+                        "endColumn": 16,
+                        "start": 159,
+                        "end": 314
+                    },
+                    "directiveLocation": {
+                        "startLine": 6,
+                        "startColumn": 15,
+                        "endLine": 6,
+                        "endColumn": 38,
+                        "start": 169,
+                        "end": 192
+                    },
+                    "children": [
+                        {
+                            "type": "Element",
+                            "name": "span",
+                            "namespace": "http://www.w3.org/1999/xhtml",
+                            "location": {
+                                "startLine": 7,
+                                "startColumn": 9,
+                                "endLine": 7,
+                                "endColumn": 50,
+                                "start": 202,
+                                "end": 243,
+                                "startTag": {
+                                    "startLine": 7,
+                                    "startColumn": 9,
+                                    "endLine": 7,
+                                    "endColumn": 43,
+                                    "start": 202,
+                                    "end": 236
+                                },
+                                "endTag": {
+                                    "startLine": 7,
+                                    "startColumn": 43,
+                                    "endLine": 7,
+                                    "endColumn": 50,
+                                    "start": 236,
+                                    "end": 243
+                                }
+                            },
+                            "attributes": [
+                                {
+                                    "type": "Attribute",
+                                    "name": "data-dynamic",
+                                    "value": {
+                                        "type": "Identifier",
+                                        "start": 1,
+                                        "end": 13,
+                                        "name": "insideElseIf",
+                                        "location": {
+                                            "startLine": 7,
+                                            "startColumn": 15,
+                                            "endLine": 7,
+                                            "endColumn": 42,
+                                            "start": 208,
+                                            "end": 235
+                                        }
+                                    },
+                                    "location": {
+                                        "startLine": 7,
+                                        "startColumn": 15,
+                                        "endLine": 7,
+                                        "endColumn": 42,
+                                        "start": 208,
+                                        "end": 235
+                                    }
+                                }
+                            ],
+                            "properties": [],
+                            "directives": [],
+                            "listeners": [],
+                            "children": []
+                        },
+                        {
+                            "type": "Element",
+                            "name": "span",
+                            "namespace": "http://www.w3.org/1999/xhtml",
+                            "location": {
+                                "startLine": 8,
+                                "startColumn": 9,
+                                "endLine": 8,
+                                "endColumn": 55,
+                                "start": 252,
+                                "end": 298,
+                                "startTag": {
+                                    "startLine": 8,
+                                    "startColumn": 9,
+                                    "endLine": 8,
+                                    "endColumn": 48,
+                                    "start": 252,
+                                    "end": 291
+                                },
+                                "endTag": {
+                                    "startLine": 8,
+                                    "startColumn": 48,
+                                    "endLine": 8,
+                                    "endColumn": 55,
+                                    "start": 291,
+                                    "end": 298
+                                }
+                            },
+                            "attributes": [
+                                {
+                                    "type": "Attribute",
+                                    "name": "data-static",
+                                    "value": {
+                                        "type": "Literal",
+                                        "value": "staticInsideElseIf"
+                                    },
+                                    "location": {
+                                        "startLine": 8,
+                                        "startColumn": 15,
+                                        "endLine": 8,
+                                        "endColumn": 47,
+                                        "start": 258,
+                                        "end": 290
+                                    }
+                                }
+                            ],
+                            "properties": [],
+                            "directives": [],
+                            "listeners": [],
+                            "children": []
+                        }
+                    ],
+                    "else": {
+                        "type": "ElseBlock",
+                        "location": {
+                            "startLine": 10,
+                            "startColumn": 5,
+                            "endLine": 13,
+                            "endColumn": 16,
+                            "start": 319,
+                            "end": 455
+                        },
+                        "directiveLocation": {
+                            "startLine": 10,
+                            "startColumn": 15,
+                            "endLine": 10,
+                            "endColumn": 23,
+                            "start": 329,
+                            "end": 337
+                        },
+                        "children": [
+                            {
+                                "type": "Element",
+                                "name": "span",
+                                "namespace": "http://www.w3.org/1999/xhtml",
+                                "location": {
+                                    "startLine": 11,
+                                    "startColumn": 9,
+                                    "endLine": 11,
+                                    "endColumn": 48,
+                                    "start": 347,
+                                    "end": 386,
+                                    "startTag": {
+                                        "startLine": 11,
+                                        "startColumn": 9,
+                                        "endLine": 11,
+                                        "endColumn": 41,
+                                        "start": 347,
+                                        "end": 379
+                                    },
+                                    "endTag": {
+                                        "startLine": 11,
+                                        "startColumn": 41,
+                                        "endLine": 11,
+                                        "endColumn": 48,
+                                        "start": 379,
+                                        "end": 386
+                                    }
+                                },
+                                "attributes": [
+                                    {
+                                        "type": "Attribute",
+                                        "name": "data-dynamic",
+                                        "value": {
+                                            "type": "Identifier",
+                                            "start": 1,
+                                            "end": 11,
+                                            "name": "insideElse",
+                                            "location": {
+                                                "startLine": 11,
+                                                "startColumn": 15,
+                                                "endLine": 11,
+                                                "endColumn": 40,
+                                                "start": 353,
+                                                "end": 378
+                                            }
+                                        },
+                                        "location": {
+                                            "startLine": 11,
+                                            "startColumn": 15,
+                                            "endLine": 11,
+                                            "endColumn": 40,
+                                            "start": 353,
+                                            "end": 378
+                                        }
+                                    }
+                                ],
+                                "properties": [],
+                                "directives": [],
+                                "listeners": [],
+                                "children": []
+                            },
+                            {
+                                "type": "Element",
+                                "name": "span",
+                                "namespace": "http://www.w3.org/1999/xhtml",
+                                "location": {
+                                    "startLine": 12,
+                                    "startColumn": 9,
+                                    "endLine": 12,
+                                    "endColumn": 53,
+                                    "start": 395,
+                                    "end": 439,
+                                    "startTag": {
+                                        "startLine": 12,
+                                        "startColumn": 9,
+                                        "endLine": 12,
+                                        "endColumn": 46,
+                                        "start": 395,
+                                        "end": 432
+                                    },
+                                    "endTag": {
+                                        "startLine": 12,
+                                        "startColumn": 46,
+                                        "endLine": 12,
+                                        "endColumn": 53,
+                                        "start": 432,
+                                        "end": 439
+                                    }
+                                },
+                                "attributes": [
+                                    {
+                                        "type": "Attribute",
+                                        "name": "data-static",
+                                        "value": {
+                                            "type": "Literal",
+                                            "value": "staticInsideElse"
+                                        },
+                                        "location": {
+                                            "startLine": 12,
+                                            "startColumn": 15,
+                                            "endLine": 12,
+                                            "endColumn": 45,
+                                            "start": 401,
+                                            "end": 431
+                                        }
+                                    }
+                                ],
+                                "properties": [],
+                                "directives": [],
+                                "listeners": [],
+                                "children": []
+                            }
+                        ]
+                    }
+                }
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/expected.js
new file mode 100644
index 0000000000..d420376361
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/expected.js
@@ -0,0 +1,63 @@
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<span${"a0:data-dynamic"}${3}></span>`;
+const $fragment2 = parseFragment`<span data-static="staticInsideIf"${3}></span>`;
+const $fragment3 = parseFragment`<span${"a0:data-dynamic"}${3}></span>`;
+const $fragment4 = parseFragment`<span data-static="staticInsideElseIf"${3}></span>`;
+const $fragment5 = parseFragment`<span${"a0:data-dynamic"}${3}></span>`;
+const $fragment6 = parseFragment`<span data-static="staticInsideElse"${3}></span>`;
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const {
+    sp: api_static_part,
+    st: api_static_fragment,
+    fr: api_fragment,
+  } = $api;
+  return [
+    $cmp.showIf
+      ? api_fragment(
+          0,
+          [
+            api_static_fragment($fragment1, 2, [
+              api_static_part(0, {
+                attrs: {
+                  "data-dynamic": $cmp.insideIf,
+                },
+              }),
+            ]),
+            api_static_fragment($fragment2, 4),
+          ],
+          0
+        )
+      : $cmp.showElseIf
+      ? api_fragment(
+          0,
+          [
+            api_static_fragment($fragment3, 6, [
+              api_static_part(0, {
+                attrs: {
+                  "data-dynamic": $cmp.insideElseIf,
+                },
+              }),
+            ]),
+            api_static_fragment($fragment4, 8),
+          ],
+          0
+        )
+      : api_fragment(
+          0,
+          [
+            api_static_fragment($fragment5, 10, [
+              api_static_part(0, {
+                attrs: {
+                  "data-dynamic": $cmp.insideElse,
+                },
+              }),
+            ]),
+            api_static_fragment($fragment6, 12),
+          ],
+          0
+        ),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-lwc-if-else/static-content-optimization/metadata.json
@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-ref/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-ref/expected.js
index 6c363c3381..dea4129b51 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-ref/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-ref/dynamic-ref/expected.js
@@ -1,14 +1,16 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${"a0:dynamic"}${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
+  const { sp: api_static_part, st: api_static_fragment } = $api;
   return [
-    api_element("div", {
-      attrs: {
-        dynamic: $cmp.dynamic,
-      },
-      ref: "foo",
-      key: 0,
-    }),
+    api_static_fragment($fragment1, 1, [
+      api_static_part(0, {
+        ref: "foo",
+        attrs: {
+          dynamic: $cmp.dynamic,
+        },
+      }),
+    ]),
   ];
   /*LWC compiler vX.X.X*/
 }
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/svg/href-with-expression-value/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/svg/href-with-expression-value/expected.js
index 0485566f1a..646a7c8b47 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/svg/href-with-expression-value/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/renderer-hooks/svg/href-with-expression-value/expected.js
@@ -1,4 +1,5 @@
-import { registerTemplate, renderer } from "lwc";
+import { parseSVGFragment, registerTemplate, renderer } from "lwc";
+const $fragment1 = parseSVGFragment`<circle${"a0:id"} cx="5" cy="5" r="4" stroke="black"${3}/>`;
 const stc0 = {
   attrs: {
     viewBox: "0 0 30 10",
@@ -8,27 +9,29 @@ const stc0 = {
   svg: true,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { gid: api_scoped_id, h: api_element, fid: api_scoped_frag_id } = $api;
+  const {
+    gid: api_scoped_id,
+    sp: api_static_part,
+    st: api_static_fragment,
+    fid: api_scoped_frag_id,
+    h: api_element,
+  } = $api;
   return [
     api_element("svg", stc0, [
-      api_element("circle", {
-        attrs: {
-          id: api_scoped_id($cmp.id),
-          cx: "5",
-          cy: "5",
-          r: "4",
-          stroke: "black",
-        },
-        key: 1,
-        svg: true,
-      }),
+      api_static_fragment($fragment1, 2, [
+        api_static_part(0, {
+          attrs: {
+            id: api_scoped_id($cmp.id),
+          },
+        }),
+      ]),
       api_element("use", {
         attrs: {
           href: api_scoped_frag_id($cmp.id),
           x: "10",
           fill: "blue",
         },
-        key: 2,
+        key: 3,
         svg: true,
         renderer: renderer,
       }),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/actual.html
new file mode 100644
index 0000000000..7c3348e23e
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/actual.html
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <div></div>
+        <div>
+            <div>
+                <div data-name={foo}></div>
+                <div data-name={baz}></div>
+            </div>
+        </div>
+        <div data-name={bar}></div>
+        <div data-name={quux}></div>
+    </div>
+</template>
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/ast.json
new file mode 100644
index 0000000000..a7dd21552b
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/ast.json
@@ -0,0 +1,415 @@
+{
+    "root": {
+        "type": "Root",
+        "location": {
+            "startLine": 1,
+            "startColumn": 1,
+            "endLine": 13,
+            "endColumn": 12,
+            "start": 0,
+            "end": 290,
+            "startTag": {
+                "startLine": 1,
+                "startColumn": 1,
+                "endLine": 1,
+                "endColumn": 11,
+                "start": 0,
+                "end": 10
+            },
+            "endTag": {
+                "startLine": 13,
+                "startColumn": 1,
+                "endLine": 13,
+                "endColumn": 12,
+                "start": 279,
+                "end": 290
+            }
+        },
+        "directives": [],
+        "children": [
+            {
+                "type": "Element",
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "location": {
+                    "startLine": 2,
+                    "startColumn": 5,
+                    "endLine": 12,
+                    "endColumn": 11,
+                    "start": 15,
+                    "end": 278,
+                    "startTag": {
+                        "startLine": 2,
+                        "startColumn": 5,
+                        "endLine": 2,
+                        "endColumn": 10,
+                        "start": 15,
+                        "end": 20
+                    },
+                    "endTag": {
+                        "startLine": 12,
+                        "startColumn": 5,
+                        "endLine": 12,
+                        "endColumn": 11,
+                        "start": 272,
+                        "end": 278
+                    }
+                },
+                "attributes": [],
+                "properties": [],
+                "directives": [],
+                "listeners": [],
+                "children": [
+                    {
+                        "type": "Element",
+                        "name": "div",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "location": {
+                            "startLine": 3,
+                            "startColumn": 9,
+                            "endLine": 3,
+                            "endColumn": 20,
+                            "start": 29,
+                            "end": 40,
+                            "startTag": {
+                                "startLine": 3,
+                                "startColumn": 9,
+                                "endLine": 3,
+                                "endColumn": 14,
+                                "start": 29,
+                                "end": 34
+                            },
+                            "endTag": {
+                                "startLine": 3,
+                                "startColumn": 14,
+                                "endLine": 3,
+                                "endColumn": 20,
+                                "start": 34,
+                                "end": 40
+                            }
+                        },
+                        "attributes": [],
+                        "properties": [],
+                        "directives": [],
+                        "listeners": [],
+                        "children": []
+                    },
+                    {
+                        "type": "Element",
+                        "name": "div",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "location": {
+                            "startLine": 4,
+                            "startColumn": 9,
+                            "endLine": 9,
+                            "endColumn": 15,
+                            "start": 49,
+                            "end": 194,
+                            "startTag": {
+                                "startLine": 4,
+                                "startColumn": 9,
+                                "endLine": 4,
+                                "endColumn": 14,
+                                "start": 49,
+                                "end": 54
+                            },
+                            "endTag": {
+                                "startLine": 9,
+                                "startColumn": 9,
+                                "endLine": 9,
+                                "endColumn": 15,
+                                "start": 188,
+                                "end": 194
+                            }
+                        },
+                        "attributes": [],
+                        "properties": [],
+                        "directives": [],
+                        "listeners": [],
+                        "children": [
+                            {
+                                "type": "Element",
+                                "name": "div",
+                                "namespace": "http://www.w3.org/1999/xhtml",
+                                "location": {
+                                    "startLine": 5,
+                                    "startColumn": 13,
+                                    "endLine": 8,
+                                    "endColumn": 19,
+                                    "start": 67,
+                                    "end": 179,
+                                    "startTag": {
+                                        "startLine": 5,
+                                        "startColumn": 13,
+                                        "endLine": 5,
+                                        "endColumn": 18,
+                                        "start": 67,
+                                        "end": 72
+                                    },
+                                    "endTag": {
+                                        "startLine": 8,
+                                        "startColumn": 13,
+                                        "endLine": 8,
+                                        "endColumn": 19,
+                                        "start": 173,
+                                        "end": 179
+                                    }
+                                },
+                                "attributes": [],
+                                "properties": [],
+                                "directives": [],
+                                "listeners": [],
+                                "children": [
+                                    {
+                                        "type": "Element",
+                                        "name": "div",
+                                        "namespace": "http://www.w3.org/1999/xhtml",
+                                        "location": {
+                                            "startLine": 6,
+                                            "startColumn": 17,
+                                            "endLine": 6,
+                                            "endColumn": 44,
+                                            "start": 89,
+                                            "end": 116,
+                                            "startTag": {
+                                                "startLine": 6,
+                                                "startColumn": 17,
+                                                "endLine": 6,
+                                                "endColumn": 38,
+                                                "start": 89,
+                                                "end": 110
+                                            },
+                                            "endTag": {
+                                                "startLine": 6,
+                                                "startColumn": 38,
+                                                "endLine": 6,
+                                                "endColumn": 44,
+                                                "start": 110,
+                                                "end": 116
+                                            }
+                                        },
+                                        "attributes": [
+                                            {
+                                                "type": "Attribute",
+                                                "name": "data-name",
+                                                "value": {
+                                                    "type": "Identifier",
+                                                    "start": 1,
+                                                    "end": 4,
+                                                    "name": "foo",
+                                                    "location": {
+                                                        "startLine": 6,
+                                                        "startColumn": 22,
+                                                        "endLine": 6,
+                                                        "endColumn": 37,
+                                                        "start": 94,
+                                                        "end": 109
+                                                    }
+                                                },
+                                                "location": {
+                                                    "startLine": 6,
+                                                    "startColumn": 22,
+                                                    "endLine": 6,
+                                                    "endColumn": 37,
+                                                    "start": 94,
+                                                    "end": 109
+                                                }
+                                            }
+                                        ],
+                                        "properties": [],
+                                        "directives": [],
+                                        "listeners": [],
+                                        "children": []
+                                    },
+                                    {
+                                        "type": "Element",
+                                        "name": "div",
+                                        "namespace": "http://www.w3.org/1999/xhtml",
+                                        "location": {
+                                            "startLine": 7,
+                                            "startColumn": 17,
+                                            "endLine": 7,
+                                            "endColumn": 44,
+                                            "start": 133,
+                                            "end": 160,
+                                            "startTag": {
+                                                "startLine": 7,
+                                                "startColumn": 17,
+                                                "endLine": 7,
+                                                "endColumn": 38,
+                                                "start": 133,
+                                                "end": 154
+                                            },
+                                            "endTag": {
+                                                "startLine": 7,
+                                                "startColumn": 38,
+                                                "endLine": 7,
+                                                "endColumn": 44,
+                                                "start": 154,
+                                                "end": 160
+                                            }
+                                        },
+                                        "attributes": [
+                                            {
+                                                "type": "Attribute",
+                                                "name": "data-name",
+                                                "value": {
+                                                    "type": "Identifier",
+                                                    "start": 1,
+                                                    "end": 4,
+                                                    "name": "baz",
+                                                    "location": {
+                                                        "startLine": 7,
+                                                        "startColumn": 22,
+                                                        "endLine": 7,
+                                                        "endColumn": 37,
+                                                        "start": 138,
+                                                        "end": 153
+                                                    }
+                                                },
+                                                "location": {
+                                                    "startLine": 7,
+                                                    "startColumn": 22,
+                                                    "endLine": 7,
+                                                    "endColumn": 37,
+                                                    "start": 138,
+                                                    "end": 153
+                                                }
+                                            }
+                                        ],
+                                        "properties": [],
+                                        "directives": [],
+                                        "listeners": [],
+                                        "children": []
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "type": "Element",
+                        "name": "div",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "location": {
+                            "startLine": 10,
+                            "startColumn": 9,
+                            "endLine": 10,
+                            "endColumn": 36,
+                            "start": 203,
+                            "end": 230,
+                            "startTag": {
+                                "startLine": 10,
+                                "startColumn": 9,
+                                "endLine": 10,
+                                "endColumn": 30,
+                                "start": 203,
+                                "end": 224
+                            },
+                            "endTag": {
+                                "startLine": 10,
+                                "startColumn": 30,
+                                "endLine": 10,
+                                "endColumn": 36,
+                                "start": 224,
+                                "end": 230
+                            }
+                        },
+                        "attributes": [
+                            {
+                                "type": "Attribute",
+                                "name": "data-name",
+                                "value": {
+                                    "type": "Identifier",
+                                    "start": 1,
+                                    "end": 4,
+                                    "name": "bar",
+                                    "location": {
+                                        "startLine": 10,
+                                        "startColumn": 14,
+                                        "endLine": 10,
+                                        "endColumn": 29,
+                                        "start": 208,
+                                        "end": 223
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 10,
+                                    "startColumn": 14,
+                                    "endLine": 10,
+                                    "endColumn": 29,
+                                    "start": 208,
+                                    "end": 223
+                                }
+                            }
+                        ],
+                        "properties": [],
+                        "directives": [],
+                        "listeners": [],
+                        "children": []
+                    },
+                    {
+                        "type": "Element",
+                        "name": "div",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "location": {
+                            "startLine": 11,
+                            "startColumn": 9,
+                            "endLine": 11,
+                            "endColumn": 37,
+                            "start": 239,
+                            "end": 267,
+                            "startTag": {
+                                "startLine": 11,
+                                "startColumn": 9,
+                                "endLine": 11,
+                                "endColumn": 31,
+                                "start": 239,
+                                "end": 261
+                            },
+                            "endTag": {
+                                "startLine": 11,
+                                "startColumn": 31,
+                                "endLine": 11,
+                                "endColumn": 37,
+                                "start": 261,
+                                "end": 267
+                            }
+                        },
+                        "attributes": [
+                            {
+                                "type": "Attribute",
+                                "name": "data-name",
+                                "value": {
+                                    "type": "Identifier",
+                                    "start": 1,
+                                    "end": 5,
+                                    "name": "quux",
+                                    "location": {
+                                        "startLine": 11,
+                                        "startColumn": 14,
+                                        "endLine": 11,
+                                        "endColumn": 30,
+                                        "start": 244,
+                                        "end": 260
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 11,
+                                    "startColumn": 14,
+                                    "endLine": 11,
+                                    "endColumn": 30,
+                                    "start": 244,
+                                    "end": 260
+                                }
+                            }
+                        ],
+                        "properties": [],
+                        "directives": [],
+                        "listeners": [],
+                        "children": []
+                    }
+                ]
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/expected.js
new file mode 100644
index 0000000000..267441ba92
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/expected.js
@@ -0,0 +1,32 @@
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${3}><div${3}></div><div${3}><div${3}><div${"a4:data-name"}${3}></div><div${"a5:data-name"}${3}></div></div></div><div${"a6:data-name"}${3}></div><div${"a7:data-name"}${3}></div></div>`;
+function tmpl($api, $cmp, $slotset, $ctx) {
+  const { sp: api_static_part, st: api_static_fragment } = $api;
+  return [
+    api_static_fragment($fragment1, 1, [
+      api_static_part(4, {
+        attrs: {
+          "data-name": $cmp.foo,
+        },
+      }),
+      api_static_part(5, {
+        attrs: {
+          "data-name": $cmp.baz,
+        },
+      }),
+      api_static_part(6, {
+        attrs: {
+          "data-name": $cmp.bar,
+        },
+      }),
+      api_static_part(7, {
+        attrs: {
+          "data-name": $cmp.quux,
+        },
+      }),
+    ]),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data-attrs-only/metadata.json
@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/actual.html
index 631e652aed..1a1b8f2f02 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/actual.html
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/actual.html
@@ -5,9 +5,11 @@
             <div>
                 <div lwc:ref="foo"></div>
                 <div onclick={onClickBaz}></div>
+                <div data-name={bar}></div>
             </div>
         </div>
         <div lwc:ref="bar"></div>
         <div onclick={onClickQuux}></div>
+        <div data-name={bar}></div>
     </div>
 </template>
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/ast.json
index 8448ab4af9..2218b18ec0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/ast.json
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/ast.json
@@ -4,10 +4,10 @@
         "location": {
             "startLine": 1,
             "startColumn": 1,
-            "endLine": 13,
+            "endLine": 15,
             "endColumn": 12,
             "start": 0,
-            "end": 296,
+            "end": 376,
             "startTag": {
                 "startLine": 1,
                 "startColumn": 1,
@@ -17,12 +17,12 @@
                 "end": 10
             },
             "endTag": {
-                "startLine": 13,
+                "startLine": 15,
                 "startColumn": 1,
-                "endLine": 13,
+                "endLine": 15,
                 "endColumn": 12,
-                "start": 285,
-                "end": 296
+                "start": 365,
+                "end": 376
             }
         },
         "directives": [],
@@ -34,10 +34,10 @@
                 "location": {
                     "startLine": 2,
                     "startColumn": 5,
-                    "endLine": 12,
+                    "endLine": 14,
                     "endColumn": 11,
                     "start": 15,
-                    "end": 284,
+                    "end": 364,
                     "startTag": {
                         "startLine": 2,
                         "startColumn": 5,
@@ -47,12 +47,12 @@
                         "end": 20
                     },
                     "endTag": {
-                        "startLine": 12,
+                        "startLine": 14,
                         "startColumn": 5,
-                        "endLine": 12,
+                        "endLine": 14,
                         "endColumn": 11,
-                        "start": 278,
-                        "end": 284
+                        "start": 358,
+                        "end": 364
                     }
                 },
                 "attributes": [],
@@ -101,10 +101,10 @@
                         "location": {
                             "startLine": 4,
                             "startColumn": 9,
-                            "endLine": 9,
+                            "endLine": 10,
                             "endColumn": 15,
                             "start": 49,
-                            "end": 197,
+                            "end": 241,
                             "startTag": {
                                 "startLine": 4,
                                 "startColumn": 9,
@@ -114,12 +114,12 @@
                                 "end": 54
                             },
                             "endTag": {
-                                "startLine": 9,
+                                "startLine": 10,
                                 "startColumn": 9,
-                                "endLine": 9,
+                                "endLine": 10,
                                 "endColumn": 15,
-                                "start": 191,
-                                "end": 197
+                                "start": 235,
+                                "end": 241
                             }
                         },
                         "attributes": [],
@@ -134,10 +134,10 @@
                                 "location": {
                                     "startLine": 5,
                                     "startColumn": 13,
-                                    "endLine": 8,
+                                    "endLine": 9,
                                     "endColumn": 19,
                                     "start": 67,
-                                    "end": 182,
+                                    "end": 226,
                                     "startTag": {
                                         "startLine": 5,
                                         "startColumn": 13,
@@ -147,12 +147,12 @@
                                         "end": 72
                                     },
                                     "endTag": {
-                                        "startLine": 8,
+                                        "startLine": 9,
                                         "startColumn": 13,
-                                        "endLine": 8,
+                                        "endLine": 9,
                                         "endColumn": 19,
-                                        "start": 176,
-                                        "end": 182
+                                        "start": 220,
+                                        "end": 226
                                     }
                                 },
                                 "attributes": [],
@@ -271,6 +271,67 @@
                                             }
                                         ],
                                         "children": []
+                                    },
+                                    {
+                                        "type": "Element",
+                                        "name": "div",
+                                        "namespace": "http://www.w3.org/1999/xhtml",
+                                        "location": {
+                                            "startLine": 8,
+                                            "startColumn": 17,
+                                            "endLine": 8,
+                                            "endColumn": 44,
+                                            "start": 180,
+                                            "end": 207,
+                                            "startTag": {
+                                                "startLine": 8,
+                                                "startColumn": 17,
+                                                "endLine": 8,
+                                                "endColumn": 38,
+                                                "start": 180,
+                                                "end": 201
+                                            },
+                                            "endTag": {
+                                                "startLine": 8,
+                                                "startColumn": 38,
+                                                "endLine": 8,
+                                                "endColumn": 44,
+                                                "start": 201,
+                                                "end": 207
+                                            }
+                                        },
+                                        "attributes": [
+                                            {
+                                                "type": "Attribute",
+                                                "name": "data-name",
+                                                "value": {
+                                                    "type": "Identifier",
+                                                    "start": 1,
+                                                    "end": 4,
+                                                    "name": "bar",
+                                                    "location": {
+                                                        "startLine": 8,
+                                                        "startColumn": 22,
+                                                        "endLine": 8,
+                                                        "endColumn": 37,
+                                                        "start": 185,
+                                                        "end": 200
+                                                    }
+                                                },
+                                                "location": {
+                                                    "startLine": 8,
+                                                    "startColumn": 22,
+                                                    "endLine": 8,
+                                                    "endColumn": 37,
+                                                    "start": 185,
+                                                    "end": 200
+                                                }
+                                            }
+                                        ],
+                                        "properties": [],
+                                        "directives": [],
+                                        "listeners": [],
+                                        "children": []
                                     }
                                 ]
                             }
@@ -281,27 +342,27 @@
                         "name": "div",
                         "namespace": "http://www.w3.org/1999/xhtml",
                         "location": {
-                            "startLine": 10,
+                            "startLine": 11,
                             "startColumn": 9,
-                            "endLine": 10,
+                            "endLine": 11,
                             "endColumn": 34,
-                            "start": 206,
-                            "end": 231,
+                            "start": 250,
+                            "end": 275,
                             "startTag": {
-                                "startLine": 10,
+                                "startLine": 11,
                                 "startColumn": 9,
-                                "endLine": 10,
+                                "endLine": 11,
                                 "endColumn": 28,
-                                "start": 206,
-                                "end": 225
+                                "start": 250,
+                                "end": 269
                             },
                             "endTag": {
-                                "startLine": 10,
+                                "startLine": 11,
                                 "startColumn": 28,
-                                "endLine": 10,
+                                "endLine": 11,
                                 "endColumn": 34,
-                                "start": 225,
-                                "end": 231
+                                "start": 269,
+                                "end": 275
                             }
                         },
                         "attributes": [],
@@ -315,12 +376,12 @@
                                     "value": "bar"
                                 },
                                 "location": {
-                                    "startLine": 10,
+                                    "startLine": 11,
                                     "startColumn": 14,
-                                    "endLine": 10,
+                                    "endLine": 11,
                                     "endColumn": 27,
-                                    "start": 211,
-                                    "end": 224
+                                    "start": 255,
+                                    "end": 268
                                 }
                             }
                         ],
@@ -332,27 +393,27 @@
                         "name": "div",
                         "namespace": "http://www.w3.org/1999/xhtml",
                         "location": {
-                            "startLine": 11,
+                            "startLine": 12,
                             "startColumn": 9,
-                            "endLine": 11,
+                            "endLine": 12,
                             "endColumn": 42,
-                            "start": 240,
-                            "end": 273,
+                            "start": 284,
+                            "end": 317,
                             "startTag": {
-                                "startLine": 11,
+                                "startLine": 12,
                                 "startColumn": 9,
-                                "endLine": 11,
+                                "endLine": 12,
                                 "endColumn": 36,
-                                "start": 240,
-                                "end": 267
+                                "start": 284,
+                                "end": 311
                             },
                             "endTag": {
-                                "startLine": 11,
+                                "startLine": 12,
                                 "startColumn": 36,
-                                "endLine": 11,
+                                "endLine": 12,
                                 "endColumn": 42,
-                                "start": 267,
-                                "end": 273
+                                "start": 311,
+                                "end": 317
                             }
                         },
                         "attributes": [],
@@ -368,24 +429,85 @@
                                     "end": 12,
                                     "name": "onClickQuux",
                                     "location": {
-                                        "startLine": 11,
+                                        "startLine": 12,
                                         "startColumn": 14,
-                                        "endLine": 11,
+                                        "endLine": 12,
                                         "endColumn": 35,
-                                        "start": 245,
-                                        "end": 266
+                                        "start": 289,
+                                        "end": 310
                                     }
                                 },
                                 "location": {
-                                    "startLine": 11,
+                                    "startLine": 12,
                                     "startColumn": 14,
-                                    "endLine": 11,
+                                    "endLine": 12,
                                     "endColumn": 35,
-                                    "start": 245,
-                                    "end": 266
+                                    "start": 289,
+                                    "end": 310
+                                }
+                            }
+                        ],
+                        "children": []
+                    },
+                    {
+                        "type": "Element",
+                        "name": "div",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "location": {
+                            "startLine": 13,
+                            "startColumn": 9,
+                            "endLine": 13,
+                            "endColumn": 36,
+                            "start": 326,
+                            "end": 353,
+                            "startTag": {
+                                "startLine": 13,
+                                "startColumn": 9,
+                                "endLine": 13,
+                                "endColumn": 30,
+                                "start": 326,
+                                "end": 347
+                            },
+                            "endTag": {
+                                "startLine": 13,
+                                "startColumn": 30,
+                                "endLine": 13,
+                                "endColumn": 36,
+                                "start": 347,
+                                "end": 353
+                            }
+                        },
+                        "attributes": [
+                            {
+                                "type": "Attribute",
+                                "name": "data-name",
+                                "value": {
+                                    "type": "Identifier",
+                                    "start": 1,
+                                    "end": 4,
+                                    "name": "bar",
+                                    "location": {
+                                        "startLine": 13,
+                                        "startColumn": 14,
+                                        "endLine": 13,
+                                        "endColumn": 29,
+                                        "start": 331,
+                                        "end": 346
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 13,
+                                    "startColumn": 14,
+                                    "endLine": 13,
+                                    "endColumn": 29,
+                                    "start": 331,
+                                    "end": 346
                                 }
                             }
                         ],
+                        "properties": [],
+                        "directives": [],
+                        "listeners": [],
                         "children": []
                     }
                 ]
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
index 827173ea47..a8cfa61c7c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/deep-data/expected.js
@@ -1,5 +1,5 @@
 import { parseFragment, registerTemplate } from "lwc";
-const $fragment1 = parseFragment`<div${3}><div${3}></div><div${3}><div${3}><div${3}></div><div${3}></div></div></div><div${3}></div><div${3}></div></div>`;
+const $fragment1 = parseFragment`<div${3}><div${3}></div><div${3}><div${3}><div${3}></div><div${3}></div><div${"a6:data-name"}${3}></div></div></div><div${3}></div><div${3}></div><div${"a9:data-name"}${3}></div></div>`;
 const stc0 = {
   ref: "foo",
 };
@@ -17,12 +17,22 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickBaz)),
         },
       }),
-      api_static_part(6, stc1),
-      api_static_part(7, {
+      api_static_part(6, {
+        attrs: {
+          "data-name": $cmp.bar,
+        },
+      }),
+      api_static_part(7, stc1),
+      api_static_part(8, {
         on: {
           click: _m1 || ($ctx._m1 = api_bind($cmp.onClickQuux)),
         },
       }),
+      api_static_part(9, {
+        attrs: {
+          "data-name": $cmp.bar,
+        },
+      }),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/actual.html
index 90577520df..28c456cd6e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/actual.html
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/actual.html
@@ -1,8 +1,8 @@
 <template>
     <div>
         <!-- comment -->
-        <button data-id="foo" onclick={onClickFoo} lwc:ref="foo">foo</button>
+        <button data-id="foo" onclick={onClickFoo} lwc:ref="foo" data-dynamic={foo}>foo</button>
         <!-- comment -->
-        <button data-id="bar" onclick={onClickBar} lwc:ref="bar">bar</button>
+        <button data-id="bar" onclick={onClickBar} lwc:ref="bar" data-dynamic={bar}>bar</button>
     </div>
 </template>
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/ast.json
index 14c25d6e76..282cc7bc5f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/ast.json
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/ast.json
@@ -7,7 +7,7 @@
             "endLine": 8,
             "endColumn": 12,
             "start": 0,
-            "end": 249,
+            "end": 287,
             "startTag": {
                 "startLine": 1,
                 "startColumn": 1,
@@ -21,8 +21,8 @@
                 "startColumn": 1,
                 "endLine": 8,
                 "endColumn": 12,
-                "start": 238,
-                "end": 249
+                "start": 276,
+                "end": 287
             }
         },
         "directives": [],
@@ -37,7 +37,7 @@
                     "endLine": 7,
                     "endColumn": 11,
                     "start": 15,
-                    "end": 237,
+                    "end": 275,
                     "startTag": {
                         "startLine": 2,
                         "startColumn": 5,
@@ -51,8 +51,8 @@
                         "startColumn": 5,
                         "endLine": 7,
                         "endColumn": 11,
-                        "start": 231,
-                        "end": 237
+                        "start": 269,
+                        "end": 275
                     }
                 },
                 "attributes": [],
@@ -81,24 +81,24 @@
                             "startLine": 4,
                             "startColumn": 9,
                             "endLine": 4,
-                            "endColumn": 78,
+                            "endColumn": 97,
                             "start": 54,
-                            "end": 123,
+                            "end": 142,
                             "startTag": {
                                 "startLine": 4,
                                 "startColumn": 9,
                                 "endLine": 4,
-                                "endColumn": 66,
+                                "endColumn": 85,
                                 "start": 54,
-                                "end": 111
+                                "end": 130
                             },
                             "endTag": {
                                 "startLine": 4,
-                                "startColumn": 69,
+                                "startColumn": 88,
                                 "endLine": 4,
-                                "endColumn": 78,
-                                "start": 114,
-                                "end": 123
+                                "endColumn": 97,
+                                "start": 133,
+                                "end": 142
                             }
                         },
                         "attributes": [
@@ -117,6 +117,32 @@
                                     "start": 62,
                                     "end": 75
                                 }
+                            },
+                            {
+                                "type": "Attribute",
+                                "name": "data-dynamic",
+                                "value": {
+                                    "type": "Identifier",
+                                    "start": 1,
+                                    "end": 4,
+                                    "name": "foo",
+                                    "location": {
+                                        "startLine": 4,
+                                        "startColumn": 66,
+                                        "endLine": 4,
+                                        "endColumn": 84,
+                                        "start": 111,
+                                        "end": 129
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 4,
+                                    "startColumn": 66,
+                                    "endLine": 4,
+                                    "endColumn": 84,
+                                    "start": 111,
+                                    "end": 129
+                                }
                             }
                         ],
                         "properties": [],
@@ -176,11 +202,11 @@
                                 },
                                 "location": {
                                     "startLine": 4,
-                                    "startColumn": 66,
+                                    "startColumn": 85,
                                     "endLine": 4,
-                                    "endColumn": 69,
-                                    "start": 111,
-                                    "end": 114
+                                    "endColumn": 88,
+                                    "start": 130,
+                                    "end": 133
                                 }
                             }
                         ]
@@ -194,8 +220,8 @@
                             "startColumn": 9,
                             "endLine": 5,
                             "endColumn": 25,
-                            "start": 132,
-                            "end": 148
+                            "start": 151,
+                            "end": 167
                         }
                     },
                     {
@@ -206,24 +232,24 @@
                             "startLine": 6,
                             "startColumn": 9,
                             "endLine": 6,
-                            "endColumn": 78,
-                            "start": 157,
-                            "end": 226,
+                            "endColumn": 97,
+                            "start": 176,
+                            "end": 264,
                             "startTag": {
                                 "startLine": 6,
                                 "startColumn": 9,
                                 "endLine": 6,
-                                "endColumn": 66,
-                                "start": 157,
-                                "end": 214
+                                "endColumn": 85,
+                                "start": 176,
+                                "end": 252
                             },
                             "endTag": {
                                 "startLine": 6,
-                                "startColumn": 69,
+                                "startColumn": 88,
                                 "endLine": 6,
-                                "endColumn": 78,
-                                "start": 217,
-                                "end": 226
+                                "endColumn": 97,
+                                "start": 255,
+                                "end": 264
                             }
                         },
                         "attributes": [
@@ -239,8 +265,34 @@
                                     "startColumn": 17,
                                     "endLine": 6,
                                     "endColumn": 30,
-                                    "start": 165,
-                                    "end": 178
+                                    "start": 184,
+                                    "end": 197
+                                }
+                            },
+                            {
+                                "type": "Attribute",
+                                "name": "data-dynamic",
+                                "value": {
+                                    "type": "Identifier",
+                                    "start": 1,
+                                    "end": 4,
+                                    "name": "bar",
+                                    "location": {
+                                        "startLine": 6,
+                                        "startColumn": 66,
+                                        "endLine": 6,
+                                        "endColumn": 84,
+                                        "start": 233,
+                                        "end": 251
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 6,
+                                    "startColumn": 66,
+                                    "endLine": 6,
+                                    "endColumn": 84,
+                                    "start": 233,
+                                    "end": 251
                                 }
                             }
                         ],
@@ -258,8 +310,8 @@
                                     "startColumn": 52,
                                     "endLine": 6,
                                     "endColumn": 65,
-                                    "start": 200,
-                                    "end": 213
+                                    "start": 219,
+                                    "end": 232
                                 }
                             }
                         ],
@@ -277,8 +329,8 @@
                                         "startColumn": 31,
                                         "endLine": 6,
                                         "endColumn": 51,
-                                        "start": 179,
-                                        "end": 199
+                                        "start": 198,
+                                        "end": 218
                                     }
                                 },
                                 "location": {
@@ -286,8 +338,8 @@
                                     "startColumn": 31,
                                     "endLine": 6,
                                     "endColumn": 51,
-                                    "start": 179,
-                                    "end": 199
+                                    "start": 198,
+                                    "end": 218
                                 }
                             }
                         ],
@@ -301,11 +353,11 @@
                                 },
                                 "location": {
                                     "startLine": 6,
-                                    "startColumn": 66,
+                                    "startColumn": 85,
                                     "endLine": 6,
-                                    "endColumn": 69,
-                                    "start": 214,
-                                    "end": 217
+                                    "endColumn": 88,
+                                    "start": 252,
+                                    "end": 255
                                 }
                             }
                         ]
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
index f206b5d0d3..24471f8a0b 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off-with-parts/expected.js
@@ -1,5 +1,5 @@
 import { parseFragment, registerTemplate } from "lwc";
-const $fragment1 = parseFragment`<div${3}><button data-id="foo"${3}>foo</button><button data-id="bar"${3}>bar</button></div>`;
+const $fragment1 = parseFragment`<div${3}><button data-id="foo"${"a1:data-dynamic"}${3}>foo</button><button data-id="bar"${"a3:data-dynamic"}${3}>bar</button></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
@@ -10,12 +10,18 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickFoo)),
         },
         ref: "foo",
+        attrs: {
+          "data-dynamic": $cmp.foo,
+        },
       }),
       api_static_part(3, {
         on: {
           click: _m1 || ($ctx._m1 = api_bind($cmp.onClickBar)),
         },
         ref: "bar",
+        attrs: {
+          "data-dynamic": $cmp.bar,
+        },
       }),
     ]),
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/actual.html
index 3e43c666b1..441667bcd5 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/actual.html
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/actual.html
@@ -1,8 +1,8 @@
 <template lwc:preserve-comments>
     <div>
         <!-- comment -->
-        <button data-id="foo" onclick={onClickFoo} lwc:ref="foo">foo</button>
+        <button data-id="foo" onclick={onClickFoo} lwc:ref="foo" data-dynamic={foo}>foo</button>
         <!-- comment -->
-        <button data-id="bar" onclick={onClickBar} lwc:ref="bar">bar</button>
+        <button data-id="bar" onclick={onClickBar} lwc:ref="bar" data-dynamic={bar}>bar</button>
     </div>
 </template>
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/ast.json
index e527eac394..0a373d89a0 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/ast.json
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/ast.json
@@ -7,7 +7,7 @@
             "endLine": 8,
             "endColumn": 12,
             "start": 0,
-            "end": 271,
+            "end": 309,
             "startTag": {
                 "startLine": 1,
                 "startColumn": 1,
@@ -21,8 +21,8 @@
                 "startColumn": 1,
                 "endLine": 8,
                 "endColumn": 12,
-                "start": 260,
-                "end": 271
+                "start": 298,
+                "end": 309
             }
         },
         "directives": [
@@ -54,7 +54,7 @@
                     "endLine": 7,
                     "endColumn": 11,
                     "start": 37,
-                    "end": 259,
+                    "end": 297,
                     "startTag": {
                         "startLine": 2,
                         "startColumn": 5,
@@ -68,8 +68,8 @@
                         "startColumn": 5,
                         "endLine": 7,
                         "endColumn": 11,
-                        "start": 253,
-                        "end": 259
+                        "start": 291,
+                        "end": 297
                     }
                 },
                 "attributes": [],
@@ -98,24 +98,24 @@
                             "startLine": 4,
                             "startColumn": 9,
                             "endLine": 4,
-                            "endColumn": 78,
+                            "endColumn": 97,
                             "start": 76,
-                            "end": 145,
+                            "end": 164,
                             "startTag": {
                                 "startLine": 4,
                                 "startColumn": 9,
                                 "endLine": 4,
-                                "endColumn": 66,
+                                "endColumn": 85,
                                 "start": 76,
-                                "end": 133
+                                "end": 152
                             },
                             "endTag": {
                                 "startLine": 4,
-                                "startColumn": 69,
+                                "startColumn": 88,
                                 "endLine": 4,
-                                "endColumn": 78,
-                                "start": 136,
-                                "end": 145
+                                "endColumn": 97,
+                                "start": 155,
+                                "end": 164
                             }
                         },
                         "attributes": [
@@ -134,6 +134,32 @@
                                     "start": 84,
                                     "end": 97
                                 }
+                            },
+                            {
+                                "type": "Attribute",
+                                "name": "data-dynamic",
+                                "value": {
+                                    "type": "Identifier",
+                                    "start": 1,
+                                    "end": 4,
+                                    "name": "foo",
+                                    "location": {
+                                        "startLine": 4,
+                                        "startColumn": 66,
+                                        "endLine": 4,
+                                        "endColumn": 84,
+                                        "start": 133,
+                                        "end": 151
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 4,
+                                    "startColumn": 66,
+                                    "endLine": 4,
+                                    "endColumn": 84,
+                                    "start": 133,
+                                    "end": 151
+                                }
                             }
                         ],
                         "properties": [],
@@ -193,11 +219,11 @@
                                 },
                                 "location": {
                                     "startLine": 4,
-                                    "startColumn": 66,
+                                    "startColumn": 85,
                                     "endLine": 4,
-                                    "endColumn": 69,
-                                    "start": 133,
-                                    "end": 136
+                                    "endColumn": 88,
+                                    "start": 152,
+                                    "end": 155
                                 }
                             }
                         ]
@@ -211,8 +237,8 @@
                             "startColumn": 9,
                             "endLine": 5,
                             "endColumn": 25,
-                            "start": 154,
-                            "end": 170
+                            "start": 173,
+                            "end": 189
                         }
                     },
                     {
@@ -223,24 +249,24 @@
                             "startLine": 6,
                             "startColumn": 9,
                             "endLine": 6,
-                            "endColumn": 78,
-                            "start": 179,
-                            "end": 248,
+                            "endColumn": 97,
+                            "start": 198,
+                            "end": 286,
                             "startTag": {
                                 "startLine": 6,
                                 "startColumn": 9,
                                 "endLine": 6,
-                                "endColumn": 66,
-                                "start": 179,
-                                "end": 236
+                                "endColumn": 85,
+                                "start": 198,
+                                "end": 274
                             },
                             "endTag": {
                                 "startLine": 6,
-                                "startColumn": 69,
+                                "startColumn": 88,
                                 "endLine": 6,
-                                "endColumn": 78,
-                                "start": 239,
-                                "end": 248
+                                "endColumn": 97,
+                                "start": 277,
+                                "end": 286
                             }
                         },
                         "attributes": [
@@ -256,8 +282,34 @@
                                     "startColumn": 17,
                                     "endLine": 6,
                                     "endColumn": 30,
-                                    "start": 187,
-                                    "end": 200
+                                    "start": 206,
+                                    "end": 219
+                                }
+                            },
+                            {
+                                "type": "Attribute",
+                                "name": "data-dynamic",
+                                "value": {
+                                    "type": "Identifier",
+                                    "start": 1,
+                                    "end": 4,
+                                    "name": "bar",
+                                    "location": {
+                                        "startLine": 6,
+                                        "startColumn": 66,
+                                        "endLine": 6,
+                                        "endColumn": 84,
+                                        "start": 255,
+                                        "end": 273
+                                    }
+                                },
+                                "location": {
+                                    "startLine": 6,
+                                    "startColumn": 66,
+                                    "endLine": 6,
+                                    "endColumn": 84,
+                                    "start": 255,
+                                    "end": 273
                                 }
                             }
                         ],
@@ -275,8 +327,8 @@
                                     "startColumn": 52,
                                     "endLine": 6,
                                     "endColumn": 65,
-                                    "start": 222,
-                                    "end": 235
+                                    "start": 241,
+                                    "end": 254
                                 }
                             }
                         ],
@@ -294,8 +346,8 @@
                                         "startColumn": 31,
                                         "endLine": 6,
                                         "endColumn": 51,
-                                        "start": 201,
-                                        "end": 221
+                                        "start": 220,
+                                        "end": 240
                                     }
                                 },
                                 "location": {
@@ -303,8 +355,8 @@
                                     "startColumn": 31,
                                     "endLine": 6,
                                     "endColumn": 51,
-                                    "start": 201,
-                                    "end": 221
+                                    "start": 220,
+                                    "end": 240
                                 }
                             }
                         ],
@@ -318,11 +370,11 @@
                                 },
                                 "location": {
                                     "startLine": 6,
-                                    "startColumn": 66,
+                                    "startColumn": 85,
                                     "endLine": 6,
-                                    "endColumn": 69,
-                                    "start": 236,
-                                    "end": 239
+                                    "endColumn": 88,
+                                    "start": 274,
+                                    "end": 277
                                 }
                             }
                         ]
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
index d96c27cb2b..983dfb6429 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on-with-parts/expected.js
@@ -1,5 +1,5 @@
 import { parseFragment, registerTemplate } from "lwc";
-const $fragment1 = parseFragment`<div${3}><!-- comment --><button data-id="foo"${3}>foo</button><!-- comment --><button data-id="bar"${3}>bar</button></div>`;
+const $fragment1 = parseFragment`<div${3}><!-- comment --><button data-id="foo"${"a2:data-dynamic"}${3}>foo</button><!-- comment --><button data-id="bar"${"a5:data-dynamic"}${3}>bar</button></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
@@ -10,12 +10,18 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           click: _m0 || ($ctx._m0 = api_bind($cmp.onClickFoo)),
         },
         ref: "foo",
+        attrs: {
+          "data-dynamic": $cmp.foo,
+        },
       }),
       api_static_part(5, {
         on: {
           click: _m1 || ($ctx._m1 = api_bind($cmp.onClickBar)),
         },
         ref: "bar",
+        attrs: {
+          "data-dynamic": $cmp.bar,
+        },
       }),
     ]),
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/actual.html
index 1c96027851..87c3fa6028 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/actual.html
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/actual.html
@@ -1,3 +1,3 @@
 <template>
-    <div lwc:ref="foo" onclick={onClick}></div>
+    <div lwc:ref="foo" onclick={onClick} data-name={bar}></div>
 </template>
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/ast.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/ast.json
index 60158348a8..998f79a168 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/ast.json
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/ast.json
@@ -7,7 +7,7 @@
             "endLine": 3,
             "endColumn": 12,
             "start": 0,
-            "end": 70,
+            "end": 86,
             "startTag": {
                 "startLine": 1,
                 "startColumn": 1,
@@ -21,8 +21,8 @@
                 "startColumn": 1,
                 "endLine": 3,
                 "endColumn": 12,
-                "start": 59,
-                "end": 70
+                "start": 75,
+                "end": 86
             }
         },
         "directives": [],
@@ -35,27 +35,54 @@
                     "startLine": 2,
                     "startColumn": 5,
                     "endLine": 2,
-                    "endColumn": 48,
+                    "endColumn": 64,
                     "start": 15,
-                    "end": 58,
+                    "end": 74,
                     "startTag": {
                         "startLine": 2,
                         "startColumn": 5,
                         "endLine": 2,
-                        "endColumn": 42,
+                        "endColumn": 58,
                         "start": 15,
-                        "end": 52
+                        "end": 68
                     },
                     "endTag": {
                         "startLine": 2,
-                        "startColumn": 42,
+                        "startColumn": 58,
                         "endLine": 2,
-                        "endColumn": 48,
-                        "start": 52,
-                        "end": 58
+                        "endColumn": 64,
+                        "start": 68,
+                        "end": 74
                     }
                 },
-                "attributes": [],
+                "attributes": [
+                    {
+                        "type": "Attribute",
+                        "name": "data-name",
+                        "value": {
+                            "type": "Identifier",
+                            "start": 1,
+                            "end": 4,
+                            "name": "bar",
+                            "location": {
+                                "startLine": 2,
+                                "startColumn": 42,
+                                "endLine": 2,
+                                "endColumn": 57,
+                                "start": 52,
+                                "end": 67
+                            }
+                        },
+                        "location": {
+                            "startLine": 2,
+                            "startColumn": 42,
+                            "endLine": 2,
+                            "endColumn": 57,
+                            "start": 52,
+                            "end": 67
+                        }
+                    }
+                ],
                 "properties": [],
                 "directives": [
                     {
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
index 575e41eb95..1eba7098a7 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/shallow-data/expected.js
@@ -1,5 +1,5 @@
 import { parseFragment, registerTemplate } from "lwc";
-const $fragment1 = parseFragment`<div${3}></div>`;
+const $fragment1 = parseFragment`<div${"a0:data-name"}${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
   const { b: api_bind, sp: api_static_part, st: api_static_fragment } = $api;
   const { _m0, _m1 } = $ctx;
@@ -10,6 +10,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
           click: _m1 || ($ctx._m1 = api_bind($cmp.onClick)),
         },
         ref: "foo",
+        attrs: {
+          "data-name": $cmp.bar,
+        },
       }),
     ]),
   ];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/scoped-id-dynamic/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/scoped-id-dynamic/expected.js
index 58a906e0bd..61399f6d30 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/scoped-id-dynamic/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/svg/scoped-id-dynamic/expected.js
@@ -1,4 +1,5 @@
-import { registerTemplate, sanitizeAttribute } from "lwc";
+import { parseSVGFragment, registerTemplate, sanitizeAttribute } from "lwc";
+const $fragment1 = parseSVGFragment`<defs${3}><circle${"a1:id"} r="10" cx="10" cy="10" fill="black"${3}/><circle${"a2:id"} r="10" cx="14" cy="14" fill="red"${3}/></defs>`;
 const stc0 = {
   attrs: {
     width: "100px",
@@ -8,36 +9,26 @@ const stc0 = {
   key: 0,
   svg: true,
 };
-const stc1 = {
-  key: 1,
-  svg: true,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { gid: api_scoped_id, h: api_element, fid: api_scoped_frag_id } = $api;
+  const {
+    gid: api_scoped_id,
+    sp: api_static_part,
+    st: api_static_fragment,
+    fid: api_scoped_frag_id,
+    h: api_element,
+  } = $api;
   return [
     api_element("svg", stc0, [
-      api_element("defs", stc1, [
-        api_element("circle", {
+      api_static_fragment($fragment1, 2, [
+        api_static_part(1, {
           attrs: {
             id: api_scoped_id($cmp.blackId),
-            r: "10",
-            cx: "10",
-            cy: "10",
-            fill: "black",
           },
-          key: 2,
-          svg: true,
         }),
-        api_element("circle", {
+        api_static_part(2, {
           attrs: {
             id: api_scoped_id($cmp.redId),
-            r: "10",
-            cx: "14",
-            cy: "14",
-            fill: "red",
           },
-          key: 3,
-          svg: true,
         }),
       ]),
       api_element("use", {
@@ -49,7 +40,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             api_scoped_frag_id($cmp.blackUrl)
           ),
         },
-        key: 4,
+        key: 3,
         svg: true,
       }),
       api_element("use", {
@@ -61,7 +52,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             api_scoped_frag_id($cmp.redUrl)
           ),
         },
-        key: 5,
+        key: 4,
         svg: true,
       }),
     ]),
diff --git a/packages/@lwc/template-compiler/src/codegen/codegen.ts b/packages/@lwc/template-compiler/src/codegen/codegen.ts
index 017a18bfaa..6794220902 100644
--- a/packages/@lwc/template-compiler/src/codegen/codegen.ts
+++ b/packages/@lwc/template-compiler/src/codegen/codegen.ts
@@ -5,7 +5,13 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 import { walk } from 'estree-walker';
-import { APIVersion, getAPIVersionFromNumber, SVG_NAMESPACE } from '@lwc/shared';
+import {
+    APIVersion,
+    getAPIVersionFromNumber,
+    SVG_NAMESPACE,
+    STATIC_PART_TOKEN_ID,
+    isUndefined,
+} from '@lwc/shared';
 
 import * as t from '../shared/estree';
 import {
@@ -19,6 +25,7 @@ import {
     RefDirective,
     Text,
     StaticElement,
+    Attribute,
 } from '../shared/types';
 import {
     PARSE_FRAGMENT_METHOD_NAME,
@@ -28,6 +35,7 @@ import {
 import {
     isComment,
     isElement,
+    isExpression,
     isPreserveCommentsDirective,
     isRenderModeDirective,
 } from '../shared/ast';
@@ -35,7 +43,7 @@ import { isArrayExpression } from '../shared/estree';
 import State from '../state';
 import { getStaticNodes, memorizeHandler, objectToAST } from './helpers';
 import { serializeStaticElement } from './static-element-serializer';
-import { bindComplexExpression } from './expression';
+import { bindAttributeExpression, bindComplexExpression } from './expression';
 
 // structuredClone is only available in Node 17+
 // https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility
@@ -72,27 +80,27 @@ interface RenderPrimitiveDefinition {
 }
 
 const RENDER_APIS: { [primitive in RenderPrimitive]: RenderPrimitiveDefinition } = {
-    iterator: { name: 'i', alias: 'api_iterator' },
-    flatten: { name: 'f', alias: 'api_flatten' },
-    element: { name: 'h', alias: 'api_element' },
-    slot: { name: 's', alias: 'api_slot' },
+    bind: { name: 'b', alias: 'api_bind' },
+    comment: { name: 'co', alias: 'api_comment' },
     customElement: { name: 'c', alias: 'api_custom_element' },
-    dynamicCtor: { name: 'dc', alias: 'api_dynamic_component' },
     // TODO [#3331]: remove usage of lwc:dynamic in 246
     deprecatedDynamicCtor: { name: 'ddc', alias: 'api_deprecated_dynamic_component' },
-    bind: { name: 'b', alias: 'api_bind' },
-    text: { name: 't', alias: 'api_text' },
+    dynamicCtor: { name: 'dc', alias: 'api_dynamic_component' },
     dynamicText: { name: 'd', alias: 'api_dynamic_text' },
+    element: { name: 'h', alias: 'api_element' },
+    flatten: { name: 'f', alias: 'api_flatten' },
+    fragment: { name: 'fr', alias: 'api_fragment' },
+    iterator: { name: 'i', alias: 'api_iterator' },
     key: { name: 'k', alias: 'api_key' },
-    tabindex: { name: 'ti', alias: 'api_tab_index' },
-    scopedId: { name: 'gid', alias: 'api_scoped_id' },
-    scopedFragId: { name: 'fid', alias: 'api_scoped_frag_id' },
-    comment: { name: 'co', alias: 'api_comment' },
     sanitizeHtmlContent: { name: 'shc', alias: 'api_sanitize_html_content' },
-    fragment: { name: 'fr', alias: 'api_fragment' },
-    staticFragment: { name: 'st', alias: 'api_static_fragment' },
+    scopedFragId: { name: 'fid', alias: 'api_scoped_frag_id' },
+    scopedId: { name: 'gid', alias: 'api_scoped_id' },
     scopedSlotFactory: { name: 'ssf', alias: 'api_scoped_slot_factory' },
+    slot: { name: 's', alias: 'api_slot' },
+    staticFragment: { name: 'st', alias: 'api_static_fragment' },
     staticPart: { name: 'sp', alias: 'api_static_part' },
+    tabindex: { name: 'ti', alias: 'api_tab_index' },
+    text: { name: 't', alias: 'api_text' },
 };
 
 interface Scope {
@@ -151,6 +159,8 @@ export default class CodeGen {
     referencedComponents: Set<string> = new Set();
     apiVersion: APIVersion;
 
+    staticExpressionMap = new WeakMap<Attribute, string>();
+
     constructor({
         root,
         state,
@@ -533,7 +543,9 @@ export default class CodeGen {
             slotParentName !== undefined
                 ? `@${slotParentName}:${this.generateKey()}`
                 : this.generateKey();
-        const html = serializeStaticElement(element, this.preserveComments);
+        const staticParts = this.genStaticParts(element);
+        // Generate static parts prior to serialization to inject the corresponding static part Id into the serialized output.
+        const html = serializeStaticElement(element, this);
 
         const parseMethod =
             element.name !== 'svg' && element.namespace === SVG_NAMESPACE
@@ -569,7 +581,6 @@ export default class CodeGen {
         const args: t.Expression[] = [identifier, t.literal(key)];
 
         // Only add the third argument (staticParts) if this element needs it
-        const staticParts = this.genStaticParts(element);
         if (staticParts) {
             args.push(staticParts);
         }
@@ -613,6 +624,29 @@ export default class CodeGen {
                     }
                 }
 
+                const attributeExpressions = [];
+                for (const attribute of node.attributes) {
+                    const { name, value } = attribute;
+                    if (isExpression(value)) {
+                        this.staticExpressionMap.set(
+                            attribute,
+                            `${STATIC_PART_TOKEN_ID.ATTRIBUTE}${partId}:${name}`
+                        );
+                        attributeExpressions.push(
+                            t.property(
+                                t.literal(name),
+                                bindAttributeExpression(attribute, node, this, false)
+                            )
+                        );
+                    }
+                }
+
+                if (attributeExpressions.length) {
+                    addDatabagProp(
+                        t.property(t.identifier('attrs'), t.objectExpression(attributeExpressions))
+                    );
+                }
+
                 // For depth-first traversal, children must be preprended in order, so that they are processed before
                 // siblings. Note that this is consistent with the order used in the diffing algo as well as
                 // `traverseAndSetElements` in @lwc/engine-core.
@@ -637,4 +671,16 @@ export default class CodeGen {
             t.objectExpression(databagProperties),
         ]);
     }
+
+    getStaticExpressionToken(node: Attribute): string {
+        const token = this.staticExpressionMap.get(node);
+        /* istanbul ignore if */
+        if (isUndefined(token)) {
+            // It should not be possible to hit this code path
+            throw new Error(
+                `Template compiler internal error, unable to map ${node.name} to a static expression.`
+            );
+        }
+        return token;
+    }
 }
diff --git a/packages/@lwc/template-compiler/src/codegen/expression.ts b/packages/@lwc/template-compiler/src/codegen/expression.ts
index c0c058bd62..10054a5a3f 100644
--- a/packages/@lwc/template-compiler/src/codegen/expression.ts
+++ b/packages/@lwc/template-compiler/src/codegen/expression.ts
@@ -7,9 +7,17 @@
 
 import { walk } from 'estree-walker';
 import { ParserDiagnostics, invariant } from '@lwc/errors';
+import { isBooleanAttribute } from '@lwc/shared';
 import * as t from '../shared/estree';
-import { ComplexExpression } from '../shared/types';
+import { Attribute, BaseElement, ComplexExpression, Property } from '../shared/types';
 import { TEMPLATE_PARAMS } from '../shared/constants';
+import { isProperty } from '../shared/ast';
+import {
+    isAllowedFragOnlyUrlsXHTML,
+    isAttribute,
+    isIdReferencingAttribute,
+    isSvgUseHref,
+} from '../parser/attribute';
 import type CodeGen from './codegen';
 
 type VariableName = string;
@@ -171,3 +179,49 @@ function collectParamsFromMemberExpression(_node: t.MemberExpression, _vars: Var
     // the AST, we'll validate anyway.
     invariant(false, ParserDiagnostics.INVALID_EXPR_ARROW_FN_PARAM, ['member expressions']);
 }
+
+export function bindAttributeExpression(
+    attr: Attribute | Property,
+    element: BaseElement,
+    codeGen: CodeGen,
+    addLegacySanitizationHook: boolean
+) {
+    const { name: elmName, namespace = '' } = element;
+    const { value: attrValue } = attr;
+    // Evaluate properties based on their attribute name
+    const attrName = isProperty(attr) ? attr.attributeName : attr.name;
+    const isUsedAsAttribute = isAttribute(element, attrName);
+
+    const expression = codeGen.bindExpression(attrValue);
+
+    // TODO [#2012]: Normalize global boolean attrs values passed to custom elements as props
+    if (isUsedAsAttribute && isBooleanAttribute(attrName, elmName)) {
+        // We need to do some manipulation to allow the diffing algorithm add/remove the attribute
+        // without handling special cases at runtime.
+        return codeGen.genBooleanAttributeExpr(expression);
+    }
+    if (attrName === 'tabindex') {
+        return codeGen.genTabIndex([expression]);
+    }
+    if (attrName === 'id' || isIdReferencingAttribute(attrName)) {
+        return codeGen.genScopedId(expression);
+    }
+    if (codeGen.scopeFragmentId && isAllowedFragOnlyUrlsXHTML(elmName, attrName, namespace)) {
+        return codeGen.genScopedFragId(expression);
+    }
+    if (isSvgUseHref(elmName, attrName, namespace)) {
+        if (addLegacySanitizationHook) {
+            codeGen.usedLwcApis.add('sanitizeAttribute');
+
+            return t.callExpression(t.identifier('sanitizeAttribute'), [
+                t.literal(elmName),
+                t.literal(namespace),
+                t.literal(attrName),
+                codeGen.genScopedFragId(expression),
+            ]);
+        }
+        return codeGen.genScopedFragId(expression);
+    }
+
+    return expression;
+}
diff --git a/packages/@lwc/template-compiler/src/codegen/helpers.ts b/packages/@lwc/template-compiler/src/codegen/helpers.ts
index 517f93e5db..094e5946fa 100644
--- a/packages/@lwc/template-compiler/src/codegen/helpers.ts
+++ b/packages/@lwc/template-compiler/src/codegen/helpers.ts
@@ -14,6 +14,7 @@ import {
     isComment,
     isConditionalParentBlock,
     isElement,
+    isExpression,
     isForBlock,
     isIf,
     isParentNode,
@@ -246,8 +247,9 @@ function isStaticNode(node: BaseElement, apiVersion: APIVersion): boolean {
     result &&= isElement(node);
 
     // all attrs are static-safe
+    // the criteria to determine safety can be found in computeAttrValue
     result &&= attributes.every(({ name, value }) => {
-        return (
+        const isStaticSafeLiteral =
             isLiteral(value) &&
             name !== 'slot' &&
             // check for ScopedId
@@ -260,8 +262,17 @@ function isStaticNode(node: BaseElement, apiVersion: APIVersion): boolean {
             !(
                 isAllowedFragOnlyUrlsXHTML(nodeName, name, namespace) &&
                 isFragmentOnlyUrl(value.value as string)
-            )
-        );
+            );
+        const isStaticSafeExpression =
+            isExpression(value) &&
+            name !== 'slot' &&
+            // TODO [#3624]: Enable class and style for static content optimization
+            name !== 'class' &&
+            name !== 'style' &&
+            // TODO [#3624]: Revisit whether svgs can be included in static content optimization
+            // svg href needs sanitization.
+            !isSvgUseHref(nodeName, name, namespace);
+        return isStaticSafeLiteral || isStaticSafeExpression;
     });
 
     // all directives are static-safe
diff --git a/packages/@lwc/template-compiler/src/codegen/index.ts b/packages/@lwc/template-compiler/src/codegen/index.ts
index 9840f0b47f..e0b33bf395 100644
--- a/packages/@lwc/template-compiler/src/codegen/index.ts
+++ b/packages/@lwc/template-compiler/src/codegen/index.ts
@@ -75,10 +75,13 @@ import {
     styleMapToStyleDeclsAST,
 } from './helpers';
 import { format as formatModule } from './formatters/module';
+import { bindAttributeExpression } from './expression';
 
 function transform(codeGen: CodeGen): t.Expression {
     const instrumentation = codeGen.state.config.instrumentation;
     function transformElement(element: BaseElement, slotParentName?: string): t.Expression {
+        // TODO [#4077]: Move databag gathering to after static element check as it doesn't seem to be used by static
+        // content optimization.
         const databag = elementDataBag(element, slotParentName);
 
         if (codeGen.staticNodes.has(element) && isElement(element)) {
@@ -411,41 +414,7 @@ function transform(codeGen: CodeGen): t.Expression {
         const isUsedAsAttribute = isAttribute(element, attrName);
 
         if (isExpression(attrValue)) {
-            const expression = codeGen.bindExpression(attrValue);
-
-            // TODO [#2012]: Normalize global boolean attrs values passed to custom elements as props
-            if (isUsedAsAttribute && isBooleanAttribute(attrName, elmName)) {
-                // We need to do some manipulation to allow the diffing algorithm add/remove the attribute
-                // without handling special cases at runtime.
-                return codeGen.genBooleanAttributeExpr(expression);
-            }
-            if (attrName === 'tabindex') {
-                return codeGen.genTabIndex([expression]);
-            }
-            if (attrName === 'id' || isIdReferencingAttribute(attrName)) {
-                return codeGen.genScopedId(expression);
-            }
-            if (
-                codeGen.scopeFragmentId &&
-                isAllowedFragOnlyUrlsXHTML(elmName, attrName, namespace)
-            ) {
-                return codeGen.genScopedFragId(expression);
-            }
-            if (isSvgUseHref(elmName, attrName, namespace)) {
-                if (addLegacySanitizationHook) {
-                    codeGen.usedLwcApis.add('sanitizeAttribute');
-
-                    return t.callExpression(t.identifier('sanitizeAttribute'), [
-                        t.literal(elmName),
-                        t.literal(namespace),
-                        t.literal(attrName),
-                        codeGen.genScopedFragId(expression),
-                    ]);
-                }
-                return codeGen.genScopedFragId(expression);
-            }
-
-            return expression;
+            return bindAttributeExpression(attr, element, codeGen, addLegacySanitizationHook);
         } else if (isStringLiteral(attrValue)) {
             if (attrName === 'id') {
                 return codeGen.genScopedId(attrValue.value);
diff --git a/packages/@lwc/template-compiler/src/codegen/static-element-serializer.ts b/packages/@lwc/template-compiler/src/codegen/static-element-serializer.ts
index 137916b8b1..02f6402e52 100644
--- a/packages/@lwc/template-compiler/src/codegen/static-element-serializer.ts
+++ b/packages/@lwc/template-compiler/src/codegen/static-element-serializer.ts
@@ -6,7 +6,8 @@
  */
 import { htmlEscape, HTML_NAMESPACE, isVoidElement } from '@lwc/shared';
 import { ChildNode, Comment, Element, Literal, Text } from '../shared/types';
-import { isElement, isText, isComment } from '../shared/ast';
+import { isElement, isText, isComment, isExpression } from '../shared/ast';
+import type CodeGen from './codegen';
 
 // Implementation based on the parse5 serializer: https://github.com/inikulin/parse5/blob/master/packages/parse5/lib/serializer/index.ts
 
@@ -30,7 +31,7 @@ function templateStringEscape(str: string): string {
     return str.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
 }
 
-function serializeAttrs(element: Element): string {
+function serializeAttrs(element: Element, codeGen: CodeGen): string {
     /**
      * 0: styleToken in existing class attr
      * 1: styleToken for added class attr
@@ -39,7 +40,15 @@ function serializeAttrs(element: Element): string {
     const attrs: string[] = [];
     let hasClassAttr = false;
 
-    const collector = ({ name, value }: { name: string; value: string | boolean }) => {
+    const collector = ({
+        name,
+        value,
+        hasExpression,
+    }: {
+        name: string;
+        value: string | boolean;
+        hasExpression?: boolean;
+    }) => {
         let v = typeof value === 'string' ? templateStringEscape(value) : value;
 
         if (name === 'class') {
@@ -47,17 +56,23 @@ function serializeAttrs(element: Element): string {
             v += '${0}';
         }
         if (typeof v === 'string') {
-            attrs.push(`${name}="${htmlEscape(v, true)}"`);
+            // Inject a placeholder where the staticPartId will go when an expression occurs.
+            // This is only needed for SSR to inject the expression value during serialization.
+            attrs.push(hasExpression ? `\${"${v}"}` : ` ${name}="${htmlEscape(v, true)}"`);
         } else {
-            attrs.push(name);
+            attrs.push(` ${name}`);
         }
     };
 
     element.attributes
         .map((attr) => {
+            const hasExpression = isExpression(attr.value);
             return {
+                hasExpression,
                 name: attr.name,
-                value: (attr.value as Literal).value,
+                value: hasExpression
+                    ? codeGen.getStaticExpressionToken(attr)
+                    : (attr.value as Literal).value,
             };
         })
         .forEach(collector);
@@ -74,24 +89,20 @@ function serializeAttrs(element: Element): string {
         })
         .forEach(collector);
 
-    return (attrs.length > 0 ? ' ' : '') + attrs.join(' ') + (hasClassAttr ? '${2}' : '${3}');
+    return attrs.join('') + (hasClassAttr ? '${2}' : '${3}');
 }
 
-function serializeChildren(
-    children: ChildNode[],
-    parentTagName: string,
-    preserveComments: boolean
-): string {
+function serializeChildren(children: ChildNode[], parentTagName: string, codeGen: CodeGen): string {
     let html = '';
 
     children.forEach((child) => {
         /* istanbul ignore else  */
         if (isElement(child)) {
-            html += serializeStaticElement(child, preserveComments);
+            html += serializeStaticElement(child, codeGen);
         } else if (isText(child)) {
             html += serializeTextNode(child, rawContentElements.has(parentTagName.toUpperCase()));
         } else if (isComment(child)) {
-            html += serializeCommentNode(child, preserveComments);
+            html += serializeCommentNode(child, codeGen.preserveComments);
         } else {
             throw new TypeError(
                 'Unknown node found while serializing static content. Allowed nodes types are: Element, Text and Comment.'
@@ -117,13 +128,13 @@ function serializeTextNode(text: Text, useRawContent: boolean): string {
     return templateStringEscape(content);
 }
 
-export function serializeStaticElement(element: Element, preserveComments: boolean): string {
+export function serializeStaticElement(element: Element, codeGen: CodeGen): string {
     const { name: tagName, namespace } = element;
 
     const isForeignElement = namespace !== HTML_NAMESPACE;
     const hasChildren = element.children.length > 0;
 
-    let html = `<${tagName}${serializeAttrs(element)}`;
+    let html = `<${tagName}${serializeAttrs(element, codeGen)}`;
 
     if (isForeignElement && !hasChildren) {
         html += '/>';
@@ -131,7 +142,7 @@ export function serializeStaticElement(element: Element, preserveComments: boole
     }
 
     html += '>';
-    html += serializeChildren(element.children, tagName, preserveComments);
+    html += serializeChildren(element.children, tagName, codeGen);
 
     if (!isVoidElement(tagName, namespace) || hasChildren) {
         html += `</${tagName}>`;
diff --git a/packages/@lwc/wire-service/package.json b/packages/@lwc/wire-service/package.json
index a17c091539..ef6decf8a6 100644
--- a/packages/@lwc/wire-service/package.json
+++ b/packages/@lwc/wire-service/package.json
@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/wire-service",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "@wire service",
     "keywords": [
         "lwc"
@@ -42,8 +42,8 @@
         }
     },
     "devDependencies": {
-        "@lwc/engine-core": "6.3.3",
-        "@lwc/shared": "6.3.3"
+        "@lwc/engine-core": "6.3.4",
+        "@lwc/shared": "6.3.4"
     },
     "lwc": {
         "modules": [
diff --git a/packages/lwc/package.json b/packages/lwc/package.json
index 257ae2cf96..2c9176d732 100644
--- a/packages/lwc/package.json
+++ b/packages/lwc/package.json
@@ -1,6 +1,6 @@
 {
     "name": "lwc",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "description": "Lightning Web Components (LWC)",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -20,21 +20,21 @@
         "*.d.ts"
     ],
     "dependencies": {
-        "@lwc/aria-reflection": "6.3.3",
-        "@lwc/babel-plugin-component": "6.3.3",
-        "@lwc/compiler": "6.3.3",
-        "@lwc/engine-core": "6.3.3",
-        "@lwc/engine-dom": "6.3.3",
-        "@lwc/engine-server": "6.3.3",
-        "@lwc/errors": "6.3.3",
-        "@lwc/features": "6.3.3",
-        "@lwc/module-resolver": "6.3.3",
-        "@lwc/rollup-plugin": "6.3.3",
-        "@lwc/shared": "6.3.3",
-        "@lwc/style-compiler": "6.3.3",
-        "@lwc/synthetic-shadow": "6.3.3",
-        "@lwc/template-compiler": "6.3.3",
-        "@lwc/wire-service": "6.3.3"
+        "@lwc/aria-reflection": "6.3.4",
+        "@lwc/babel-plugin-component": "6.3.4",
+        "@lwc/compiler": "6.3.4",
+        "@lwc/engine-core": "6.3.4",
+        "@lwc/engine-dom": "6.3.4",
+        "@lwc/engine-server": "6.3.4",
+        "@lwc/errors": "6.3.4",
+        "@lwc/features": "6.3.4",
+        "@lwc/module-resolver": "6.3.4",
+        "@lwc/rollup-plugin": "6.3.4",
+        "@lwc/shared": "6.3.4",
+        "@lwc/style-compiler": "6.3.4",
+        "@lwc/synthetic-shadow": "6.3.4",
+        "@lwc/template-compiler": "6.3.4",
+        "@lwc/wire-service": "6.3.4"
     },
     "lwc": {
         "modules": [
diff --git a/playground/package.json b/playground/package.json
index 0a9e4dd3af..880adb3d81 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@lwc/playground",
-    "version": "6.3.3",
+    "version": "6.3.4",
     "type": "module",
     "description": "Playground project to experiment with LWC.",
     "scripts": {
@@ -9,9 +9,9 @@
         "build": "NODE_ENV=production rollup -c"
     },
     "devDependencies": {
-        "@lwc/rollup-plugin": "6.3.3",
+        "@lwc/rollup-plugin": "6.3.4",
         "@rollup/plugin-replace": "^5.0.5",
-        "lwc": "6.3.3",
+        "lwc": "6.3.4",
         "rollup": "^4.12.1",
         "rollup-plugin-livereload": "^2.0.5",
         "rollup-plugin-serve": "^3.0.0"

From 6ec9069f6ada5950bbbdaee6fafa5894b7579a35 Mon Sep 17 00:00:00 2001
From: James Tu <j.tu@salesforce.com>
Date: Tue, 19 Mar 2024 11:58:28 -0700
Subject: [PATCH 10/10] chore: fix karma test

---
 .../@lwc/integration-karma/test/static-content/index.spec.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@lwc/integration-karma/test/static-content/index.spec.js b/packages/@lwc/integration-karma/test/static-content/index.spec.js
index 91967626c4..a871928a66 100644
--- a/packages/@lwc/integration-karma/test/static-content/index.spec.js
+++ b/packages/@lwc/integration-karma/test/static-content/index.spec.js
@@ -17,7 +17,7 @@ import DeepListener from 'x/deepListener';
 import Comments from 'x/comments';
 import PreserveComments from 'x/preserveComments';
 import AttributeExpression from 'x/attributeExpression';
-import DeepAttributeExpression from 'x/DeepAttributeExpression';
+import DeepAttributeExpression from 'x/deepAttributeExpression';
 
 if (!process.env.NATIVE_SHADOW) {
     describe('Mixed mode for static content', () => {