diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts
index 5dbe86c078..cfa6974298 100644
--- a/packages/@lwc/engine-core/src/framework/api.ts
+++ b/packages/@lwc/engine-core/src/framework/api.ts
@@ -41,6 +41,8 @@ import {
     VComment,
     VElementData,
     VNodeType,
+    VStatic,
+    Key,
 } from './vnodes';
 
 const SymbolIterator: typeof Symbol.iterator = Symbol.iterator;
@@ -49,6 +51,18 @@ function addVNodeToChildLWC(vnode: VCustomElement) {
     ArrayPush.call(getVMBeingRendered()!.velements, vnode);
 }
 
+// [st]atic node
+function st(fragment: Element, key: Key): VStatic {
+    return {
+        type: VNodeType.Static,
+        sel: undefined,
+        key,
+        elm: undefined,
+        fragment,
+        owner: getVMBeingRendered()!,
+    };
+}
+
 // [h]tml node
 function h(sel: string, data: VElementData, children: VNodes = EmptyArray): VElement {
     const vmBeingRendered = getVMBeingRendered()!;
@@ -546,6 +560,7 @@ const api = ObjectFreeze({
     co,
     dc,
     ti,
+    st,
     gid,
     fid,
     shc,
diff --git a/packages/@lwc/engine-core/src/framework/hydration.ts b/packages/@lwc/engine-core/src/framework/hydration.ts
index 627a34ae2f..2109322568 100644
--- a/packages/@lwc/engine-core/src/framework/hydration.ts
+++ b/packages/@lwc/engine-core/src/framework/hydration.ts
@@ -29,6 +29,7 @@ import {
     VComment,
     VElement,
     VCustomElement,
+    VStatic,
 } from './vnodes';
 
 import { patchProps } from './modules/props';
@@ -81,6 +82,11 @@ function hydrateNode(node: Node, vnode: VNode, renderer: RendererAPI): Node | nu
             hydratedNode = hydrateComment(node, vnode, renderer);
             break;
 
+        case VNodeType.Static:
+            // VStatic are cacheable and cannot have custom renderer associated to them
+            hydratedNode = hydrateStaticElement(node, vnode, renderer);
+            break;
+
         case VNodeType.Element:
             hydratedNode = hydrateElement(node, vnode, vnode.data.renderer ?? renderer);
             break;
@@ -137,6 +143,16 @@ function hydrateComment(node: Node, vnode: VComment, renderer: RendererAPI): Nod
     return node;
 }
 
+function hydrateStaticElement(elm: Node, vnode: VStatic, renderer: RendererAPI): Node | null {
+    if (!areCompatibleNodes(vnode.fragment, elm, vnode, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
+    }
+
+    vnode.elm = elm;
+
+    return elm;
+}
+
 function hydrateElement(elm: Node, vnode: VElement, renderer: RendererAPI): Node | null {
     if (
         !hasCorrectNodeType<Element>(vnode, elm, EnvNodeTypes.ELEMENT, renderer) ||
@@ -481,3 +497,61 @@ function validateStyleAttr(vnode: VBaseElement, elm: Element, renderer: Renderer
 
     return nodesAreCompatible;
 }
+
+function areCompatibleNodes(client: Node, ssr: Node, vnode: VNode, renderer: RendererAPI) {
+    const { getProperty, getAttribute } = renderer;
+    if (getProperty(client, 'nodeType') === EnvNodeTypes.TEXT) {
+        if (!hasCorrectNodeType(vnode, ssr, EnvNodeTypes.TEXT, renderer)) {
+            return false;
+        }
+
+        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+
+    if (getProperty(client, 'nodeType') === EnvNodeTypes.COMMENT) {
+        if (!hasCorrectNodeType(vnode, ssr, EnvNodeTypes.COMMENT, renderer)) {
+            return false;
+        }
+
+        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+
+    if (!hasCorrectNodeType(vnode, ssr, EnvNodeTypes.ELEMENT, renderer)) {
+        return false;
+    }
+
+    let isCompatibleElements = true;
+    if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
+        if (process.env.NODE_ENV !== 'production') {
+            logError(
+                `Hydration mismatch: expecting element with tag "${getProperty(
+                    client,
+                    'tagName'
+                ).toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`,
+                vnode.owner
+            );
+        }
+
+        return false;
+    }
+
+    const clientAttrsNames: string[] = getProperty(client, 'getAttributeNames').call(client);
+
+    clientAttrsNames.forEach((attrName) => {
+        if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+            logError(
+                `Mismatch hydrating element <${getProperty(
+                    client,
+                    'tagName'
+                ).toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(
+                    client,
+                    attrName
+                )}" but found "${getAttribute(ssr, attrName)}"`,
+                vnode.owner
+            );
+            isCompatibleElements = false;
+        }
+    });
+
+    return isCompatibleElements;
+}
diff --git a/packages/@lwc/engine-core/src/framework/main.ts b/packages/@lwc/engine-core/src/framework/main.ts
index b7f87ea1c1..07c9e0ec3b 100644
--- a/packages/@lwc/engine-core/src/framework/main.ts
+++ b/packages/@lwc/engine-core/src/framework/main.ts
@@ -26,6 +26,7 @@ export {
     getAssociatedVMIfPresent,
 } from './vm';
 
+export { parseFragment, parseSVGFragment } from './template';
 export { hydrateRoot } from './hydration';
 
 // Internal APIs used by compiled code -------------------------------------------------------------
diff --git a/packages/@lwc/engine-core/src/framework/renderer.ts b/packages/@lwc/engine-core/src/framework/renderer.ts
index 65940508aa..7dddb2e7f5 100644
--- a/packages/@lwc/engine-core/src/framework/renderer.ts
+++ b/packages/@lwc/engine-core/src/framework/renderer.ts
@@ -18,6 +18,8 @@ export interface RendererAPI {
     isHydrating: () => boolean;
     insert: (node: N, parent: E, anchor: N | null) => void;
     remove: (node: N, parent: E) => void;
+    cloneNode: (node: N, deep: boolean) => N;
+    createFragment: (html: string) => N | null;
     createElement: (tagName: string, namespace?: string) => E;
     createText: (content: string) => N;
     createComment: (content: string) => N;
diff --git a/packages/@lwc/engine-core/src/framework/rendering.ts b/packages/@lwc/engine-core/src/framework/rendering.ts
index ed6da6915e..e3813fd0b4 100644
--- a/packages/@lwc/engine-core/src/framework/rendering.ts
+++ b/packages/@lwc/engine-core/src/framework/rendering.ts
@@ -16,6 +16,7 @@ import {
     keys,
     SVG_NAMESPACE,
     KEY__SHADOW_RESOLVER,
+    KEY__SHADOW_STATIC,
 } from '@lwc/shared';
 
 import { RendererAPI } from './renderer';
@@ -48,6 +49,7 @@ import {
     isVBaseElement,
     isSameVnode,
     VNodeType,
+    VStatic,
 } from './vnodes';
 
 import { patchAttributes } from './modules/attrs';
@@ -98,6 +100,10 @@ function patch(n1: VNode, n2: VNode, renderer: RendererAPI) {
             patchComment(n1 as VComment, n2, renderer);
             break;
 
+        case VNodeType.Static:
+            n2.elm = n1.elm;
+            break;
+    
         case VNodeType.Element:
             patchElement(n1 as VElement, n2, n2.data.renderer ?? renderer);
             break;
@@ -120,6 +126,11 @@ export function mount(node: VNode, parent: ParentNode, renderer: RendererAPI, an
             mountComment(node, parent, anchor, renderer);
             break;
 
+        case VNodeType.Static:
+            // VStatic cannot have a custom renderer associated to them, using owner's renderer
+            mountStatic(node, parent, anchor, renderer);
+            break;
+    
         case VNodeType.Element:
             // If the vnode data has a renderer override use it, else fallback to owner's renderer
             mountElement(node, parent, anchor, node.data.renderer ?? renderer);
@@ -208,6 +219,35 @@ function patchElement(n1: VElement, n2: VElement, renderer: RendererAPI) {
     patchChildren(n1.children, n2.children, elm, renderer);
 }
 
+function mountStatic(
+    vnode: VStatic,
+    parent: ParentNode,
+    anchor: Node | null,
+    renderer: RendererAPI
+) {
+    const { owner } = vnode;
+    const { cloneNode, isSyntheticShadowDefined, insertNode } = renderer;
+    const elm = (vnode.elm = cloneNode(vnode.fragment, true));
+
+    linkNodeToShadow(elm, owner, renderer);
+
+    // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+    const { renderMode, shadowMode } = owner;
+
+    if (isSyntheticShadowDefined) {
+        if (shadowMode === ShadowMode.Synthetic || renderMode === RenderMode.Light) {
+            (elm as any)[KEY__SHADOW_STATIC] = true;
+        }
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+        const isLight = renderMode === RenderMode.Light;
+        patchElementWithRestrictions(elm, { isPortal: false, isLight });
+    }
+
+    insertNode(elm, parent, anchor);
+}
+
 function mountCustomElement(
     vnode: VCustomElement,
     parent: ParentNode,
diff --git a/packages/@lwc/engine-core/src/framework/template.ts b/packages/@lwc/engine-core/src/framework/template.ts
index f0db9d77dc..02084027ff 100644
--- a/packages/@lwc/engine-core/src/framework/template.ts
+++ b/packages/@lwc/engine-core/src/framework/template.ts
@@ -14,31 +14,32 @@ import {
     isNull,
     isTrue,
     isUndefined,
-    toString,
     KEY__SCOPED_CSS,
+    toString,
 } from '@lwc/shared';
 
 import { logError } from '../shared/logger';
 import { getComponentTag } from '../shared/format';
-
+import { createFragment, getFirstChild } from '../renderer';
 import api, { RenderAPI } from './api';
 import {
+    RenderMode,
     resetComponentRoot,
     runWithBoundaryProtection,
+    ShadowMode,
     SlotSet,
     TemplateCache,
     VM,
-    RenderMode,
 } from './vm';
 import { EmptyArray } from './utils';
 import { defaultEmptyTemplate, isTemplateRegistered } from './secure-template';
 import {
-    TemplateStylesheetFactories,
     createStylesheet,
     getStylesheetsContent,
+    TemplateStylesheetFactories,
     updateStylesheetToken,
 } from './stylesheet';
-import { logOperationStart, logOperationEnd, OperationId } from './profiler';
+import { logOperationEnd, logOperationStart, OperationId } from './profiler';
 import { getTemplateOrSwappedTemplate, setActiveVM } from './hot-swaps';
 import { VNodes } from './vnodes';
 
@@ -113,6 +114,77 @@ function validateLightDomTemplate(template: Template, vm: VM) {
     }
 }
 
+const enum FragmentCache {
+    HAS_SCOPED_STYLE = 1 << 0,
+    SHADOW_MODE_SYNTHETIC = 1 << 1,
+}
+
+function buildParseFragmentFn(
+    createFragmentFn: (html: string) => Element
+): (strings: string[], ...keys: number[]) => () => Element {
+    return (strings: string[], ...keys: number[]) => {
+        const cache = create(null);
+
+        return function (): Element {
+            const {
+                context: { hasScopedStyles, stylesheetToken },
+                shadowMode,
+            } = getVMBeingRendered()!;
+            const hasStyleToken = !isUndefined(stylesheetToken);
+            const isSyntheticShadow = shadowMode === ShadowMode.Synthetic;
+
+            let cacheKey = 0;
+            if (hasStyleToken && hasScopedStyles) {
+                cacheKey |= FragmentCache.HAS_SCOPED_STYLE;
+            }
+            if (hasStyleToken && isSyntheticShadow) {
+                cacheKey |= FragmentCache.SHADOW_MODE_SYNTHETIC;
+            }
+
+            if (!isUndefined(cache[cacheKey])) {
+                return cache[cacheKey];
+            }
+
+            const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
+            const classAttrToken =
+                hasScopedStyles && hasStyleToken ? ` class="${stylesheetToken}"` : '';
+            const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+
+            let htmlFragment = '';
+            for (let i = 0, n = keys.length; i < n; i++) {
+                switch (keys[i]) {
+                    case 0: // styleToken in existing class attr
+                        htmlFragment += strings[i] + classToken;
+                        break;
+                    case 1: // styleToken for added class attr
+                        htmlFragment += strings[i] + classAttrToken;
+                        break;
+                    case 2: // styleToken as attr
+                        htmlFragment += strings[i] + attrToken;
+                        break;
+                    case 3: // ${1}${2}
+                        htmlFragment += strings[i] + classAttrToken + attrToken;
+                        break;
+                }
+            }
+
+            htmlFragment += strings[strings.length - 1];
+
+            cache[cacheKey] = createFragmentFn(htmlFragment);
+
+            return cache[cacheKey];
+        };
+    };
+}
+
+// Note: at the moment this code executes, createFragment have not being set.
+export const parseFragment = buildParseFragmentFn((html) => createFragment(html));
+export const parseSVGFragment = buildParseFragmentFn((html) => {
+    const fragment = createFragment('<svg>' + html + '</svg>');
+
+    return getFirstChild(fragment);
+});
+
 export function evaluateTemplate(vm: VM, html: Template): VNodes {
     if (process.env.NODE_ENV !== 'production') {
         assert.isTrue(
diff --git a/packages/@lwc/engine-core/src/framework/vm.ts b/packages/@lwc/engine-core/src/framework/vm.ts
index ee9f43f09a..d8cc25db89 100644
--- a/packages/@lwc/engine-core/src/framework/vm.ts
+++ b/packages/@lwc/engine-core/src/framework/vm.ts
@@ -752,4 +752,4 @@ export function forceRehydration(vm: VM) {
         markComponentAsDirty(vm);
         scheduleRehydration(vm);
     }
-}
+}
\ No newline at end of file
diff --git a/packages/@lwc/engine-core/src/framework/vnodes.ts b/packages/@lwc/engine-core/src/framework/vnodes.ts
index e93fc611f7..e3fc2dc9dc 100644
--- a/packages/@lwc/engine-core/src/framework/vnodes.ts
+++ b/packages/@lwc/engine-core/src/framework/vnodes.ts
@@ -15,9 +15,10 @@ export const enum VNodeType {
     Comment,
     Element,
     CustomElement,
+    Static,
 }
 
-export type VNode = VText | VComment | VElement | VCustomElement;
+export type VNode = VText | VComment | VElement | VCustomElement | VStatic;
 export type VParentElement = VElement | VCustomElement;
 export type VNodes = Readonly<Array<VNode | null>>;
 
@@ -29,6 +30,13 @@ export interface BaseVNode {
     owner: VM;
 }
 
+export interface VStatic extends BaseVNode {
+    type: VNodeType.Static;
+    sel: undefined;
+    key: Key;
+    fragment: Element;
+}
+
 export interface VText extends BaseVNode {
     type: VNodeType.Text;
     sel: undefined;
diff --git a/packages/@lwc/engine-dom/src/index.ts b/packages/@lwc/engine-dom/src/index.ts
index fec06f876c..510c5a6064 100644
--- a/packages/@lwc/engine-dom/src/index.ts
+++ b/packages/@lwc/engine-dom/src/index.ts
@@ -11,6 +11,9 @@ import './polyfills/aria-properties/main';
 // Tests -------------------------------------------------------------------------------------------
 import './testFeatureFlag.ts';
 
+// Tests -------------------------------------------------------------------------------------------
+import './testFeatureFlag.ts';
+
 // Engine-core public APIs -------------------------------------------------------------------------
 export {
     createContextProvider,
@@ -30,6 +33,8 @@ export {
     setHooks,
     getComponentDef,
     isComponentConstructor,
+    parseFragment,
+    parseSVGFragment,
     swapComponent,
     swapStyle,
     swapTemplate,
diff --git a/packages/@lwc/engine-dom/src/renderer.ts b/packages/@lwc/engine-dom/src/renderer.ts
index 313d642e1d..e2d6f5c052 100644
--- a/packages/@lwc/engine-dom/src/renderer.ts
+++ b/packages/@lwc/engine-dom/src/renderer.ts
@@ -100,6 +100,14 @@ export const isSyntheticShadowDefined: boolean = hasOwnProperty.call(
     KEY__SHADOW_TOKEN
 );
 
+function cloneNode(node: Node, deep: boolean): Node {
+    return node.cloneNode(deep);
+}
+
+function createFragment(html: string): Node | null {
+    return document.createRange().createContextualFragment(html).firstChild;
+}
+
 function createElement(tagName: string, namespace?: string): Element {
     return isUndefined(namespace)
         ? document.createElement(tagName)
@@ -286,6 +294,8 @@ export const renderer = {
     isHydrating,
     insert,
     remove,
+    cloneNode,
+    createFragment,
     createElement,
     createText,
     createComment,
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-static/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-static/expected.html
index 04a6a3b5e2..f80834225d 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-static/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-static/expected.html
@@ -1,6 +1,6 @@
 <x-attribute-static>
   <template shadowroot="open">
-    <div class="foo bar foo-bar" style="color: red; background-color: blue" data-foo="foo">
+    <div class="foo bar foo-bar" data-foo="foo" style="color: red; background-color: blue;">
     </div>
   </template>
 </x-attribute-static>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-style/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-style/expected.html
index ab7774509d..55f49c209f 100644
--- a/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-style/expected.html
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/attribute-style/expected.html
@@ -1,12 +1,12 @@
 <x-attribute-style>
   <template shadowroot="open">
-    <div style="color: red">
+    <div style="color: red;">
     </div>
-    <div style="color: blue; background: black; border: 1px solid red">
+    <div style="color: blue; background: black; border: 1px solid red;">
     </div>
-    <div style="border-width: 1px; border-style: solid; border-color: red">
+    <div style="border-width: 1px; border-style: solid; border-color: red;">
     </div>
-    <div style="border-width: 1px !important; border-style: solid; border-color: red !important">
+    <div style="border-width: 1px !important; border-style: solid; border-color: red    !important;">
     </div>
     <div style="color: salmon; background-color: chocolate;">
     </div>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/expected.html
new file mode 100644
index 0000000000..bac59298fd
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/expected.html
@@ -0,0 +1,18 @@
+<x-svgs>
+  <template shadowroot="open">
+    <svg height="150" width="400">
+      <defs>
+        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop class="static" offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1">
+          </stop>
+          <stop class="static" offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1">
+          </stop>
+        </linearGradient>
+      </defs>
+      <ellipse class="static" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)">
+    </svg>
+    <svg class="static" height="150" width="400">
+      <ellipse class="static" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)">
+    </svg>
+  </template>
+</x-svgs>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/index.js
new file mode 100644
index 0000000000..d78ab6613b
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/index.js
@@ -0,0 +1,2 @@
+export const tagName = 'x-svgs';
+export { default } from 'x/svgs';
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/modules/x/svgs/svgs.html b/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/modules/x/svgs/svgs.html
new file mode 100755
index 0000000000..5079387768
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/modules/x/svgs/svgs.html
@@ -0,0 +1,15 @@
+<template>
+    <svg height="150" width="400">
+        <defs>
+            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop class="static" offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" ></stop>
+                <stop class="static" offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" ></stop>
+            </linearGradient>
+        </defs>
+        <ellipse class="static" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
+    </svg>
+
+    <svg class="static" height="150" width="400">
+        <ellipse class="static" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/modules/x/svgs/svgs.js b/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/modules/x/svgs/svgs.js
new file mode 100755
index 0000000000..ed8db3561d
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/svgs/modules/x/svgs/svgs.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class Svgs extends LightningElement {}
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/renderer.ts b/packages/@lwc/engine-server/src/renderer.ts
index 0ed560880b..b34fab5b59 100644
--- a/packages/@lwc/engine-server/src/renderer.ts
+++ b/packages/@lwc/engine-server/src/renderer.ts
@@ -16,7 +16,7 @@ import {
     noop,
 } from '@lwc/shared';
 
-import { HostNode, HostElement, HostAttribute, HostNodeType } from './types';
+import { HostNode, HostElement, HostAttribute, HostNodeType, HostChildNode } from './types';
 import { classNameToTokenList, tokenListToClassName } from './utils/classes';
 
 function unsupportedMethod(name: string): () => never {
@@ -92,6 +92,18 @@ function remove(node: N, parent: E) {
     parent.children.splice(nodeIndex, 1);
 }
 
+function cloneNode(node: N): N {
+    return node;
+}
+
+function createFragment(html: string): HostChildNode {
+    return {
+        type: HostNodeType.Raw,
+        parent: null,
+        value: html,
+    };
+}
+
 function createText(content: string): HostNode {
     return {
         type: HostNodeType.Text,
@@ -390,6 +402,8 @@ export const renderer = {
     isHydrating,
     insert,
     remove,
+    cloneNode,
+    createFragment,
     createElement,
     createText,
     createComment,
diff --git a/packages/@lwc/engine-server/src/serializer.ts b/packages/@lwc/engine-server/src/serializer.ts
index 1d625f2735..5a8f52b93f 100644
--- a/packages/@lwc/engine-server/src/serializer.ts
+++ b/packages/@lwc/engine-server/src/serializer.ts
@@ -5,9 +5,8 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
-import { isVoidElement } from '@lwc/shared';
+import { isVoidElement, htmlEscape } from '@lwc/shared';
 
-import { htmlEscape } from './utils/html-escape';
 import { HostElement, HostShadowRoot, HostAttribute, HostChildNode, HostNodeType } from './types';
 
 function serializeAttributes(attributes: HostAttribute[]): string {
diff --git a/packages/@lwc/engine-server/src/utils/html-escape.ts b/packages/@lwc/shared/src/html-escape.ts
similarity index 63%
rename from packages/@lwc/engine-server/src/utils/html-escape.ts
rename to packages/@lwc/shared/src/html-escape.ts
index 334254930e..57932b0cd4 100644
--- a/packages/@lwc/engine-server/src/utils/html-escape.ts
+++ b/packages/@lwc/shared/src/html-escape.ts
@@ -13,6 +13,8 @@ const ESCAPED_CHARS: { [char: string]: string } = {
     '&': '&amp;',
 };
 
-export function htmlEscape(str: string): string {
-    return str.replace(/["'<>&]/g, (char) => ESCAPED_CHARS[char]);
+export function htmlEscape(str: string, attrMode: boolean = false): string {
+    const searchValue = attrMode ? /["&]/g : /["'<>&]/g;
+
+    return str.replace(searchValue, (char) => ESCAPED_CHARS[char]);
 }
diff --git a/packages/@lwc/shared/src/index.ts b/packages/@lwc/shared/src/index.ts
index bb6245e764..c95e191458 100644
--- a/packages/@lwc/shared/src/index.ts
+++ b/packages/@lwc/shared/src/index.ts
@@ -12,6 +12,7 @@ export * from './global-this';
 export * from './keys';
 export * from './void-elements';
 export * from './html-attributes';
+export * from './html-escape';
 export * from './symbol';
 export * from './namespaces';
 export * from './meta';
diff --git a/packages/@lwc/shared/src/keys.ts b/packages/@lwc/shared/src/keys.ts
index 96205b5ff0..94d906cf40 100644
--- a/packages/@lwc/shared/src/keys.ts
+++ b/packages/@lwc/shared/src/keys.ts
@@ -8,6 +8,8 @@
 export const KEY__IS_NATIVE_SHADOW_ROOT_DEFINED = '$isNativeShadowRootDefined$';
 export const KEY__SHADOW_RESOLVER = '$shadowResolver$';
 export const KEY__SHADOW_RESOLVER_PRIVATE = '$$ShadowResolverKey$$';
+export const KEY__SHADOW_STATIC = '$shadowStaticNode$';
+export const KEY__SHADOW_STATIC_PRIVATE = '$shadowStaticNodeKey$';
 export const KEY__SHADOW_TOKEN = '$shadowToken$';
 export const KEY__SHADOW_TOKEN_PRIVATE = '$$ShadowTokenKey$$';
 export const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
diff --git a/packages/@lwc/synthetic-shadow/src/env/document.ts b/packages/@lwc/synthetic-shadow/src/env/document.ts
index 976fe985c6..5b1207ba7b 100644
--- a/packages/@lwc/synthetic-shadow/src/env/document.ts
+++ b/packages/@lwc/synthetic-shadow/src/env/document.ts
@@ -34,6 +34,7 @@ const defaultViewGetter: (this: Document) => Window | null = getOwnPropertyDescr
 
 const {
     createComment,
+    createTreeWalker,
     querySelectorAll,
     getElementById,
     getElementsByClassName,
@@ -49,6 +50,7 @@ export {
     elementFromPoint,
     elementsFromPoint,
     createComment,
+    createTreeWalker,
     DocumentPrototypeActiveElement,
     querySelectorAll,
     getElementById,
diff --git a/packages/@lwc/synthetic-shadow/src/faux-shadow/shadow-token.ts b/packages/@lwc/synthetic-shadow/src/faux-shadow/shadow-token.ts
index 876016ac4a..0a5b676af9 100644
--- a/packages/@lwc/synthetic-shadow/src/faux-shadow/shadow-token.ts
+++ b/packages/@lwc/synthetic-shadow/src/faux-shadow/shadow-token.ts
@@ -9,8 +9,13 @@ import {
     isUndefined,
     KEY__SHADOW_TOKEN,
     KEY__SHADOW_TOKEN_PRIVATE,
+    KEY__SHADOW_STATIC,
+    KEY__SHADOW_STATIC_PRIVATE,
+    KEY__SHADOW_RESOLVER,
 } from '@lwc/shared';
 import { setAttribute, removeAttribute } from '../env/element';
+import { createTreeWalker } from '../env/document';
+import { getOwnerDocument } from '../shared/utils';
 
 export function getShadowToken(node: Node): string | undefined {
     return (node as any)[KEY__SHADOW_TOKEN];
@@ -44,3 +49,30 @@ defineProperty(Element.prototype, KEY__SHADOW_TOKEN, {
     },
     configurable: true,
 });
+
+defineProperty(Element.prototype, KEY__SHADOW_STATIC, {
+    set(this: Element, v: boolean) {
+        // Marking an element as static will propagate the shadow resolver to the children.
+        const fn = (this as any)[KEY__SHADOW_RESOLVER];
+        if (v) {
+            const treeWalker = createTreeWalker.call(
+                getOwnerDocument(this),
+                this,
+                NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT,
+                () => NodeFilter.FILTER_ACCEPT,
+                false
+            );
+
+            let currentNode: Node | null;
+
+            while ((currentNode = treeWalker.nextNode())) {
+                (currentNode as any)[KEY__SHADOW_RESOLVER] = fn;
+            }
+        }
+        (this as any)[KEY__SHADOW_STATIC_PRIVATE] = v;
+    },
+    get(this: Element): string | undefined {
+        return (this as any)[KEY__SHADOW_STATIC_PRIVATE];
+    },
+    configurable: true,
+});
diff --git a/packages/@lwc/synthetic-shadow/src/typings/documentOverrides.d.ts b/packages/@lwc/synthetic-shadow/src/typings/documentOverrides.d.ts
new file mode 100644
index 0000000000..d518f7fa8e
--- /dev/null
+++ b/packages/@lwc/synthetic-shadow/src/typings/documentOverrides.d.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2018, 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
+ */
+interface Document {
+    createTreeWalker(
+        root: Node,
+        whatToShow?: number,
+        filter?: NodeFilter | null,
+        expandEntityReferences?: boolean
+    ): TreeWalker;
+}
diff --git a/packages/@lwc/template-compiler/README.md b/packages/@lwc/template-compiler/README.md
index 762cfc8a1d..830f560af1 100644
--- a/packages/@lwc/template-compiler/README.md
+++ b/packages/@lwc/template-compiler/README.md
@@ -51,6 +51,7 @@ const { code, warnings } = compile(`<template><h1>Hello World!</h1></template>`,
 -   `experimentalComputedMemberExpression` (boolean, optional, `false` by default) - set to `true` to enable computed member expression in the template, eg: `{list[0].name}`.
 -   `experimentalDynamicDirective` (boolean, optional, `false` by default) - set to `true` to allow the usage of `lwc:dynamic` directives in the template.
 -   `preserveHtmlComments` (boolean, optional, `false` by default) - set to `true` to disable the default behavior of stripping HTML comments.
+-   `disableStaticContentOptimization` (boolean, optional, `false` by default) - set to `true` to disable static content optimizations.
 
 **Return:**
 The method returns an object with the following fields:
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 450a69a239..59c0fbe8e6 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
@@ -1,13 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  attrs: {
-    allow: "geolocation https://google-developers.appspot.com",
-  },
-  key: 0,
-};
+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 { h: api_element } = $api;
-  return [api_element("iframe", stc0)];
+  const { st: api_static_fragment } = $api;
+  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 82a460993e..21db94db2c 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
@@ -1,31 +1,13 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  attrs: {
-    src: "http://www.example.com/image.png",
-    crossorigin: "anonymous",
-  },
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    src: "http://www.example.com/video.mp4",
-    crossorigin: "anonymous",
-  },
-  key: 1,
-};
-const stc2 = {
-  attrs: {
-    src: "http://www.example.com/video.mp3",
-    crossorigin: "anonymous",
-  },
-  key: 2,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<img src="http://www.example.com/image.png" crossorigin="anonymous"${3}>`;
+const $fragment2 = parseFragment`<video src="http://www.example.com/video.mp4" crossorigin="anonymous"${3}></video>`;
+const $fragment3 = parseFragment`<audio src="http://www.example.com/video.mp3" crossorigin="anonymous"${3}></audio>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
+  const { st: api_static_fragment } = $api;
   return [
-    api_element("img", stc0),
-    api_element("video", stc1),
-    api_element("audio", stc2),
+    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/boolean-attribute/hidden-global-attr/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/boolean-attribute/hidden-global-attr/expected.js
index 454688ad9a..3364b0fbb1 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
@@ -1,75 +1,60 @@
 import _xFoo from "x/foo";
-import { registerTemplate } from "lwc";
+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 stc0 = {
-  attrs: {
-    hidden: "",
-  },
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    hidden: "",
-  },
-  key: 1,
-};
-const stc2 = {
-  attrs: {
-    hidden: "other than true",
-  },
-  key: 2,
-};
-const stc3 = {
-  attrs: {
-    hidden: "3",
-  },
-  key: 4,
-};
-const stc4 = {
   props: {
     hidden: true,
   },
-  key: 5,
+  key: 9,
 };
-const stc5 = {
+const stc1 = {
   props: {
     hidden: true,
   },
-  key: 6,
+  key: 10,
 };
-const stc6 = {
+const stc2 = {
   props: {
     hidden: true,
   },
-  key: 7,
+  key: 11,
 };
-const stc7 = {
+const stc3 = {
   props: {
     hidden: true,
   },
-  key: 9,
+  key: 13,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, c: api_custom_element } = $api;
+  const {
+    st: api_static_fragment,
+    t: api_text,
+    h: api_element,
+    c: api_custom_element,
+  } = $api;
   return [
-    api_element("p", stc0, [api_text("boolean present")]),
-    api_element("p", stc1, [api_text("empty string, should be true")]),
-    api_element("p", stc2, [api_text("string value, should be true")]),
+    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_element("p", stc3, [api_text("integer value, should be true")]),
-    api_custom_element("x-foo", _xFoo, stc4, [api_text("boolean present")]),
-    api_custom_element("x-foo", _xFoo, stc5, [
+    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"),
     ]),
-    api_custom_element("x-foo", _xFoo, stc6, [
+    api_custom_element("x-foo", _xFoo, stc2, [
       api_text("string value, should be true"),
     ]),
     api_custom_element(
@@ -79,11 +64,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         props: {
           hidden: $cmp.computed,
         },
-        key: 8,
+        key: 12,
       },
       [api_text("computed value, should be resolved in component")]
     ),
-    api_custom_element("x-foo", _xFoo, stc7, [
+    api_custom_element("x-foo", _xFoo, stc3, [
       api_text("integer value, 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 18ecf49053..b0ee4cdcb3 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
@@ -1,85 +1,58 @@
 import _xFoo from "x/foo";
-import { registerTemplate } from "lwc";
+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 stc0 = {
-  attrs: {
-    required: "",
-  },
-  props: {
-    value: "boolean present",
-  },
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    required: "",
-  },
-  props: {
-    value: "empty string",
-  },
-  key: 1,
-};
-const stc2 = {
-  attrs: {
-    required: "other than true",
-  },
-  props: {
-    value: "string value",
-  },
-  key: 2,
-};
-const stc3 = {
   value: "computed value",
 };
-const stc4 = {
-  attrs: {
-    required: "3",
-  },
-  props: {
-    value: "integer value",
-  },
-  key: 4,
-};
-const stc5 = {
+const stc1 = {
   props: {
     required: true,
   },
-  key: 5,
+  key: 9,
 };
-const stc6 = {
+const stc2 = {
   props: {
     required: "",
   },
-  key: 6,
+  key: 10,
 };
-const stc7 = {
+const stc3 = {
   props: {
     required: "other than true",
   },
-  key: 7,
+  key: 11,
 };
-const stc8 = {
+const stc4 = {
   props: {
     required: "3",
   },
-  key: 9,
+  key: 13,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element, t: api_text, c: api_custom_element } = $api;
+  const {
+    st: api_static_fragment,
+    h: api_element,
+    t: api_text,
+    c: api_custom_element,
+  } = $api;
   return [
-    api_element("input", stc0),
-    api_element("input", stc1),
-    api_element("input", stc2),
+    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment2(), 3),
+    api_static_fragment($fragment3(), 5),
     api_element("input", {
       attrs: {
         required: $cmp.computed ? "" : null,
       },
-      props: stc3,
-      key: 3,
+      props: stc0,
+      key: 6,
     }),
-    api_element("input", stc4),
-    api_custom_element("x-foo", _xFoo, stc5, [api_text("boolean present")]),
-    api_custom_element("x-foo", _xFoo, stc6, [api_text("empty string")]),
-    api_custom_element("x-foo", _xFoo, stc7, [api_text("string value")]),
+    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_custom_element(
       "x-foo",
       _xFoo,
@@ -87,11 +60,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         props: {
           required: $cmp.computed,
         },
-        key: 8,
+        key: 12,
       },
       [api_text("computed value, should be resolved in component")]
     ),
-    api_custom_element("x-foo", _xFoo, stc8, [api_text("integer value")]),
+    api_custom_element("x-foo", _xFoo, stc4, [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 3b77a1aa1b..0c184df518 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,12 +1,7 @@
 import _xFoo from "x/foo";
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p hidden${3}>x</p>`;
 const stc0 = {
-  attrs: {
-    hidden: "",
-  },
-  key: 0,
-};
-const stc1 = {
   props: {
     autofocus: "true",
     autoplay: "true",
@@ -24,20 +19,24 @@ const stc1 = {
     reversed: "true",
     selected: "true",
   },
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, c: api_custom_element } = $api;
+  const {
+    st: api_static_fragment,
+    c: api_custom_element,
+    h: api_element,
+  } = $api;
   return [
-    api_element("p", stc0, [api_text("x")]),
-    api_custom_element("x-foo", _xFoo, stc1),
+    api_static_fragment($fragment1(), 1),
+    api_custom_element("x-foo", _xFoo, stc0),
     api_element("input", {
       attrs: {
         readonly: $cmp.getReadOnly ? "" : null,
         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 d935bc4e1d..651763622a 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,21 +1,16 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  attrs: {
-    hidden: "",
-  },
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p hidden${3}>x</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
+  const { st: api_static_fragment, h: api_element } = $api;
   return [
-    api_element("p", stc0, [api_text("x")]),
+    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 6e12042150..001ad260bd 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
@@ -1,38 +1,15 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  classMap: {
-    foo: true,
-  },
-  key: 0,
-};
-const stc1 = {
-  classMap: {
-    foo: true,
-    bar: true,
-  },
-  key: 1,
-};
-const stc2 = {
-  classMap: {
-    foo: true,
-    bar: true,
-  },
-  key: 2,
-};
-const stc3 = {
-  classMap: {
-    foo: true,
-    bar: true,
-  },
-  key: 3,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div class="foo${0}"${2}></div>`;
+const $fragment2 = parseFragment`<div class="foo bar${0}"${2}></div>`;
+const $fragment3 = parseFragment`<div class=" foo bar   ${0}"${2}></div>`;
+const $fragment4 = parseFragment`<div class="foo   bar${0}"${2}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
+  const { st: api_static_fragment } = $api;
   return [
-    api_element("div", stc0),
-    api_element("div", stc1),
-    api_element("div", stc2),
-    api_element("div", stc3),
+    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 2e0fec04d1..971dc46b11 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
@@ -1,16 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    "data--bar-baz": "xyz",
-  },
-  key: 1,
-};
+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 { h: api_element } = $api;
-  return [api_element("section", stc0, [api_element("p", stc1)])];
+  const { st: api_static_fragment } = $api;
+  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 e2a31eb066..ea70d5017b 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
@@ -1,17 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    "data-foo": "1",
-    "data-bar-baz": "xyz",
-  },
-  key: 1,
-};
+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 { h: api_element } = $api;
-  return [api_element("section", stc0, [api_element("p", stc1)])];
+  const { st: api_static_fragment } = $api;
+  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 70c9666b0a..dc7831f766 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
@@ -1,21 +1,19 @@
 import _fooBar from "foo/bar";
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p title=""${3}></p>`;
 const stc0 = {
-  attrs: {
-    title: "",
-  },
-  key: 0,
-};
-const stc1 = {
   props: {
     content: "",
     visible: true,
   },
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element, c: api_custom_element } = $api;
-  return [api_element("p", stc0), api_custom_element("foo-bar", _fooBar, stc1)];
+  const { st: api_static_fragment, c: api_custom_element } = $api;
+  return [
+    api_static_fragment($fragment1(), 1),
+    api_custom_element("foo-bar", _fooBar, stc0),
+  ];
   /*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 80a6596e68..23a392e648 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
@@ -1,20 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  attrs: {
-    type: "checkbox",
-    required: "",
-    readonly: "",
-    minlength: "5",
-    maxlength: "10",
-  },
-  props: {
-    checked: true,
-  },
-  key: 0,
-};
+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 { h: api_element } = $api;
-  return [api_element("input", stc0)];
+  const { st: api_static_fragment } = $api;
+  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 dd7c444db1..dd4a0c5e66 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
@@ -1,22 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    minlength: "1",
-    maxlength: "5",
-    "unknown-attr": "should-error",
-  },
-  key: 1,
-};
+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 { t: api_text, h: api_element } = $api;
-  return [
-    api_element("section", stc0, [
-      api_element("textarea", stc1, [api_text("x")]),
-    ]),
-  ];
+  const { st: api_static_fragment } = $api;
+  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 8f4a89bc81..833a362aee 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
@@ -1,19 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    title: "x",
-    "aria-hidden": "x",
-  },
-  key: 1,
-};
+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 { t: api_text, h: api_element } = $api;
-  return [
-    api_element("section", stc0, [api_element("p", stc1, [api_text("x")])]),
-  ];
+  const { st: api_static_fragment } = $api;
+  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 3c5a653a42..48414811cf 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
@@ -1,47 +1,34 @@
 import _nsFoo from "ns/foo";
 import _nsBar from "ns/bar";
-import { registerTemplate, sanitizeAttribute } from "lwc";
+import { parseFragment, registerTemplate, sanitizeAttribute } from "lwc";
+const $fragment1 = parseFragment`<a class="test${0}" data-foo="datafoo" aria-hidden="h" role="presentation" href="/foo" title="test" tabindex="-1"${2}></a>`;
+const $fragment2 = parseFragment`<table bgcolor="x"${3}></table>`;
 const stc0 = {
-  classMap: {
-    test: true,
-  },
-  attrs: {
-    "data-foo": "datafoo",
-    "aria-hidden": "h",
-    role: "presentation",
-    href: "/foo",
-    title: "test",
-    tabindex: "-1",
-  },
-  key: 1,
-};
-const stc1 = {
   r: true,
 };
-const stc2 = {
+const stc1 = {
   "data-xx": "foo",
 };
-const stc3 = {
+const stc2 = {
   classMap: {
     cubano: true,
   },
   attrs: {
     focusable: "true",
   },
-  key: 3,
+  key: 4,
   svg: true,
 };
-const stc4 = {
-  attrs: {
-    bgcolor: "x",
-  },
-  key: 5,
-};
-const stc5 = {
+const stc3 = {
   "aria-hidden": "hidden",
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { gid: api_scoped_id, c: api_custom_element, h: api_element } = $api;
+  const {
+    gid: api_scoped_id,
+    c: api_custom_element,
+    st: api_static_fragment,
+    h: api_element,
+  } = $api;
   return [
     api_custom_element("ns-foo", _nsFoo, {
       props: {
@@ -50,10 +37,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
       },
       key: 0,
     }),
-    api_element("a", stc0),
+    api_static_fragment($fragment1(), 2),
     api_custom_element("ns-bar", _nsBar, {
-      classMap: stc1,
-      attrs: stc2,
+      classMap: stc0,
+      attrs: stc1,
       props: {
         ariaDescribedBy: api_scoped_id("ns-foo"),
         ariaHidden: "hidden",
@@ -63,9 +50,9 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         tabIndex: "0",
         bgColor: "blue",
       },
-      key: 2,
+      key: 3,
     }),
-    api_element("svg", stc3, [
+    api_element("svg", stc2, [
       api_element("use", {
         attrs: {
           "xlink:href": sanitizeAttribute(
@@ -75,15 +62,15 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             "xx"
           ),
         },
-        key: 4,
+        key: 5,
         svg: true,
       }),
     ]),
-    api_element("table", stc4),
+    api_static_fragment($fragment2(), 7),
     api_element("div", {
       className: $cmp.foo,
-      attrs: stc5,
-      key: 6,
+      attrs: stc3,
+      key: 8,
     }),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/style/config.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/style/config.json
new file mode 100644
index 0000000000..70b3408bee
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/style/config.json
@@ -0,0 +1,3 @@
+{
+  "disableStaticContentOptimization": true
+}
\ 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 523fbbb8e0..7c62ea3f5c 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
@@ -1,13 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  attrs: {
-    min: "4",
-  },
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<somefancytag min="4"${3}></somefancytag>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [api_element("somefancytag", stc0)];
+  const { st: api_static_fragment } = $api;
+  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 312da81448..f265ad431c 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
@@ -1,15 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  classMap: {
-    foo: true,
-    bar: true,
-    "baz-fiz": true,
-  },
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<section class="foo bar   baz-fiz${0}"${2}></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [api_element("section", stc0)];
+  const { st: api_static_fragment } = $api;
+  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-important/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/base/style-important/expected.js
index 0b669160d6..3b70261129 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
@@ -1,15 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  styleDecls: [
-    ["background", "blue", true],
-    ["color", "red", false],
-    ["opacity", "0.5", true],
-  ],
-  key: 0,
-};
+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 { h: api_element } = $api;
-  return [api_element("div", stc0)];
+  const { st: api_static_fragment } = $api;
+  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 b1d6238779..48da65359b 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
@@ -1,22 +1,12 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  styleDecls: [
-    ["font-size", "12px", false],
-    ["color", "red", false],
-    ["margin", "10px 5px 10px", false],
-  ],
-  key: 0,
-};
-const stc1 = {
-  styleDecls: [
-    ["--my-color", "blue", false],
-    ["color", "var(--my-color)", false],
-  ],
-  key: 1,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<section style="font-size: 12px; color: red; margin: 10px 5px 10px"${3}></section>`;
+const $fragment2 = parseFragment`<section style="--my-color: blue; color: var(--my-color)"${3}></section>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [api_element("section", stc0), api_element("section", stc1)];
+  const { st: api_static_fragment } = $api;
+  return [
+    api_static_fragment($fragment1(), 1),
+    api_static_fragment($fragment2(), 3),
+  ];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
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 a43065101b..3f2b0a6a5f 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
@@ -1,10 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Root</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
-  return [api_element("p", stc0, [api_text("Root")])];
+  const { st: api_static_fragment } = $api;
+  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 b8a5aff98e..289816683f 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
@@ -1,12 +1,10 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<button${3}>click me</button>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { co: api_comment, t: api_text, h: api_element } = $api;
+  const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" This is an HTML comment "),
-    api_element("button", stc0, [api_text("click me")]),
+    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 5b38e130d9..4f2a03d507 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
@@ -1,19 +1,13 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  key: 1,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>true branch</p>`;
+const $fragment2 = parseFragment`<p${3}>false branch</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { co: api_comment, t: api_text, h: api_element } = $api;
+  const { co: api_comment, st: api_static_fragment } = $api;
   return [
     $cmp.truthyValue ? api_comment(" HTML comment inside if:true ") : null,
-    $cmp.truthyValue ? api_element("p", stc0, [api_text("true branch")]) : null,
+    $cmp.truthyValue ? api_static_fragment($fragment1(), 1) : null,
     !$cmp.truthyValue ? api_comment(" HTML comment inside if:false ") : null,
-    !$cmp.truthyValue
-      ? api_element("p", stc1, [api_text("false branch")])
-      : 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 b8a5aff98e..289816683f 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
@@ -1,12 +1,10 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<button${3}>click me</button>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { co: api_comment, t: api_text, h: api_element } = $api;
+  const { co: api_comment, st: api_static_fragment } = $api;
   return [
     api_comment(" This is an HTML comment "),
-    api_element("button", stc0, [api_text("click me")]),
+    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 557acef206..987d545aa0 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
@@ -1,22 +1,19 @@
 import _xChild from "x/child";
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>slot content</p>`;
 const stc0 = {
   key: 0,
 };
-const stc1 = {
-  key: 1,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     co: api_comment,
-    t: api_text,
-    h: api_element,
+    st: api_static_fragment,
     c: api_custom_element,
   } = $api;
   return [
     api_custom_element("x-child", _xChild, stc0, [
       api_comment(" HTML comment inside slot "),
-      api_element("p", stc1, [api_text("slot content")]),
+      api_static_fragment($fragment1(), 2),
     ]),
   ];
   /*LWC compiler vX.X.X*/
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/flatten-child/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/flatten-child/expected.js
index 93cabe3c6a..74ef20257f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/flatten-child/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-dynamic/flatten-child/expected.js
@@ -1,20 +1,17 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${3}>sibling</div>`;
 const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  key: 1,
+  key: 2,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
-    t: api_text,
-    h: api_element,
+    st: api_static_fragment,
     dc: api_dynamic_component,
     f: api_flatten,
   } = $api;
   return api_flatten([
-    api_element("div", stc0, [api_text("sibling")]),
-    api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc1),
+    api_static_fragment($fragment1(), 1),
+    api_dynamic_component("x-foo", $cmp.trackedProp.foo, stc0),
   ]);
   /*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 74be5bec26..c2004a4ab3 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/children/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/children/expected.js
@@ -1,4 +1,7 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Last child</p>`;
+const $fragment2 = parseFragment`<p${3}>Last child</p>`;
+const $fragment3 = parseFragment`<section class="s4${0}"${2}><p${3}>Other child1</p><p${3}>Other child2</p></section>`;
 const stc0 = {
   classMap: {
     s1: true,
@@ -6,42 +9,25 @@ const stc0 = {
   key: 0,
 };
 const stc1 = {
-  key: 1,
-};
-const stc2 = {
   classMap: {
     s2: true,
   },
-  key: 2,
+  key: 3,
 };
-const stc3 = [];
-const stc4 = {
+const stc2 = [];
+const stc3 = {
   classMap: {
     s3: true,
   },
-  key: 5,
-};
-const stc5 = {
   key: 6,
 };
-const stc6 = {
-  classMap: {
-    s4: true,
-  },
-  key: 8,
-};
-const stc7 = {
-  key: 9,
-};
-const stc8 = {
-  key: 10,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     t: api_text,
     i: api_iterator,
-    h: api_element,
+    st: api_static_fragment,
     f: api_flatten,
+    h: api_element,
     k: api_key,
   } = $api;
   return [
@@ -53,12 +39,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         api_iterator($cmp.items, function (item) {
           return api_text("X");
         }),
-        api_element("p", stc1, [api_text("Last child")]),
+        api_static_fragment($fragment1(), 2),
       ])
     ),
     api_element(
       "section",
-      stc2,
+      stc1,
       api_flatten([
         api_text("Other Child"),
         $cmp.isTrue
@@ -67,38 +53,35 @@ 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")]
                 ),
               ];
             })
-          : stc3,
+          : stc2,
       ])
     ),
     api_element(
       "section",
-      stc4,
+      stc3,
       api_flatten([
-        api_element("p", stc5, [api_text("Last child")]),
+        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_element("section", stc6, [
-      api_element("p", stc7, [api_text("Other child1")]),
-      api_element("p", stc8, [api_text("Other child2")]),
-    ]),
+    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 dde9a9e500..e0d2219591 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-sibling/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline-sibling/expected.js
@@ -1,10 +1,8 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<li${3}>Last</li>`;
 const stc0 = {
   key: 0,
 };
-const stc1 = {
-  key: 2,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     k: api_key,
@@ -12,6 +10,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     t: api_text,
     h: api_element,
     i: api_iterator,
+    st: api_static_fragment,
     f: api_flatten,
   } = $api;
   return [
@@ -29,7 +28,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             [api_text(api_dynamic_text(item))]
           );
         }),
-        api_element("li", stc1, [api_text("Last")]),
+        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 22ec05b3f1..e4ef1d3ca1 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-for-each/inline/expected.js
@@ -1,15 +1,18 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>items</p>`;
 const stc0 = {
   key: 0,
 };
 const stc1 = {
   "my-list": true,
 };
-const stc2 = {
-  key: 2,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { k: api_key, t: api_text, h: api_element, i: api_iterator } = $api;
+  const {
+    k: api_key,
+    st: api_static_fragment,
+    h: api_element,
+    i: api_iterator,
+  } = $api;
   return [
     api_element(
       "section",
@@ -21,7 +24,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             classMap: stc1,
             key: api_key(1, item.id),
           },
-          [api_element("p", stc2, [api_text("items")])]
+          [api_static_fragment($fragment1(), 3)]
         );
       })
     ),
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 fba1d36c4c..efd0d883e9 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
@@ -1,23 +1,17 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>1</p>`;
+const $fragment2 = parseFragment`<p${3}>2</p>`;
+const $fragment3 = parseFragment`<p${3}>3</p>`;
 const stc0 = {
   key: 0,
 };
-const stc1 = {
-  key: 1,
-};
-const stc2 = {
-  key: 2,
-};
-const stc3 = {
-  key: 3,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
+  const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue ? api_element("p", stc1, [api_text("1")]) : null,
-      $cmp.isTrue ? api_element("p", stc2, [api_text("2")]) : null,
-      $cmp.isTrue ? api_element("p", stc3, [api_text("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 0995c21419..4e9a6793fe 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
@@ -1,20 +1,21 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>1</p>`;
+const $fragment2 = parseFragment`<p${3}>3</p>`;
 const stc0 = {
   key: 0,
 };
-const stc1 = {
-  key: 1,
-};
-const stc2 = {
-  key: 2,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, d: api_dynamic_text } = $api;
+  const {
+    st: api_static_fragment,
+    d: api_dynamic_text,
+    t: api_text,
+    h: api_element,
+  } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue ? api_element("p", stc1, [api_text("1")]) : null,
+      $cmp.isTrue ? api_static_fragment($fragment1(), 2) : null,
       api_text(api_dynamic_text($cmp.foo)),
-      $cmp.isTrue ? api_element("p", stc2, [api_text("3")]) : 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 b265418f08..45b1446d7b 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
@@ -1,15 +1,13 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>1</p>`;
 const stc0 = {
   key: 0,
 };
-const stc1 = {
-  key: 1,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
+  const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      $cmp.isTrue === true ? api_element("p", stc1, [api_text("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-if-else/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-if/template-if-else/expected.js
index e80dfee3ba..8bc6fd0289 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
@@ -1,15 +1,11 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  key: 1,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>1</p>`;
+const $fragment2 = parseFragment`<p${3}>2</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
+  const { st: api_static_fragment } = $api;
   return [
-    $cmp.isTrue ? api_element("p", stc0, [api_text("1")]) : null,
-    !$cmp.isTrue2 ? api_element("p", stc1, [api_text("2")]) : 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 bd8a8203d1..3a8db33902 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
@@ -1,19 +1,13 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  key: 1,
-};
-const stc2 = {
-  key: 2,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>1</p>`;
+const $fragment2 = parseFragment`<p${3}>2</p>`;
+const $fragment3 = parseFragment`<p${3}>3</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
+  const { st: api_static_fragment } = $api;
   return [
-    $cmp.isTrue ? api_element("p", stc0, [api_text("1")]) : null,
-    $cmp.isTrue ? api_element("p", stc1, [api_text("2")]) : null,
-    $cmp.isTrue ? api_element("p", stc2, [api_text("3")]) : 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 7c2dcd6c50..3ff5acc4d4 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
@@ -1,23 +1,17 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>1</p>`;
+const $fragment2 = parseFragment`<p${3}>2</p>`;
+const $fragment3 = parseFragment`<p${3}>3</p>`;
 const stc0 = {
   key: 0,
 };
-const stc1 = {
-  key: 1,
-};
-const stc2 = {
-  key: 2,
-};
-const stc3 = {
-  key: 3,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
+  const { st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_element("p", stc1, [api_text("1")]),
-      $cmp.bar ? api_element("p", stc2, [api_text("2")]) : null,
-      api_element("p", stc3, [api_text("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 f0627e77f5..68e2e592c8 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
@@ -1,10 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [api_element("div", stc0)];
+  const { st: api_static_fragment } = $api;
+  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/shadow-template/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/directive-render-mode/shadow-template/expected.js
index a43065101b..3f2b0a6a5f 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
@@ -1,10 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Root</p>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
-  return [api_element("p", stc0, [api_text("Root")])];
+  const { st: api_static_fragment } = $api;
+  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 45fa791968..32a1c7f343 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,22 +1,25 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Root</p>`;
 const stc0 = {
-  key: 0,
+  key: 2,
 };
 const stc1 = {
-  key: 1,
-};
-const stc2 = {
   attrs: {
     name: "named",
   },
-  key: 2,
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, s: api_slot, f: api_flatten } = $api;
+  const {
+    st: api_static_fragment,
+    t: api_text,
+    s: api_slot,
+    f: api_flatten,
+  } = $api;
   return api_flatten([
-    api_element("p", stc0, [api_text("Root")]),
-    api_slot("", stc1, [api_text("Default")], $slotset),
-    api_slot("named", stc2, [api_text("Named")], $slotset),
+    api_static_fragment($fragment1(), 1),
+    api_slot("", stc0, [api_text("Default")], $slotset),
+    api_slot("named", stc1, [api_text("Named")], $slotset),
   ]);
   /*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 f2bb0cbeb0..972f1e5314 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
@@ -1,13 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  props: {
-    value: "{value}",
-  },
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<input value="{value}"${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [api_element("input", stc0)];
+  const { st: api_static_fragment } = $api;
+  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/html-tags/unkown-element/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/html-tags/unkown-element/expected.js
index 9edbf70a1c..c85c33e067 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
@@ -1,27 +1,21 @@
 import _xCustomComponent from "x/customComponent";
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<unknonwtag${3}></unknonwtag>`;
+const $fragment2 = parseFragment`<span${3}>valid tags should not warn</span>`;
+const $fragment3 = parseFragment`<spam${3}>this tag has a typo</spam>`;
 const stc0 = {
-  key: 0,
-};
-const stc1 = {
   props: {
     someTruthyValue: true,
   },
-  key: 1,
-};
-const stc2 = {
   key: 2,
 };
-const stc3 = {
-  key: 3,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element, c: api_custom_element, t: api_text } = $api;
+  const { st: api_static_fragment, c: api_custom_element } = $api;
   return [
-    api_element("unknonwtag", stc0),
-    api_custom_element("x-custom-component", _xCustomComponent, stc1),
-    api_element("span", stc2, [api_text("valid tags should not warn")]),
-    api_element("spam", stc3, [api_text("this tag has a typo")]),
+    api_static_fragment($fragment1(), 1),
+    api_custom_element("x-custom-component", _xCustomComponent, stc0),
+    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/parsing-errors/double-close-div/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-div/expected.js
index f0627e77f5..68e2e592c8 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
@@ -1,10 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${3}></div>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [api_element("div", stc0)];
+  const { st: api_static_fragment } = $api;
+  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/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template/expected.js
index 26b8e75a90..c05ef53b1e 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/double-close-template/expected.js
@@ -1,10 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<h1${3}>hello</h1>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
-  return [api_element("h1", stc0, [api_text("hello")])];
+  const { st: api_static_fragment } = $api;
+  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/invalid-template-attribute/single-attribute/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/single-attribute/expected.js
index 011d0b1e9c..8bd6d45b9c 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/single-attribute/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/parsing-errors/invalid-template-attribute/single-attribute/expected.js
@@ -1,7 +1,6 @@
 import { registerTemplate } from "lwc";
 const stc0 = [];
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const {} = $api;
   return stc0;
   /*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 ede3e1175b..3d8b2acb3e 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
@@ -1,16 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    local: "x",
-  },
-  key: 1,
-};
+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 { h: api_element } = $api;
-  return [api_element("section", stc0, [api_element("color-profile", stc1)])];
+  const { st: api_static_fragment } = $api;
+  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/invalid-html-recovery/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/regression/invalid-html-recovery/expected.js
index e2ee031e65..61813ef37a 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
@@ -1,15 +1,11 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  key: 1,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<h1${3}>hello</h1>`;
+const $fragment2 = parseFragment`<br${3}>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element } = $api;
+  const { st: api_static_fragment } = $api;
   return [
-    api_element("h1", stc0, [api_text("hello")]),
-    api_element("br", stc1),
+    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 b1510abe88..2ab7f79243 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
@@ -1,20 +1,18 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Test slot content</p>`;
 const stc0 = {
   attrs: {
     name: "secret-slot",
   },
   key: 0,
 };
-const stc1 = {
-  key: "@secret-slot:1",
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, s: api_slot } = $api;
+  const { st: api_static_fragment, s: api_slot } = $api;
   return [
     api_slot(
       "secret-slot",
       stc0,
-      [api_element("p", stc1, [api_text("Test slot content")])],
+      [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 712be6d986..ed9a5d803e 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
@@ -1,20 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  key: 1,
-};
-const stc2 = {
-  key: 2,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<table${3}><tbody${3}><tr${3}></tr></tbody></table>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [
-    api_element("table", stc0, [
-      api_element("tbody", stc1, [api_element("tr", stc2)]),
-    ]),
-  ];
+  const { st: api_static_fragment } = $api;
+  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/slots/definition-sibiling-slot/expected.js b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/definition-sibiling-slot/expected.js
index 3c28ec5b74..7535f6e0f5 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
@@ -1,4 +1,6 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Default slot other content</p>`;
+const $fragment2 = parseFragment`<p${3}>Default slot content</p>`;
 const stc0 = {
   key: 0,
 };
@@ -9,30 +11,19 @@ const stc1 = {
   key: 1,
 };
 const stc2 = {
-  key: "@other:2",
-};
-const stc3 = {
-  key: 3,
-};
-const stc4 = {
-  key: "@:4",
+  key: 4,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, s: api_slot } = $api;
+  const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
       api_slot(
         "other",
         stc1,
-        [api_element("p", stc2, [api_text("Default slot other content")])],
-        $slotset
-      ),
-      api_slot(
-        "",
-        stc3,
-        [api_element("p", stc4, [api_text("Default slot content")])],
+        [api_static_fragment($fragment1(), "@other:3")],
         $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 fa031752b5..c5d6aed718 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
@@ -1,27 +1,18 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Sibling</p>`;
+const $fragment2 = parseFragment`<p${3}>Default slot content</p>`;
 const stc0 = {
   key: 0,
 };
 const stc1 = {
-  key: 1,
-};
-const stc2 = {
-  key: 2,
-};
-const stc3 = {
-  key: "@:3",
+  key: 3,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, s: api_slot } = $api;
+  const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_element("p", stc1, [api_text("Sibling")]),
-      api_slot(
-        "",
-        stc2,
-        [api_element("p", stc3, [api_text("Default slot content")])],
-        $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 c84662e317..cecd340c95 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
@@ -1,23 +1,16 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Default slot content</p>`;
 const stc0 = {
   key: 0,
 };
 const stc1 = {
   key: 1,
 };
-const stc2 = {
-  key: "@:2",
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, s: api_slot } = $api;
+  const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
-      api_slot(
-        "",
-        stc1,
-        [api_element("p", stc2, [api_text("Default slot content")])],
-        $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 fa67e90ba8..5063780183 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
@@ -1,55 +1,45 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Before header</p>`;
+const $fragment2 = parseFragment`<p${3}>In</p>`;
+const $fragment3 = parseFragment`<p${3}>between</p>`;
+const $fragment4 = parseFragment`<p${3}>Default body</p>`;
+const $fragment5 = parseFragment`<p${3}>Default footer</p>`;
 const stc0 = {
   key: 0,
 };
 const stc1 = {
-  key: 1,
-};
-const stc2 = {
   attrs: {
     name: "header",
   },
-  key: 2,
-};
-const stc3 = {
   key: 3,
 };
-const stc4 = {
-  key: 4,
-};
-const stc5 = {
-  key: 5,
-};
-const stc6 = {
-  key: "@:6",
+const stc2 = {
+  key: 8,
 };
-const stc7 = {
+const stc3 = {
   attrs: {
     name: "footer",
   },
-  key: 7,
-};
-const stc8 = {
-  key: "@footer:8",
+  key: 11,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, s: api_slot } = $api;
+  const {
+    st: api_static_fragment,
+    t: api_text,
+    s: api_slot,
+    h: api_element,
+  } = $api;
   return [
     api_element("section", stc0, [
-      api_element("p", stc1, [api_text("Before header")]),
-      api_slot("header", stc2, [api_text("Default header")], $slotset),
-      api_element("p", stc3, [api_text("In")]),
-      api_element("p", stc4, [api_text("between")]),
-      api_slot(
-        "",
-        stc5,
-        [api_element("p", stc6, [api_text("Default body")])],
-        $slotset
-      ),
+      api_static_fragment($fragment1(), 2),
+      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_slot(
         "footer",
-        stc7,
-        [api_element("p", stc8, [api_text("Default footer")])],
+        stc3,
+        [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 67ac8f6a1f..af17ee531f 100644
--- a/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed/expected.js
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/slots/mixed/expected.js
@@ -1,22 +1,21 @@
 import _xB from "x/b";
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${3}></div>`;
 const stc0 = {
   key: 0,
 };
 const stc1 = {
   key: 1,
 };
-const stc2 = {
-  key: 2,
-};
-const stc3 = [];
+const stc2 = [];
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
-    h: api_element,
+    st: api_static_fragment,
     t: api_text,
     i: api_iterator,
     f: api_flatten,
     c: api_custom_element,
+    h: api_element,
   } = $api;
   return [
     api_element("div", stc0, [
@@ -25,12 +24,12 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         _xB,
         stc1,
         api_flatten([
-          $cmp.isLoading ? api_element("div", stc2) : null,
+          $cmp.isLoading ? api_static_fragment($fragment1(), 3) : null,
           $cmp.haveLoadedItems
             ? api_iterator($cmp.menuItems, function (item) {
                 return api_text("x");
               })
-            : stc3,
+            : stc2,
         ])
       ),
     ]),
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 f464957f13..a2217812f5 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
@@ -1,4 +1,5 @@
-import { registerTemplate } from "lwc";
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<p${3}>Test slot content</p>`;
 const stc0 = {
   key: 0,
 };
@@ -8,17 +9,14 @@ const stc1 = {
   },
   key: 1,
 };
-const stc2 = {
-  key: "@test:2",
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { t: api_text, h: api_element, s: api_slot } = $api;
+  const { st: api_static_fragment, s: api_slot, h: api_element } = $api;
   return [
     api_element("section", stc0, [
       api_slot(
         "test",
         stc1,
-        [api_element("p", stc2, [api_text("Test slot content")])],
+        [api_static_fragment($fragment1(), "@test:3")],
         $slotset
       ),
     ]),
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/actual.html
new file mode 100644
index 0000000000..308f2fd4c6
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/actual.html
@@ -0,0 +1,4 @@
+<template>
+    <h1 data-foo="&quot;>\x3Cscript>alert('pwned')\x3C/script>\x3Ch1 foo=&quot;">
+    </h1>
+</template>
\ No newline at end of file
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
new file mode 100644
index 0000000000..5f85c7f446
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/expected.js
@@ -0,0 +1,9 @@
+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)];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/attr-escaping/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/class-attr-escaping/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/actual.html
new file mode 100644
index 0000000000..5d43d92845
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/actual.html
@@ -0,0 +1,4 @@
+<template>
+    <h1 class="&quot;>\x3Cscript>alert('pwned')\x3C/script>\x3Ch1 foo=&quot;">
+    </h1>
+</template>
\ No newline at end of file
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
new file mode 100644
index 0000000000..a8f2f3af70
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/expected.js
@@ -0,0 +1,9 @@
+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)];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/class-attr-escaping/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/comment-escaping/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/actual.html
new file mode 100644
index 0000000000..572d2d9bf7
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/actual.html
@@ -0,0 +1,3 @@
+<template lwc:preserve-comments>
+    <h1><!-- --&gt;&lt;script&gt;alert('pwned')&lt;/script&gt; &lt!-- --></h1>
+</template>
\ No newline at end of file
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
new file mode 100644
index 0000000000..7b0deeae03
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/expected.js
@@ -0,0 +1,9 @@
+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)];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/comment-escaping/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/no-escaping-tags/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/actual.html
new file mode 100644
index 0000000000..28902761c8
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/actual.html
@@ -0,0 +1,16 @@
+<template>
+    <xmp>
+        &lt;/xmp&gt;Hello &lt;div&gt;world&lt;/div&gt;
+        <div>foo</div>
+    </xmp>
+    <iframe>
+        Hello &lt;div&gt;world&lt;/div&gt;
+        <div>foo</div>
+    </iframe>
+    <noembed>
+        Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div>
+    </noembed>
+    <noframes>
+        <p>It seems your browser does not support frames or is configured to not allow them.</p>
+    </noframes>
+</template>
\ No newline at end of file
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
new file mode 100644
index 0000000000..798c1e36c8
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/expected.js
@@ -0,0 +1,17 @@
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<xmp${3}>&lt;/xmp&gt;Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></xmp>`;
+const $fragment2 = parseFragment`<iframe${3}>Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></iframe>`;
+const $fragment3 = parseFragment`<noembed${3}>Hello &lt;div&gt;world&lt;/div&gt; <div>foo</div></noembed>`;
+const $fragment4 = parseFragment`<noframes${3}><p${3}>It seems your browser does not support frames or is configured to not allow them.</p></noframes>`;
+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),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/metadata.json
new file mode 100644
index 0000000000..74948af4d0
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/no-escaping-tags/metadata.json
@@ -0,0 +1,37 @@
+{
+    "warnings": [
+        {
+            "code": 1123,
+            "message": "LWC1123: Unknown html tag '<xmp>'. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element and https://developer.mozilla.org/en-US/docs/Web/SVG/Element",
+            "level": 2,
+            "location": {
+                "line": 2,
+                "column": 5,
+                "start": 15,
+                "length": 94
+            }
+        },
+        {
+            "code": 1123,
+            "message": "LWC1123: Unknown html tag '<noembed>'. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element and https://developer.mozilla.org/en-US/docs/Web/SVG/Element",
+            "level": 2,
+            "location": {
+                "line": 10,
+                "column": 5,
+                "start": 207,
+                "length": 82
+            }
+        },
+        {
+            "code": 1123,
+            "message": "LWC1123: Unknown html tag '<noframes>'. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element and https://developer.mozilla.org/en-US/docs/Web/SVG/Element",
+            "level": 2,
+            "location": {
+                "line": 13,
+                "column": 5,
+                "start": 294,
+                "length": 123
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/actual.html
new file mode 100644
index 0000000000..5d9c38c94e
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/actual.html
@@ -0,0 +1,6 @@
+<template>
+    <!-- this comment should not be rendered -->
+    <div>
+        <!--nor this one-->
+    </div>
+</template>
\ No newline at end of file
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
new file mode 100644
index 0000000000..68e2e592c8
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/expected.js
@@ -0,0 +1,9 @@
+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)];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-off/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/preserve-comments-on/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/actual.html
new file mode 100644
index 0000000000..ad13f47060
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/actual.html
@@ -0,0 +1,6 @@
+<template lwc:preserve-comments>
+    <!-- this comment should not be static -->
+    <div>
+        <!--only comments within elements can be static-->
+    </div>
+</template>
\ No newline at end of file
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
new file mode 100644
index 0000000000..38aac25c75
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/expected.js
@@ -0,0 +1,12 @@
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<div${3}><!--only comments within elements can be static--></div>`;
+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),
+  ];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/preserve-comments-on/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/text-escaping/actual.html b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/actual.html
new file mode 100644
index 0000000000..c534864c5f
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/actual.html
@@ -0,0 +1,3 @@
+<template>
+    <h1>Hello &lt;div&gt;world&lt;/div&gt;</h1>
+</template>
\ No newline at end of file
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
new file mode 100644
index 0000000000..5acc4e0a05
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/expected.js
@@ -0,0 +1,9 @@
+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)];
+  /*LWC compiler vX.X.X*/
+}
+export default registerTemplate(tmpl);
+tmpl.stylesheets = [];
diff --git a/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/metadata.json b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/metadata.json
new file mode 100644
index 0000000000..51ec5f799c
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/__tests__/fixtures/static-content/text-escaping/metadata.json
@@ -0,0 +1,3 @@
+{
+    "warnings": []
+}
\ No newline at end of file
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 6d4d3bff66..2d528381aa 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
@@ -1,4 +1,20 @@
-import { registerTemplate } from "lwc";
+import { parseSVGFragment, registerTemplate } from "lwc";
+const $fragment1 = parseSVGFragment`<feFlood x="25%" y="25%" width="50%" height="50%" flood-color="green" flood-opacity="0.75"${3}>`;
+const $fragment2 = parseSVGFragment`<feBlend x="25%" y="25%" width="50%" height="50%" in2="SourceGraphic" mode="multiply"${3}>`;
+const $fragment3 = parseSVGFragment`<feMerge x="25%" y="25%" width="50%" height="50%"${3}><feMergeNode in="SourceGraphic"${3}><feMergeNode in="FillPaint"${3}></feMerge>`;
+const $fragment4 = parseSVGFragment`<g fill="none" stroke="blue" stroke-width="4"${3}><rect width="200" height="200"${3}><line x2="200" y2="200"${3}><line x1="200" y2="200"${3}></g>`;
+const $fragment5 = parseSVGFragment`<circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"${3}>`;
+const $fragment6 = parseSVGFragment`<g transform="translate(200 0)"${3}><g fill="none" stroke="blue" stroke-width="4"${3}><rect width="200" height="200"${3}><line x2="200" y2="200"${3}><line x1="200" y2="200"${3}></g><circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"${3}></g>`;
+const $fragment7 = parseSVGFragment`<g transform="translate(0 200)"${3}><g fill="none" stroke="blue" stroke-width="4"${3}><rect width="200" height="200"${3}><line x2="200" y2="200"${3}><line x1="200" y2="200"${3}></g><circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"${3}></g>`;
+const $fragment8 = parseSVGFragment`<rect fill="none" stroke="blue" x="1" y="1" width="598" height="248"${3}>`;
+const $fragment9 = parseSVGFragment`<g${3}><rect x="50" y="25" width="100" height="200" filter="url(#Default)"${3}><rect x="50" y="25" width="100" height="200" fill="none" stroke="green"${3}><rect x="250" y="25" width="100" height="200" filter="url(#Fitted)"${3}><rect x="250" y="25" width="100" height="200" fill="none" stroke="green"${3}><rect x="450" y="25" width="100" height="200" filter="url(#Shifted)"${3}><rect x="450" y="25" width="100" height="200" fill="none" stroke="green"${3}></g>`;
+const $fragment10 = parseSVGFragment`<desc${3}>Produces a 3D lighting effect.</desc>`;
+const $fragment11 = parseSVGFragment`<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"${3}>`;
+const $fragment12 = parseSVGFragment`<feOffset in="blur" dx="4" dy="4" result="offsetBlur"${3}>`;
+const $fragment13 = parseSVGFragment`<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut"${3}><fePointLight x="-5000" y="-10000" z="20000"${3}></feSpecularLighting>`;
+const $fragment14 = parseSVGFragment`<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"${3}>`;
+const $fragment15 = parseSVGFragment`<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"${3}>`;
+const $fragment16 = parseSVGFragment`<feMerge${3}><feMergeNode in="offsetBlur"${3}><feMergeNode in="litPaint"${3}></feMerge>`;
 const stc0 = {
   attrs: {
     width: "400",
@@ -13,201 +29,6 @@ const stc1 = {
   svg: true,
 };
 const stc2 = {
-  attrs: {
-    x: "25%",
-    y: "25%",
-    width: "50%",
-    height: "50%",
-    "flood-color": "green",
-    "flood-opacity": "0.75",
-  },
-  key: 3,
-  svg: true,
-};
-const stc3 = {
-  attrs: {
-    x: "25%",
-    y: "25%",
-    width: "50%",
-    height: "50%",
-    in2: "SourceGraphic",
-    mode: "multiply",
-  },
-  key: 5,
-  svg: true,
-};
-const stc4 = {
-  attrs: {
-    x: "25%",
-    y: "25%",
-    width: "50%",
-    height: "50%",
-  },
-  key: 7,
-  svg: true,
-};
-const stc5 = {
-  attrs: {
-    in: "SourceGraphic",
-  },
-  key: 8,
-  svg: true,
-};
-const stc6 = {
-  attrs: {
-    in: "FillPaint",
-  },
-  key: 9,
-  svg: true,
-};
-const stc7 = {
-  attrs: {
-    fill: "none",
-    stroke: "blue",
-    "stroke-width": "4",
-  },
-  key: 10,
-  svg: true,
-};
-const stc8 = {
-  attrs: {
-    width: "200",
-    height: "200",
-  },
-  key: 11,
-  svg: true,
-};
-const stc9 = {
-  attrs: {
-    x2: "200",
-    y2: "200",
-  },
-  key: 12,
-  svg: true,
-};
-const stc10 = {
-  attrs: {
-    x1: "200",
-    y2: "200",
-  },
-  key: 13,
-  svg: true,
-};
-const stc11 = {
-  attrs: {
-    fill: "green",
-    filter: "url(#flood)",
-    cx: "100",
-    cy: "100",
-    r: "90",
-  },
-  key: 14,
-  svg: true,
-};
-const stc12 = {
-  attrs: {
-    transform: "translate(200 0)",
-  },
-  key: 15,
-  svg: true,
-};
-const stc13 = {
-  attrs: {
-    fill: "none",
-    stroke: "blue",
-    "stroke-width": "4",
-  },
-  key: 16,
-  svg: true,
-};
-const stc14 = {
-  attrs: {
-    width: "200",
-    height: "200",
-  },
-  key: 17,
-  svg: true,
-};
-const stc15 = {
-  attrs: {
-    x2: "200",
-    y2: "200",
-  },
-  key: 18,
-  svg: true,
-};
-const stc16 = {
-  attrs: {
-    x1: "200",
-    y2: "200",
-  },
-  key: 19,
-  svg: true,
-};
-const stc17 = {
-  attrs: {
-    fill: "green",
-    filter: "url(#blend)",
-    cx: "100",
-    cy: "100",
-    r: "90",
-  },
-  key: 20,
-  svg: true,
-};
-const stc18 = {
-  attrs: {
-    transform: "translate(0 200)",
-  },
-  key: 21,
-  svg: true,
-};
-const stc19 = {
-  attrs: {
-    fill: "none",
-    stroke: "blue",
-    "stroke-width": "4",
-  },
-  key: 22,
-  svg: true,
-};
-const stc20 = {
-  attrs: {
-    width: "200",
-    height: "200",
-  },
-  key: 23,
-  svg: true,
-};
-const stc21 = {
-  attrs: {
-    x2: "200",
-    y2: "200",
-  },
-  key: 24,
-  svg: true,
-};
-const stc22 = {
-  attrs: {
-    x1: "200",
-    y2: "200",
-  },
-  key: 25,
-  svg: true,
-};
-const stc23 = {
-  attrs: {
-    fill: "green",
-    "fill-opacity": "0.5",
-    filter: "url(#merge)",
-    cx: "100",
-    cy: "100",
-    r: "90",
-  },
-  key: 26,
-  svg: true,
-};
-const stc24 = {
   attrs: {
     width: "600",
     height: "250",
@@ -215,182 +36,11 @@ const stc24 = {
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink",
   },
-  key: 27,
-  svg: true,
-};
-const stc25 = {
-  attrs: {
-    fill: "none",
-    stroke: "blue",
-    x: "1",
-    y: "1",
-    width: "598",
-    height: "248",
-  },
-  key: 28,
-  svg: true,
-};
-const stc26 = {
-  key: 29,
-  svg: true,
-};
-const stc27 = {
-  attrs: {
-    x: "50",
-    y: "25",
-    width: "100",
-    height: "200",
-    filter: "url(#Default)",
-  },
-  key: 30,
-  svg: true,
-};
-const stc28 = {
-  attrs: {
-    x: "50",
-    y: "25",
-    width: "100",
-    height: "200",
-    fill: "none",
-    stroke: "green",
-  },
-  key: 31,
-  svg: true,
-};
-const stc29 = {
-  attrs: {
-    x: "250",
-    y: "25",
-    width: "100",
-    height: "200",
-    filter: "url(#Fitted)",
-  },
-  key: 32,
-  svg: true,
-};
-const stc30 = {
-  attrs: {
-    x: "250",
-    y: "25",
-    width: "100",
-    height: "200",
-    fill: "none",
-    stroke: "green",
-  },
-  key: 33,
-  svg: true,
-};
-const stc31 = {
-  attrs: {
-    x: "450",
-    y: "25",
-    width: "100",
-    height: "200",
-    filter: "url(#Shifted)",
-  },
-  key: 34,
-  svg: true,
-};
-const stc32 = {
-  attrs: {
-    x: "450",
-    y: "25",
-    width: "100",
-    height: "200",
-    fill: "none",
-    stroke: "green",
-  },
-  key: 35,
-  svg: true,
-};
-const stc33 = {
-  key: 37,
-  svg: true,
-};
-const stc34 = {
-  attrs: {
-    in: "SourceAlpha",
-    stdDeviation: "4",
-    result: "blur",
-  },
-  key: 38,
-  svg: true,
-};
-const stc35 = {
-  attrs: {
-    in: "blur",
-    dx: "4",
-    dy: "4",
-    result: "offsetBlur",
-  },
-  key: 39,
-  svg: true,
-};
-const stc36 = {
-  attrs: {
-    in: "blur",
-    surfaceScale: "5",
-    specularConstant: ".75",
-    specularExponent: "20",
-    "lighting-color": "#bbbbbb",
-    result: "specOut",
-  },
-  key: 40,
-  svg: true,
-};
-const stc37 = {
-  attrs: {
-    x: "-5000",
-    y: "-10000",
-    z: "20000",
-  },
-  key: 41,
-  svg: true,
-};
-const stc38 = {
-  attrs: {
-    in: "specOut",
-    in2: "SourceAlpha",
-    operator: "in",
-    result: "specOut",
-  },
-  key: 42,
-  svg: true,
-};
-const stc39 = {
-  attrs: {
-    in: "SourceGraphic",
-    in2: "specOut",
-    operator: "arithmetic",
-    k1: "0",
-    k2: "1",
-    k3: "1",
-    k4: "0",
-    result: "litPaint",
-  },
-  key: 43,
-  svg: true,
-};
-const stc40 = {
-  key: 44,
-  svg: true,
-};
-const stc41 = {
-  attrs: {
-    in: "offsetBlur",
-  },
-  key: 45,
-  svg: true,
-};
-const stc42 = {
-  attrs: {
-    in: "litPaint",
-  },
-  key: 46,
+  key: 19,
   svg: true,
 };
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { gid: api_scoped_id, h: api_element, t: api_text } = $api;
+  const { gid: api_scoped_id, st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("svg", stc0, [
       api_element("defs", stc1, [
@@ -408,7 +58,7 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             key: 2,
             svg: true,
           },
-          [api_element("feFlood", stc2)]
+          [api_static_fragment($fragment1(), 4)]
         ),
         api_element(
           "filter",
@@ -417,10 +67,10 @@ function tmpl($api, $cmp, $slotset, $ctx) {
               id: api_scoped_id("blend"),
               primitiveUnits: "objectBoundingBox",
             },
-            key: 4,
+            key: 5,
             svg: true,
           },
-          [api_element("feBlend", stc3)]
+          [api_static_fragment($fragment2(), 7)]
         ),
         api_element(
           "filter",
@@ -429,50 +79,20 @@ function tmpl($api, $cmp, $slotset, $ctx) {
               id: api_scoped_id("merge"),
               primitiveUnits: "objectBoundingBox",
             },
-            key: 6,
+            key: 8,
             svg: true,
           },
-          [
-            api_element("feMerge", stc4, [
-              api_element("feMergeNode", stc5),
-              api_element("feMergeNode", stc6),
-            ]),
-          ]
+          [api_static_fragment($fragment3(), 10)]
         ),
       ]),
-      api_element("g", stc7, [
-        api_element("rect", stc8),
-        api_element("line", stc9),
-        api_element("line", stc10),
-      ]),
-      api_element("circle", stc11),
-      api_element("g", stc12, [
-        api_element("g", stc13, [
-          api_element("rect", stc14),
-          api_element("line", stc15),
-          api_element("line", stc16),
-        ]),
-        api_element("circle", stc17),
-      ]),
-      api_element("g", stc18, [
-        api_element("g", stc19, [
-          api_element("rect", stc20),
-          api_element("line", stc21),
-          api_element("line", stc22),
-        ]),
-        api_element("circle", stc23),
-      ]),
+      api_static_fragment($fragment4(), 12),
+      api_static_fragment($fragment5(), 14),
+      api_static_fragment($fragment6(), 16),
+      api_static_fragment($fragment7(), 18),
     ]),
-    api_element("svg", stc24, [
-      api_element("rect", stc25),
-      api_element("g", stc26, [
-        api_element("rect", stc27),
-        api_element("rect", stc28),
-        api_element("rect", stc29),
-        api_element("rect", stc30),
-        api_element("rect", stc31),
-        api_element("rect", stc32),
-      ]),
+    api_element("svg", stc2, [
+      api_static_fragment($fragment8(), 21),
+      api_static_fragment($fragment9(), 23),
       api_element(
         "filter",
         {
@@ -484,24 +104,17 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             width: "200",
             height: "120",
           },
-          key: 36,
+          key: 24,
           svg: true,
         },
         [
-          api_element("desc", stc33, [
-            api_text("Produces a 3D lighting effect."),
-          ]),
-          api_element("feGaussianBlur", stc34),
-          api_element("feOffset", stc35),
-          api_element("feSpecularLighting", stc36, [
-            api_element("fePointLight", stc37),
-          ]),
-          api_element("feComposite", stc38),
-          api_element("feComposite", stc39),
-          api_element("feMerge", stc40, [
-            api_element("feMergeNode", stc41),
-            api_element("feMergeNode", stc42),
-          ]),
+          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 e750658586..7176823b18 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
@@ -1,56 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-};
-const stc1 = {
-  attrs: {
-    width: "706",
-    height: "180",
-  },
-  key: 1,
-  svg: true,
-};
-const stc2 = {
-  attrs: {
-    transform: "translate(3,3)",
-  },
-  key: 2,
-  svg: true,
-};
-const stc3 = {
-  attrs: {
-    transform: "translate(250,0)",
-  },
-  key: 3,
-  svg: true,
-};
-const stc4 = {
-  attrs: {
-    width: "200",
-    height: "36",
-    "xlink:href": "javascript:alert(1)",
-  },
-  key: 4,
-  svg: true,
-};
-const stc5 = {
-  key: 5,
-};
+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 { t: api_text, h: api_element } = $api;
-  return [
-    api_element("div", stc0, [
-      api_element("svg", stc1, [
-        api_element("g", stc2, [
-          api_element("g", stc3, [
-            api_element("foreignObject", stc4, [
-              api_element("a", stc5, [api_text("x")]),
-            ]),
-          ]),
-        ]),
-      ]),
-    ]),
-  ];
+  const { st: api_static_fragment } = $api;
+  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 68c4e42879..08235da21d 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
@@ -1,4 +1,7 @@
-import { registerTemplate } from "lwc";
+import { parseSVGFragment, registerTemplate } from "lwc";
+const $fragment1 = parseSVGFragment`<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"${3}></stop>`;
+const $fragment2 = parseSVGFragment`<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"${3}></stop>`;
+const $fragment3 = parseSVGFragment`<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"${3}>`;
 const stc0 = {
   attrs: {
     height: "150",
@@ -11,41 +14,8 @@ const stc1 = {
   key: 1,
   svg: true,
 };
-const stc2 = {
-  styleDecls: [
-    ["stop-color", "rgb(255,255,0)", false],
-    ["stop-opacity", "1", false],
-  ],
-  attrs: {
-    offset: "0%",
-  },
-  key: 3,
-  svg: true,
-};
-const stc3 = {
-  styleDecls: [
-    ["stop-color", "rgb(255,0,0)", false],
-    ["stop-opacity", "1", false],
-  ],
-  attrs: {
-    offset: "100%",
-  },
-  key: 4,
-  svg: true,
-};
-const stc4 = {
-  attrs: {
-    cx: "200",
-    cy: "70",
-    rx: "85",
-    ry: "55",
-    fill: "url(#grad1)",
-  },
-  key: 5,
-  svg: true,
-};
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { gid: api_scoped_id, h: api_element } = $api;
+  const { gid: api_scoped_id, st: api_static_fragment, h: api_element } = $api;
   return [
     api_element("svg", stc0, [
       api_element("defs", stc1, [
@@ -62,10 +32,13 @@ function tmpl($api, $cmp, $slotset, $ctx) {
             key: 2,
             svg: true,
           },
-          [api_element("stop", stc2), api_element("stop", stc3)]
+          [
+            api_static_fragment($fragment1(), 4),
+            api_static_fragment($fragment2(), 6),
+          ]
         ),
       ]),
-      api_element("ellipse", stc4),
+      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 0695848bc1..269fb1aa8c 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
@@ -1,54 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  attrs: {
-    version: "1.1",
-    baseProfile: "full",
-    width: "300",
-    height: "200",
-    xmlns: "http://www.w3.org/2000/svg",
-  },
-  key: 0,
-  svg: true,
-};
-const stc1 = {
-  attrs: {
-    width: "100%",
-    height: "100%",
-    fill: "red",
-  },
-  key: 1,
-  svg: true,
-};
-const stc2 = {
-  attrs: {
-    cx: "150",
-    cy: "100",
-    r: "80",
-    fill: "green",
-  },
-  key: 2,
-  svg: true,
-};
-const stc3 = {
-  attrs: {
-    x: "150",
-    y: "125",
-    "font-size": "60",
-    "text-anchor": "middle",
-    fill: "white",
-  },
-  key: 3,
-  svg: true,
-};
+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 { h: api_element, t: api_text } = $api;
-  return [
-    api_element("svg", stc0, [
-      api_element("rect", stc1),
-      api_element("circle", stc2),
-      api_element("text", stc3, [api_text("SVG")]),
-    ]),
-  ];
+  const { st: api_static_fragment } = $api;
+  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 c292a43016..01e88b8423 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
@@ -1,18 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  attrs: {
-    xmlns: "http://www.w3.org/2000/svg",
-  },
-  key: 0,
-  svg: true,
-};
-const stc1 = {
-  key: 1,
-  svg: true,
-};
+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 { h: api_element } = $api;
-  return [api_element("svg", stc0, [api_element("path", stc1)])];
+  const { st: api_static_fragment } = $api;
+  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 7e52634c1e..89dd30f124 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
@@ -1,26 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  attrs: {
-    width: "200",
-    height: "200",
-  },
-  key: 0,
-  svg: true,
-};
-const stc1 = {
-  attrs: {
-    "xlink:href": "/foo.png",
-    x: "1",
-    y: "2",
-    height: "200",
-    width: "200",
-  },
-  key: 1,
-  svg: true,
-};
+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}></image></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [api_element("svg", stc0, [api_element("image", stc1)])];
+  const { st: api_static_fragment } = $api;
+  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 2cd2b33217..8149969271 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
@@ -1,119 +1,8 @@
-import { registerTemplate } from "lwc";
-const stc0 = {
-  key: 0,
-  svg: true,
-};
-const stc1 = {
-  key: 1,
-  svg: true,
-};
-const stc2 = {
-  key: 2,
-  svg: true,
-};
-const stc3 = {
-  key: 3,
-  svg: true,
-};
-const stc4 = {
-  key: 4,
-  svg: true,
-};
-const stc5 = {
-  key: 5,
-  svg: true,
-};
-const stc6 = {
-  key: 6,
-  svg: true,
-};
-const stc7 = {
-  key: 7,
-  svg: true,
-};
-const stc8 = {
-  key: 8,
-  svg: true,
-};
-const stc9 = {
-  key: 9,
-  svg: true,
-};
-const stc10 = {
-  key: 10,
-  svg: true,
-};
-const stc11 = {
-  key: 11,
-  svg: true,
-};
-const stc12 = {
-  key: 12,
-  svg: true,
-};
-const stc13 = {
-  key: 13,
-  svg: true,
-};
-const stc14 = {
-  key: 14,
-  svg: true,
-};
-const stc15 = {
-  key: 15,
-  svg: true,
-};
-const stc16 = {
-  key: 16,
-  svg: true,
-};
-const stc17 = {
-  key: 17,
-  svg: true,
-};
-const stc18 = {
-  key: 18,
-  svg: true,
-};
-const stc19 = {
-  key: 19,
-  svg: true,
-};
-const stc20 = {
-  key: 20,
-  svg: true,
-};
-const stc21 = {
-  key: 21,
-  svg: true,
-};
+import { parseFragment, registerTemplate } from "lwc";
+const $fragment1 = parseFragment`<svg${3}><a${3}></a><circle${3}><defs${3}></defs><desc${3}></desc><ellipse${3}><filter${3}></filter><g${3}></g><line${3}><marker${3}></marker><mask${3}></mask><path${3}><pattern${3}></pattern><polygon${3}></polygon><polyline${3}></polyline><rect${3}><stop${3}></stop><symbol${3}></symbol><text${3}></text><title${3}></title><tspan${3}></tspan><use${3}></use></svg>`;
 function tmpl($api, $cmp, $slotset, $ctx) {
-  const { h: api_element } = $api;
-  return [
-    api_element("svg", stc0, [
-      api_element("a", stc1),
-      api_element("circle", stc2),
-      api_element("defs", stc3),
-      api_element("desc", stc4),
-      api_element("ellipse", stc5),
-      api_element("filter", stc6),
-      api_element("g", stc7),
-      api_element("line", stc8),
-      api_element("marker", stc9),
-      api_element("mask", stc10),
-      api_element("path", stc11),
-      api_element("pattern", stc12),
-      api_element("polygon", stc13),
-      api_element("polyline", stc14),
-      api_element("rect", stc15),
-      api_element("stop", stc16),
-      api_element("symbol", stc17),
-      api_element("text", stc18),
-      api_element("title", stc19),
-      api_element("tspan", stc20),
-      api_element("use", stc21),
-    ]),
-  ];
+  const { st: api_static_fragment } = $api;
+  return [api_static_fragment($fragment1(), 1)];
   /*LWC compiler vX.X.X*/
 }
 export default registerTemplate(tmpl);
diff --git a/packages/@lwc/template-compiler/src/codegen/codegen.ts b/packages/@lwc/template-compiler/src/codegen/codegen.ts
index ccd9c07bc2..b6821823c5 100644
--- a/packages/@lwc/template-compiler/src/codegen/codegen.ts
+++ b/packages/@lwc/template-compiler/src/codegen/codegen.ts
@@ -5,13 +5,28 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 import { walk } from 'estree-walker';
+import { SVG_NAMESPACE } from '@lwc/shared';
+
 import { NormalizedConfig } from '../config';
 
 import * as t from '../shared/estree';
-import { Expression, Literal, LWCDirectiveRenderMode, Root } from '../shared/types';
-import { TEMPLATE_PARAMS } from '../shared/constants';
+import {
+    ChildNode,
+    Element,
+    Expression,
+    Literal,
+    LWCDirectiveRenderMode,
+    Root,
+} from '../shared/types';
+import {
+    PARSE_FRAGMENT_METHOD_NAME,
+    PARSE_SVG_FRAGMENT_METHOD_NAME,
+    TEMPLATE_PARAMS,
+} from '../shared/constants';
 import { isPreserveCommentsDirective, isRenderModeDirective } from '../shared/ast';
 import { isArrayExpression } from '../shared/estree';
+import { getStaticNodes } from './helpers';
+import { serializeStaticElement } from './static-element-serializer';
 
 type RenderPrimitive =
     | 'iterator'
@@ -28,7 +43,8 @@ type RenderPrimitive =
     | 'scopedId'
     | 'scopedFragId'
     | 'comment'
-    | 'sanitizeHtmlContent';
+    | 'sanitizeHtmlContent'
+    | 'staticFragment';
 
 interface RenderPrimitiveDefinition {
     name: string;
@@ -51,6 +67,7 @@ const RENDER_APIS: { [primitive in RenderPrimitive]: RenderPrimitiveDefinition }
     scopedFragId: { name: 'fid', alias: 'api_scoped_frag_id' },
     comment: { name: 'co', alias: 'api_comment' },
     sanitizeHtmlContent: { name: 'shc', alias: 'api_sanitize_html_content' },
+    staticFragment: { name: 'st', alias: 'api_static_fragment' },
 };
 
 interface Scope {
@@ -86,6 +103,9 @@ export default class CodeGen {
      */
     private scope: Scope;
 
+    readonly staticNodes: Set<ChildNode> = new Set<ChildNode>();
+    readonly hoistedNodes: Array<{ identifier: t.Identifier; expr: t.Expression }> = [];
+
     currentId = 0;
     currentKey = 0;
     innerHtmlInstances = 0;
@@ -107,6 +127,9 @@ export default class CodeGen {
         scopeFragmentId: boolean;
     }) {
         this.root = root;
+        if (!config.disableStaticContentOptimization) {
+            this.staticNodes = getStaticNodes(root);
+        }
         this.renderMode =
             root.directives.find(isRenderModeDirective)?.value.value ??
             LWCDirectiveRenderMode.shadow;
@@ -398,4 +421,48 @@ export default class CodeGen {
 
         return expression as t.Expression;
     }
+
+    genHoistedElement(element: Element, slotParentName?: string): t.Expression {
+        const key =
+            slotParentName !== undefined
+                ? `@${slotParentName}:${this.generateKey()}`
+                : this.generateKey();
+        const html = serializeStaticElement(element, this.preserveComments);
+
+        const parseMethod =
+            element.name !== 'svg' && element.namespace === SVG_NAMESPACE
+                ? PARSE_SVG_FRAGMENT_METHOD_NAME
+                : PARSE_FRAGMENT_METHOD_NAME;
+
+        this.usedLwcApis.add(parseMethod);
+
+        // building the taggedTemplate expression as if it were a string
+        const expr = t.taggedTemplateExpression(
+            t.identifier(parseMethod),
+            t.templateLiteral(
+                [
+                    {
+                        type: 'TemplateElement',
+                        tail: true,
+                        value: {
+                            raw: html,
+                            cooked: html,
+                        },
+                    },
+                ],
+                []
+            )
+        );
+
+        const identifier = t.identifier(`$fragment${this.hoistedNodes.length + 1}`);
+        this.hoistedNodes.push({
+            identifier,
+            expr,
+        });
+
+        return this._renderApiCall(RENDER_APIS.staticFragment, [
+            t.callExpression(identifier, []),
+            t.literal(key),
+        ]);
+    }
 }
diff --git a/packages/@lwc/template-compiler/src/codegen/formatters/module.ts b/packages/@lwc/template-compiler/src/codegen/formatters/module.ts
index 22c5b71d6b..56e0b2fd1b 100644
--- a/packages/@lwc/template-compiler/src/codegen/formatters/module.ts
+++ b/packages/@lwc/template-compiler/src/codegen/formatters/module.ts
@@ -37,6 +37,12 @@ function generateLwcApisImport(codeGen: CodeGen): t.ImportDeclaration {
     return t.importDeclaration(imports, t.literal(LWC_MODULE_NAME));
 }
 
+function generateHoistedNodes(codegen: CodeGen): t.VariableDeclaration[] {
+    return codegen.hoistedNodes.map(({ identifier, expr }) => {
+        return t.variableDeclaration('const', [t.variableDeclarator(identifier, expr)]);
+    });
+}
+
 /**
  * Generate an ES module AST from a template ESTree AST. The generated module imports the dependent
  * LWC components via import statements and expose the template function via a default export
@@ -60,6 +66,7 @@ export function format(templateFn: t.FunctionDeclaration, codeGen: CodeGen): t.P
     codeGen.usedLwcApis.add(SECURE_REGISTER_TEMPLATE_METHOD_NAME);
 
     const imports = [...generateComponentImports(codeGen), generateLwcApisImport(codeGen)];
+    const hoistedNodes = generateHoistedNodes(codeGen);
 
     const metadata = generateTemplateMetadata(codeGen);
 
@@ -74,5 +81,5 @@ export function format(templateFn: t.FunctionDeclaration, codeGen: CodeGen): t.P
         ),
     ];
 
-    return t.program([...imports, ...templateBody, ...metadata]);
+    return t.program([...imports, ...hoistedNodes, ...templateBody, ...metadata]);
 }
diff --git a/packages/@lwc/template-compiler/src/codegen/helpers.ts b/packages/@lwc/template-compiler/src/codegen/helpers.ts
index e179a26cb2..05215e2700 100644
--- a/packages/@lwc/template-compiler/src/codegen/helpers.ts
+++ b/packages/@lwc/template-compiler/src/codegen/helpers.ts
@@ -6,7 +6,7 @@
  */
 import * as t from '../shared/estree';
 import { toPropertyName } from '../shared/utils';
-import { BaseElement, ChildNode, LWCDirectiveRenderMode, Node } from '../shared/types';
+import { BaseElement, ChildNode, LWCDirectiveRenderMode, Node, Root } from '../shared/types';
 import {
     isParentNode,
     isSlot,
@@ -14,9 +14,19 @@ import {
     isBaseElement,
     isIf,
     isDynamicDirective,
+    isElement,
+    isText,
+    isComment,
 } from '../shared/ast';
 import { TEMPLATE_FUNCTION_NAME, TEMPLATE_PARAMS } from '../shared/constants';
 
+import { isLiteral } from '../shared/estree';
+import {
+    isAllowedFragOnlyUrlsXHTML,
+    isFragmentOnlyUrl,
+    isIdReferencingAttribute,
+    isSvgUseHref,
+} from '../parser/attribute';
 import CodeGen from './codegen';
 
 export function identifierFromComponentName(name: string): t.Identifier {
@@ -212,3 +222,68 @@ export function parseClassNames(classNames: string): string[] {
         .map((className) => className.trim())
         .filter((className) => className.length);
 }
+
+function isStaticNode(node: BaseElement): boolean {
+    let result = true;
+    const { name: nodeName, namespace = '', attributes, directives, properties, listeners } = node;
+
+    result &&= isElement(node);
+
+    // it is an element.
+    result &&= attributes.every(({ name, value }) => {
+        return (
+            isLiteral(value) &&
+            name !== 'slot' &&
+            // check for ScopedId
+            name !== 'id' &&
+            name !== 'spellcheck' && // spellcheck is specially handled by the vnodes.
+            !isIdReferencingAttribute(name) &&
+            // svg href needs sanitization.
+            !isSvgUseHref(nodeName, name, namespace) &&
+            // Check for ScopedFragId
+            !(
+                isAllowedFragOnlyUrlsXHTML(nodeName, name, namespace) &&
+                isFragmentOnlyUrl(value.value as string)
+            )
+        );
+    }); // all attrs are static
+    result &&= directives.length === 0; // do not have any directive
+    result &&= properties.every((prop) => isLiteral(prop.value)); // all properties are static
+    result &&= listeners.length === 0; // do not have any event listener
+
+    return result;
+}
+
+function collectStaticNodes(node: ChildNode, staticNodes: Set<ChildNode>) {
+    let childrenAreStatic = true;
+    let nodeIsStatic;
+
+    if (isText(node)) {
+        nodeIsStatic = isLiteral(node.value);
+    } else if (isComment(node)) {
+        nodeIsStatic = true;
+    } else {
+        // it is ForBlock | If | BaseElement
+        node.children.forEach((childNode) => {
+            collectStaticNodes(childNode, staticNodes);
+
+            childrenAreStatic = childrenAreStatic && staticNodes.has(childNode);
+        });
+
+        nodeIsStatic = isBaseElement(node) && isStaticNode(node);
+    }
+
+    if (nodeIsStatic && childrenAreStatic) {
+        staticNodes.add(node);
+    }
+}
+
+export function getStaticNodes(root: Root): Set<ChildNode> {
+    const staticNodes = new Set<ChildNode>();
+
+    root.children.forEach((childNode) => {
+        collectStaticNodes(childNode, staticNodes);
+    });
+
+    return staticNodes;
+}
diff --git a/packages/@lwc/template-compiler/src/codegen/index.ts b/packages/@lwc/template-compiler/src/codegen/index.ts
index d3c7e51e60..b3b142b0d1 100644
--- a/packages/@lwc/template-compiler/src/codegen/index.ts
+++ b/packages/@lwc/template-compiler/src/codegen/index.ts
@@ -27,6 +27,7 @@ import {
     isDynamicDirective,
     isKeyDirective,
     isDomDirective,
+    isElement,
 } from '../shared/ast';
 import { TEMPLATE_PARAMS, TEMPLATE_FUNCTION_NAME } from '../shared/constants';
 import {
@@ -72,6 +73,11 @@ function transform(codeGen: CodeGen): 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.genHoistedElement(element, slotParentName);
+        }
+
         const children = transformChildren(element);
 
         // Check wether it has the special directive lwc:dynamic
@@ -543,18 +549,22 @@ function generateTemplateFunction(codeGen: CodeGen): t.FunctionDeclaration {
         TEMPLATE_PARAMS.CONTEXT,
     ].map((id) => t.identifier(id));
 
-    const body: t.Statement[] = [
-        t.variableDeclaration('const', [
-            t.variableDeclarator(
-                t.objectPattern(
-                    Object.keys(codeGen.usedApis).map((name) =>
-                        t.assignmentProperty(t.identifier(name), codeGen.usedApis[name])
-                    )
-                ),
-                t.identifier(TEMPLATE_PARAMS.API)
-            ),
-        ]),
-    ];
+    const usedApis = Object.keys(codeGen.usedApis);
+    const body: t.Statement[] =
+        usedApis.length === 0
+            ? []
+            : [
+                  t.variableDeclaration('const', [
+                      t.variableDeclarator(
+                          t.objectPattern(
+                              usedApis.map((name) =>
+                                  t.assignmentProperty(t.identifier(name), codeGen.usedApis[name])
+                              )
+                          ),
+                          t.identifier(TEMPLATE_PARAMS.API)
+                      ),
+                  ]),
+              ];
 
     if (codeGen.memorizedIds.length) {
         body.push(
diff --git a/packages/@lwc/template-compiler/src/codegen/static-element-serializer.ts b/packages/@lwc/template-compiler/src/codegen/static-element-serializer.ts
new file mode 100644
index 0000000000..197ca5c422
--- /dev/null
+++ b/packages/@lwc/template-compiler/src/codegen/static-element-serializer.ts
@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2018, 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
+ */
+import { htmlEscape, isVoidElement } from '@lwc/shared';
+import { ChildNode, Element, Literal } from '../shared/types';
+import { isElement, isText, isComment } from '../shared/ast';
+
+// Implementation based on the parse5 serializer: https://github.com/inikulin/parse5/blob/master/packages/parse5/lib/serializer/index.ts
+
+// Text nodes child of these tags should not be escaped (https://html.spec.whatwg.org/#serialising-html-fragments).
+const rawContentElements = new Set([
+    'STYLE',
+    'SCRIPT',
+    'XMP',
+    'IFRAME',
+    'NOEMBED',
+    'NOFRAMES',
+    'PLAINTEXT',
+]);
+
+function serializeAttrs(element: Element): string {
+    /**
+     * 0: styleToken in existing class attr
+     * 1: styleToken for added class attr
+     * 2: styleToken as attr
+     */
+    const attrs: string[] = [];
+    let hasClassAttr = false;
+
+    const collector = ({ name, value }: { name: string; value: string | boolean }) => {
+        let v = value;
+
+        if (name === 'class') {
+            hasClassAttr = true;
+            v += '${0}';
+        }
+        if (typeof v === 'string') {
+            attrs.push(`${name}="${htmlEscape(v, true)}"`);
+        } else {
+            attrs.push(name);
+        }
+    };
+
+    element.attributes
+        .map((attr) => {
+            return {
+                name: attr.name,
+                value: (attr.value as Literal).value,
+            };
+        })
+        .forEach(collector);
+    // This is tightly coupled with the logic in the parser that decides when an attribute should be
+    // a property: https://github.com/salesforce/lwc/blob/master/packages/%40lwc/template-compiler/src/parser/attribute.ts#L198-L218
+    // Because a component can't be a static element, we only look in the property bag on value and checked attribute
+    // from the input.
+    element.properties
+        .map((prop) => {
+            return {
+                name: prop.attributeName,
+                value: (prop.value as Literal).value,
+            };
+        })
+        .forEach(collector);
+
+    return (attrs.length > 0 ? ' ' : '') + attrs.join(' ') + (hasClassAttr ? '${2}' : '${3}');
+}
+
+function serializeChildren(
+    children: ChildNode[],
+    parentTagName: string,
+    preserveComments: boolean
+): string {
+    let html = '';
+
+    children.forEach((child) => {
+        if (isElement(child)) {
+            html += serializeStaticElement(child, preserveComments);
+        } else if (isText(child)) {
+            if (rawContentElements.has(parentTagName.toUpperCase())) {
+                html += child.raw;
+            } else {
+                html += htmlEscape((child.value as Literal<string>).value);
+            }
+        } else if (isComment(child)) {
+            html += preserveComments ? `<!--${htmlEscape(child.value)}-->` : '';
+        } else {
+            throw new TypeError(
+                'Unknown node found while serializing static content. Allowed nodes types are: Element, Text and Comment.'
+            );
+        }
+    });
+
+    return html;
+}
+
+export function serializeStaticElement(element: Element, preserveComments: boolean): string {
+    const tagName = element.name;
+
+    let html = '<' + tagName + serializeAttrs(element) + '>';
+
+    html += serializeChildren(element.children, tagName, preserveComments);
+
+    // element.children.length > 0 can happen in the SVG namespace.
+    if (!isVoidElement(tagName) || element.children.length > 0) {
+        html += `</${tagName}>`;
+    }
+
+    return html;
+}
diff --git a/packages/@lwc/template-compiler/src/config.ts b/packages/@lwc/template-compiler/src/config.ts
index ffdaf26b15..c39abe59d4 100644
--- a/packages/@lwc/template-compiler/src/config.ts
+++ b/packages/@lwc/template-compiler/src/config.ts
@@ -24,6 +24,11 @@ export interface Config {
      * When true, HTML comments in the template will be preserved.
      */
     preserveHtmlComments?: boolean;
+
+    /**
+     * When true, the template compiler will not generate optimized code for static content.
+     */
+    disableStaticContentOptimization?: boolean;
 }
 
 export type NormalizedConfig = Required<Config>;
@@ -32,6 +37,7 @@ const AVAILABLE_OPTION_NAMES = new Set([
     'experimentalComputedMemberExpression',
     'experimentalDynamicDirective',
     'preserveHtmlComments',
+    'disableStaticContentOptimization',
 ]);
 
 export function normalizeConfig(config: Config): NormalizedConfig {
@@ -52,6 +58,7 @@ export function normalizeConfig(config: Config): NormalizedConfig {
         preserveHtmlComments: false,
         experimentalComputedMemberExpression: false,
         experimentalDynamicDirective: false,
+        disableStaticContentOptimization: false,
         ...config,
     };
 }
diff --git a/packages/@lwc/template-compiler/src/parser/index.ts b/packages/@lwc/template-compiler/src/parser/index.ts
index e311810371..53e055fa05 100644
--- a/packages/@lwc/template-compiler/src/parser/index.ts
+++ b/packages/@lwc/template-compiler/src/parser/index.ts
@@ -332,7 +332,7 @@ function parseText(ctx: ParserCtx, parse5Text: parse5.TextNode): Text[] {
             value = ast.literal(decodeTextContent(token));
         }
 
-        parsedTextNodes.push(ast.text(value, location));
+        parsedTextNodes.push(ast.text(token, value, location));
     }
 
     return parsedTextNodes;
@@ -350,7 +350,7 @@ function parseComment(parse5Comment: parse5.CommentNode): Comment {
         );
     }
 
-    return ast.comment(decodeTextContent(parse5Comment.data), location);
+    return ast.comment(parse5Comment.data, decodeTextContent(parse5Comment.data), location);
 }
 
 function getTemplateRoot(
diff --git a/packages/@lwc/template-compiler/src/shared/ast.ts b/packages/@lwc/template-compiler/src/shared/ast.ts
index a6ee47d8ce..b8799c9738 100644
--- a/packages/@lwc/template-compiler/src/shared/ast.ts
+++ b/packages/@lwc/template-compiler/src/shared/ast.ts
@@ -95,17 +95,23 @@ export function slot(slotName: string, parse5ElmLocation: parse5.ElementLocation
     };
 }
 
-export function text(value: Literal | Expression, parse5Location: parse5.Location): Text {
+export function text(
+    raw: string,
+    value: Literal | Expression,
+    parse5Location: parse5.Location
+): Text {
     return {
         type: 'Text',
+        raw,
         value,
         location: sourceLocation(parse5Location),
     };
 }
 
-export function comment(value: string, parse5Location: parse5.Location): Comment {
+export function comment(raw: string, value: string, parse5Location: parse5.Location): Comment {
     return {
         type: 'Comment',
+        raw,
         value,
         location: sourceLocation(parse5Location),
     };
diff --git a/packages/@lwc/template-compiler/src/shared/constants.ts b/packages/@lwc/template-compiler/src/shared/constants.ts
index 7453df5ed5..23b72b9bc2 100644
--- a/packages/@lwc/template-compiler/src/shared/constants.ts
+++ b/packages/@lwc/template-compiler/src/shared/constants.ts
@@ -5,6 +5,8 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 export const SECURE_REGISTER_TEMPLATE_METHOD_NAME = 'registerTemplate';
+export const PARSE_FRAGMENT_METHOD_NAME = 'parseFragment';
+export const PARSE_SVG_FRAGMENT_METHOD_NAME = 'parseSVGFragment';
 export const LWC_MODULE_NAME = 'lwc';
 export const TEMPLATE_MODULES_PARAMETER: string = 'modules';
 
diff --git a/packages/@lwc/template-compiler/src/shared/estree.ts b/packages/@lwc/template-compiler/src/shared/estree.ts
index 264b480183..29186f6b8f 100644
--- a/packages/@lwc/template-compiler/src/shared/estree.ts
+++ b/packages/@lwc/template-compiler/src/shared/estree.ts
@@ -230,6 +230,28 @@ export function expressionStatement(
     };
 }
 
+export function taggedTemplateExpression(
+    tag: Expression,
+    quasi: t.TemplateLiteral
+): t.TaggedTemplateExpression {
+    return {
+        type: 'TaggedTemplateExpression',
+        tag,
+        quasi,
+    };
+}
+
+export function templateLiteral(
+    quasis: t.TemplateElement[],
+    expressions: t.Expression[]
+): t.TemplateLiteral {
+    return {
+        type: 'TemplateLiteral',
+        quasis,
+        expressions,
+    };
+}
+
 export function functionExpression(
     id: null | t.Identifier,
     params: t.FunctionExpression['params'],
diff --git a/packages/@lwc/template-compiler/src/shared/types.ts b/packages/@lwc/template-compiler/src/shared/types.ts
index a33777730a..54de3b2267 100644
--- a/packages/@lwc/template-compiler/src/shared/types.ts
+++ b/packages/@lwc/template-compiler/src/shared/types.ts
@@ -123,11 +123,13 @@ export type RootDirective = RenderModeDirective | PreserveCommentsDirective;
 export interface Text extends BaseNode {
     type: 'Text';
     value: Literal | Expression;
+    raw: string;
 }
 
 export interface Comment extends BaseNode {
     type: 'Comment';
     value: string;
+    raw: string;
 }
 
 export interface BaseParentNode extends BaseNode {
diff --git a/packages/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js b/packages/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js
index bd0771c845..2012217d9a 100644
--- a/packages/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js
+++ b/packages/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js
@@ -12,10 +12,16 @@ export default {
             classes: p.className,
         };
     },
-    test(target, snapshots) {
+    test(target, snapshots, consoleCalls) {
         const p = target.shadowRoot.querySelector('p');
 
-        expect(p).toBe(snapshots.p);
-        expect(p.className).toBe(snapshots.classes);
+        expect(p).not.toBe(snapshots.p);
+        expect(p.className).toBe('c1 c2 c3');
+
+        expect(consoleCalls.error).toHaveSize(2);
+        expect(consoleCalls.error[0][0].message).toContain(
+            'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c2 c3" but found "c3 c2 c1"'
+        );
+        expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
     },
 };
diff --git a/packages/integration-karma/test-hydration/mismatches/style-attr/static-different-priority/index.spec.js b/packages/integration-karma/test-hydration/mismatches/style-attr/static-different-priority/index.spec.js
index 2fc4dc2535..52ff741e80 100644
--- a/packages/integration-karma/test-hydration/mismatches/style-attr/static-different-priority/index.spec.js
+++ b/packages/integration-karma/test-hydration/mismatches/style-attr/static-different-priority/index.spec.js
@@ -23,7 +23,7 @@ export default {
 
         expect(consoleCalls.error).toHaveSize(2);
         expect(consoleCalls.error[0][0].message).toContain(
-            'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red;border-color: red important!" but found "background-color: red; border-color: red"'
+            'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;"'
         );
         expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
     },
diff --git a/packages/integration-karma/test-hydration/mismatches/style-attr/static-extra-from-client/index.spec.js b/packages/integration-karma/test-hydration/mismatches/style-attr/static-extra-from-client/index.spec.js
index 76de38aa18..a84a8f3ca7 100644
--- a/packages/integration-karma/test-hydration/mismatches/style-attr/static-extra-from-client/index.spec.js
+++ b/packages/integration-karma/test-hydration/mismatches/style-attr/static-extra-from-client/index.spec.js
@@ -23,7 +23,7 @@ export default {
 
         expect(consoleCalls.error).toHaveSize(2);
         expect(consoleCalls.error[0][0].message).toContain(
-            'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red;border-color: red;margin: 1px" but found "background-color: red; border-color: red"'
+            'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red; margin: 1px;" but found "background-color: red; border-color: red;"'
         );
         expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
     },
diff --git a/packages/integration-karma/test-hydration/mismatches/style-attr/static-extra-from-server/index.spec.js b/packages/integration-karma/test-hydration/mismatches/style-attr/static-extra-from-server/index.spec.js
index 84cc0f0f16..5a2535eb47 100644
--- a/packages/integration-karma/test-hydration/mismatches/style-attr/static-extra-from-server/index.spec.js
+++ b/packages/integration-karma/test-hydration/mismatches/style-attr/static-extra-from-server/index.spec.js
@@ -21,7 +21,7 @@ export default {
 
         expect(consoleCalls.error).toHaveSize(2);
         expect(consoleCalls.error[0][0].message).toContain(
-            'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red;border-color: red" but found "background-color: red; border-color: red; margin: 1px"'
+            'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red;" but found "background-color: red; border-color: red; margin: 1px;"'
         );
         expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
     },
diff --git a/packages/integration-karma/test-hydration/mismatches/style-attr/static-same-different-order/index.spec.js b/packages/integration-karma/test-hydration/mismatches/style-attr/static-same-different-order/index.spec.js
index b6d762a4e2..679a0a7468 100644
--- a/packages/integration-karma/test-hydration/mismatches/style-attr/static-same-different-order/index.spec.js
+++ b/packages/integration-karma/test-hydration/mismatches/style-attr/static-same-different-order/index.spec.js
@@ -15,9 +15,15 @@ export default {
     test(target, snapshots, consoleCalls) {
         const p = target.shadowRoot.querySelector('p');
 
-        expect(p).toBe(snapshots.p);
-        expect(p.getAttribute('style')).toBe(snapshots.style);
+        expect(p).not.toBe(snapshots.p);
+        expect(p.getAttribute('style')).toBe(
+            'margin: 1px; border-color: red; background-color: red;'
+        );
 
-        expect(consoleCalls.error).toHaveSize(0);
+        expect(consoleCalls.error).toHaveSize(2);
+        expect(consoleCalls.error[0][0].message).toContain(
+            'Mismatch hydrating element <p>: attribute "style" has different values, expected "margin: 1px; border-color: red; background-color: red;" but found "background-color: red; border-color: red; margin: 1px;"'
+        );
+        expect(consoleCalls.error[1][0].message).toContain('Hydration completed with errors.');
     },
 };
diff --git a/packages/integration-karma/test/light-dom/synthetic-shadow/index.spec.js b/packages/integration-karma/test/light-dom/synthetic-shadow/index.spec.js
index b4cb345abd..249fb46b2f 100644
--- a/packages/integration-karma/test/light-dom/synthetic-shadow/index.spec.js
+++ b/packages/integration-karma/test/light-dom/synthetic-shadow/index.spec.js
@@ -140,5 +140,10 @@ describe('Light DOM + Synthetic Shadow DOM', () => {
                 '<x-light-container data-id="light-container"><x-consumer data-id="consumer"><p data-id="p">I am an assigned element.</p>I am an assigned text.</x-consumer></x-light-container>'
             );
         });
+
+        it('static content is with correct shadow', () => {
+            const p = elm.shadowRoot.querySelector('p');
+            expect(p.contains(p.firstChild)).toBe(true);
+        });
     });
 });
diff --git a/packages/integration-karma/test/static-content/index.spec.js b/packages/integration-karma/test/static-content/index.spec.js
new file mode 100644
index 0000000000..25a2793624
--- /dev/null
+++ b/packages/integration-karma/test/static-content/index.spec.js
@@ -0,0 +1,93 @@
+import { createElement, setFeatureFlagForTest } from 'lwc';
+import Container from './x/container/container';
+import MultipleStyles from './x/multipleStyles/multipleStyles';
+import SvgNs from './x/svgNs/svgNs';
+
+// In compat mode, the component will always render in synthetic mode with the scope attribute
+if (!process.env.NATIVE_SHADOW && !process.env.COMPAT) {
+    describe('Mixed mode for static content', () => {
+        beforeEach(() => {
+            setFeatureFlagForTest('ENABLE_MIXED_SHADOW_MODE', true);
+        });
+        afterEach(() => {
+            setFeatureFlagForTest('ENABLE_MIXED_SHADOW_MODE', false);
+        });
+
+        ['native', 'synthetic'].forEach((firstRenderMode) => {
+            it(`should set the tokens for synthetic shadow when it renders first in ${firstRenderMode}`, () => {
+                const elm = createElement('x-container', { is: Container });
+                elm.syntheticFirst = firstRenderMode === 'synthetic';
+                document.body.appendChild(elm);
+
+                const syntheticMode = elm.shadowRoot
+                    .querySelector('x-component')
+                    .shadowRoot.querySelector('div');
+                const nativeMode = elm.shadowRoot
+                    .querySelector('x-native')
+                    .shadowRoot.querySelector('x-component')
+                    .shadowRoot.querySelector('div');
+
+                expect(syntheticMode.hasAttribute('x-component_component')).toBe(true);
+                expect(nativeMode.hasAttribute('x-component_component')).toBe(false);
+            });
+        });
+    });
+}
+
+describe('static content when stylesheets change', () => {
+    it('should reflect correct token for scoped styles', () => {
+        const elm = createElement('x-container', { is: MultipleStyles });
+
+        const stylesheetsWarning =
+            /Dynamically setting the "stylesheets" property on a template function is deprecated and may be removed in a future version of LWC./;
+
+        expect(() => {
+            elm.updateTemplate({
+                name: 'a',
+                useScopedCss: false,
+            });
+        }).toLogErrorDev(stylesheetsWarning);
+
+        document.body.appendChild(elm);
+
+        expect(elm.shadowRoot.querySelector('div').getAttribute('class')).toBe('foo');
+
+        // atm, we need to switch templates.
+        expect(() => {
+            elm.updateTemplate({
+                name: 'b',
+                useScopedCss: true,
+            });
+        }).toLogErrorDev(stylesheetsWarning);
+
+        return Promise.resolve()
+            .then(() => {
+                const classList = Array.from(elm.shadowRoot.querySelector('div').classList).sort();
+                expect(classList).toEqual(['foo', 'x-multipleStyles_b']);
+
+                expect(() => {
+                    elm.updateTemplate({
+                        name: 'a',
+                        useScopedCss: false,
+                    });
+                }).toLogErrorDev(stylesheetsWarning);
+            })
+            .then(() => {
+                const classList = Array.from(elm.shadowRoot.querySelector('div').classList).sort();
+                expect(classList).toEqual(['foo']);
+            });
+    });
+});
+
+describe('svg and static content', () => {
+    it('should use correct namespace', () => {
+        const elm = createElement('x-svg-ns', { is: SvgNs });
+        document.body.appendChild(elm);
+
+        const allStaticNodes = elm.querySelectorAll('.static');
+
+        allStaticNodes.forEach((node) => {
+            expect(node.namespaceURI).toBe('http://www.w3.org/2000/svg');
+        });
+    });
+});
diff --git a/packages/integration-karma/test/static-content/x/component/component.css b/packages/integration-karma/test/static-content/x/component/component.css
new file mode 100644
index 0000000000..55d673dafe
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/component/component.css
@@ -0,0 +1,3 @@
+div {
+    color: blue;
+}
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/component/component.html b/packages/integration-karma/test/static-content/x/component/component.html
new file mode 100644
index 0000000000..e50da2b875
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/component/component.html
@@ -0,0 +1,3 @@
+<template>
+    <div>Component</div>
+</template>
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/component/component.js b/packages/integration-karma/test/static-content/x/component/component.js
new file mode 100644
index 0000000000..6d3542bb2f
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/component/component.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class Component extends LightningElement {}
diff --git a/packages/integration-karma/test/static-content/x/container/container.html b/packages/integration-karma/test/static-content/x/container/container.html
new file mode 100644
index 0000000000..4e179eb39d
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/container/container.html
@@ -0,0 +1,22 @@
+<template>
+  <template if:true={syntheticFirst}>
+    <h1>
+      Synthetic:
+    </h1>
+    <x-component></x-component>
+    <h1>
+      Native:
+    </h1>
+    <x-native></x-native>
+  </template>
+  <template if:false={syntheticFirst}>
+    <h1>
+      Native:
+    </h1>
+    <x-native></x-native>
+    <h1>
+      Synthetic:
+    </h1>
+    <x-component></x-component>
+  </template>
+</template>
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/container/container.js b/packages/integration-karma/test/static-content/x/container/container.js
new file mode 100644
index 0000000000..5da038afe9
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/container/container.js
@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Container extends LightningElement {
+    @api syntheticFirst = false;
+}
diff --git a/packages/integration-karma/test/static-content/x/multipleStyles/a.css b/packages/integration-karma/test/static-content/x/multipleStyles/a.css
new file mode 100644
index 0000000000..55d673dafe
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/multipleStyles/a.css
@@ -0,0 +1,3 @@
+div {
+    color: blue;
+}
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/multipleStyles/a.html b/packages/integration-karma/test/static-content/x/multipleStyles/a.html
new file mode 100644
index 0000000000..37e4160cf8
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/multipleStyles/a.html
@@ -0,0 +1,3 @@
+<template>
+    <div class="foo">a</div>
+</template>
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/multipleStyles/b.html b/packages/integration-karma/test/static-content/x/multipleStyles/b.html
new file mode 100644
index 0000000000..1c210f7bc7
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/multipleStyles/b.html
@@ -0,0 +1,3 @@
+<template>
+    <div class="foo">b</div>
+</template>
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/multipleStyles/b.scoped.css b/packages/integration-karma/test/static-content/x/multipleStyles/b.scoped.css
new file mode 100644
index 0000000000..59516c9755
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/multipleStyles/b.scoped.css
@@ -0,0 +1,3 @@
+div {
+    color: red;
+}
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/multipleStyles/multipleStyles.js b/packages/integration-karma/test/static-content/x/multipleStyles/multipleStyles.js
new file mode 100644
index 0000000000..3e1672fbe8
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/multipleStyles/multipleStyles.js
@@ -0,0 +1,27 @@
+import { LightningElement, api } from 'lwc';
+import aTemplate from './a.html';
+import bTemplate from './b.html';
+import aCss from './a.css';
+import bCss from './b.scoped.css?scoped=true';
+
+const templateMap = {
+    a: aTemplate,
+    b: bTemplate,
+};
+export default class Container extends LightningElement {
+    _template = aTemplate;
+
+    @api
+    updateTemplate({ name, useScopedCss }) {
+        const template = templateMap[name];
+
+        // TODO [#2826]: freeze the template object and stop supporting setting the stylesheets
+        template.stylesheets = useScopedCss ? [...aCss, ...bCss] : [...aCss];
+
+        this._template = template;
+    }
+
+    render() {
+        return this._template;
+    }
+}
diff --git a/packages/integration-karma/test/static-content/x/native/native.html b/packages/integration-karma/test/static-content/x/native/native.html
new file mode 100644
index 0000000000..3db48ef294
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/native/native.html
@@ -0,0 +1,3 @@
+<template>
+    <x-component></x-component>
+</template>
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/native/native.js b/packages/integration-karma/test/static-content/x/native/native.js
new file mode 100644
index 0000000000..adc0897427
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/native/native.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Native extends LightningElement {
+    static shadowSupportMode = 'any';
+}
diff --git a/packages/integration-karma/test/static-content/x/svgNs/svgNs.html b/packages/integration-karma/test/static-content/x/svgNs/svgNs.html
new file mode 100644
index 0000000000..381aaaf39b
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/svgNs/svgNs.html
@@ -0,0 +1,15 @@
+<template>
+  <svg height="150" width="400">
+    <defs>
+      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop class="static" offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" ></stop>
+        <stop class="static" offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" ></stop>
+      </linearGradient>
+    </defs>
+    <ellipse class="static" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
+  </svg>
+
+  <svg class="static" height="150" width="400">
+    <ellipse class="static" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
+  </svg>
+</template>
\ No newline at end of file
diff --git a/packages/integration-karma/test/static-content/x/svgNs/svgNs.js b/packages/integration-karma/test/static-content/x/svgNs/svgNs.js
new file mode 100644
index 0000000000..f426960211
--- /dev/null
+++ b/packages/integration-karma/test/static-content/x/svgNs/svgNs.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class SvgNs extends LightningElement {}
diff --git a/packages/integration-karma/test/template/attribute-style/index.spec.js b/packages/integration-karma/test/template/attribute-style/index.spec.js
index b74ba65cdb..8bcf9a9f40 100644
--- a/packages/integration-karma/test/template/attribute-style/index.spec.js
+++ b/packages/integration-karma/test/template/attribute-style/index.spec.js
@@ -13,7 +13,7 @@ describe('static style attribute', () => {
         expect(target.style.position).toBe('absolute');
         expect(target.style.top).toBe('10px');
         if (!process.env.COMPAT) {
-            expect(target.style.getPropertyValue('--custom-property')).toBe('blue');
+            expect(target.style.getPropertyValue('--custom-property').trim()).toBe('blue');
         }
     });
 });
diff --git a/scripts/bundlesize/bundlesize.config.json b/scripts/bundlesize/bundlesize.config.json
index b4d14a37af..fa57042ade 100644
--- a/scripts/bundlesize/bundlesize.config.json
+++ b/scripts/bundlesize/bundlesize.config.json
@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "packages/lwc/dist/engine-dom/umd/es2017/engine-dom.min.js",
-            "maxSize": "17.5KB",
+            "maxSize": "18.0KB",
             "compression": "gzip"
         },
         {