@lwc/engine-core 2.14.1 → 2.16.0

package/dist/engine-core.cjs.js

@@ -112,164 +112,6 @@ function flattenStylesheets(stylesheets) {
     return list;
 }
 
-//
-// Primitives
-//
-let ssr;
-function setSsr(ssrImpl) {
-    ssr = ssrImpl;
-}
-let isNativeShadowDefined;
-function setIsNativeShadowDefined(isNativeShadowDefinedImpl) {
-    isNativeShadowDefined = isNativeShadowDefinedImpl;
-}
-let isSyntheticShadowDefined;
-function setIsSyntheticShadowDefined(isSyntheticShadowDefinedImpl) {
-    isSyntheticShadowDefined = isSyntheticShadowDefinedImpl;
-}
-let HTMLElementExported;
-function setHTMLElement(HTMLElementImpl) {
-    HTMLElementExported = HTMLElementImpl;
-}
-function setIsHydrating(isHydratingImpl) {
-}
-let insert;
-function setInsert(insertImpl) {
-    insert = insertImpl;
-}
-let remove;
-function setRemove(removeImpl) {
-    remove = removeImpl;
-}
-let createElement;
-function setCreateElement(createElementImpl) {
-    createElement = createElementImpl;
-}
-let createText;
-function setCreateText(createTextImpl) {
-    createText = createTextImpl;
-}
-let createComment;
-function setCreateComment(createCommentImpl) {
-    createComment = createCommentImpl;
-}
-let nextSibling;
-function setNextSibling(nextSiblingImpl) {
-    nextSibling = nextSiblingImpl;
-}
-let attachShadow;
-function setAttachShadow(attachShadowImpl) {
-    attachShadow = attachShadowImpl;
-}
-let getProperty;
-function setGetProperty(getPropertyImpl) {
-    getProperty = getPropertyImpl;
-}
-let setProperty;
-function setSetProperty(setPropertyImpl) {
-    setProperty = setPropertyImpl;
-}
-let setText;
-function setSetText(setTextImpl) {
-    setText = setTextImpl;
-}
-let getAttribute;
-function setGetAttribute(getAttributeImpl) {
-    getAttribute = getAttributeImpl;
-}
-let setAttribute;
-function setSetAttribute(setAttributeImpl) {
-    setAttribute = setAttributeImpl;
-}
-let removeAttribute;
-function setRemoveAttribute(removeAttributeImpl) {
-    removeAttribute = removeAttributeImpl;
-}
-let addEventListener;
-function setAddEventListener(addEventListenerImpl) {
-    addEventListener = addEventListenerImpl;
-}
-let removeEventListener;
-function setRemoveEventListener(removeEventListenerImpl) {
-    removeEventListener = removeEventListenerImpl;
-}
-let dispatchEvent;
-function setDispatchEvent(dispatchEventImpl) {
-    dispatchEvent = dispatchEventImpl;
-}
-let getClassList;
-function setGetClassList(getClassListImpl) {
-    getClassList = getClassListImpl;
-}
-let setCSSStyleProperty;
-function setSetCSSStyleProperty(setCSSStylePropertyImpl) {
-    setCSSStyleProperty = setCSSStylePropertyImpl;
-}
-let getBoundingClientRect;
-function setGetBoundingClientRect(getBoundingClientRectImpl) {
-    getBoundingClientRect = getBoundingClientRectImpl;
-}
-let querySelector;
-function setQuerySelector(querySelectorImpl) {
-    querySelector = querySelectorImpl;
-}
-let querySelectorAll;
-function setQuerySelectorAll(querySelectorAllImpl) {
-    querySelectorAll = querySelectorAllImpl;
-}
-let getElementsByTagName;
-function setGetElementsByTagName(getElementsByTagNameImpl) {
-    getElementsByTagName = getElementsByTagNameImpl;
-}
-let getElementsByClassName;
-function setGetElementsByClassName(getElementsByClassNameImpl) {
-    getElementsByClassName = getElementsByClassNameImpl;
-}
-let getChildren;
-function setGetChildren(getChildrenImpl) {
-    getChildren = getChildrenImpl;
-}
-let getChildNodes;
-function setGetChildNodes(getChildNodesImpl) {
-    getChildNodes = getChildNodesImpl;
-}
-let getFirstChild;
-function setGetFirstChild(getFirstChildImpl) {
-    getFirstChild = getFirstChildImpl;
-}
-let getFirstElementChild;
-function setGetFirstElementChild(getFirstElementChildImpl) {
-    getFirstElementChild = getFirstElementChildImpl;
-}
-let getLastChild;
-function setGetLastChild(getLastChildImpl) {
-    getLastChild = getLastChildImpl;
-}
-let getLastElementChild;
-function setGetLastElementChild(getLastElementChildImpl) {
-    getLastElementChild = getLastElementChildImpl;
-}
-let isConnected;
-function setIsConnected(isConnectedImpl) {
-    isConnected = isConnectedImpl;
-}
-let insertStylesheet;
-function setInsertStylesheet(insertStylesheetImpl) {
-    insertStylesheet = insertStylesheetImpl;
-}
-let assertInstanceOfHTMLElement;
-function setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElementImpl) {
-    assertInstanceOfHTMLElement = assertInstanceOfHTMLElementImpl;
-}
-let defineCustomElement;
-function setDefineCustomElement(defineCustomElementImpl) {
-    defineCustomElement = defineCustomElementImpl;
-}
-let getCustomElement;
-function setGetCustomElement(getCustomElementImpl) {
-    getCustomElement = getCustomElementImpl;
-}
-
 /*
  * Copyright (c) 2019, salesforce.com, inc.
  * All rights reserved.
@@ -1574,6 +1416,7 @@ const LightningElement = function () {
     const { def, elm } = vm;
     const { bridge } = def;
     if (process.env.NODE_ENV !== 'production') {
+        const { assertInstanceOfHTMLElement } = vm.renderer;
         assertInstanceOfHTMLElement(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
     }
     const component = this;
@@ -1608,7 +1451,7 @@ const LightningElement = function () {
     return this;
 };
 function doAttachShadow(vm) {
-    const { elm, mode, shadowMode, def: { ctor }, } = vm;
+    const { elm, mode, shadowMode, def: { ctor }, renderer: { attachShadow }, } = vm;
     const shadowRoot = attachShadow(elm, {
         [shared.KEY__SYNTHETIC_MODE]: shadowMode === 1 /* Synthetic */,
         delegatesFocus: Boolean(ctor.delegatesFocus),
@@ -1630,12 +1473,13 @@ function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
 LightningElement.prototype = {
     constructor: LightningElement,
     dispatchEvent(event) {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { dispatchEvent }, } = vm;
         return dispatchEvent(elm, event);
     },
     addEventListener(type, listener, options) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { addEventListener }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             const vmBeingRendered = getVMBeingRendered();
             shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
@@ -1647,41 +1491,48 @@ LightningElement.prototype = {
     },
     removeEventListener(type, listener, options) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { removeEventListener }, } = vm;
         const wrappedListener = getWrappedComponentsListener(vm, listener);
         removeEventListener(elm, type, wrappedListener, options);
     },
     hasAttribute(name) {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getAttribute }, } = vm;
         return !shared.isNull(getAttribute(elm, name));
     },
     hasAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getAttribute }, } = vm;
         return !shared.isNull(getAttribute(elm, name, namespace));
     },
     removeAttribute(name) {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { removeAttribute }, } = vm;
         unlockAttribute(elm, name);
         removeAttribute(elm, name);
         lockAttribute();
     },
     removeAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
+        const { elm, renderer: { removeAttribute }, } = getAssociatedVM(this);
         unlockAttribute(elm, name);
         removeAttribute(elm, name, namespace);
         lockAttribute();
     },
     getAttribute(name) {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
         return getAttribute(elm, name);
     },
     getAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
         return getAttribute(elm, name, namespace);
     },
     setAttribute(name, value) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { setAttribute }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
         }
@@ -1691,7 +1542,7 @@ LightningElement.prototype = {
     },
     setAttributeNS(namespace, name, value) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { setAttribute }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
         }
@@ -1701,19 +1552,20 @@ LightningElement.prototype = {
     },
     getBoundingClientRect() {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { getBoundingClientRect }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect()');
         }
         return getBoundingClientRect(elm);
     },
     get isConnected() {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { isConnected }, } = vm;
         return isConnected(elm);
     },
     get classList() {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { getClassList }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             // TODO [#1290]: this still fails in dev but works in production, eventually, we should
             // just throw in all modes
@@ -1735,6 +1587,54 @@ LightningElement.prototype = {
         // Authors should rely on this.template instead.
         return null;
     },
+    get children() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'children');
+        }
+        return renderer.getChildren(vm.elm);
+    },
+    get childNodes() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'childNodes');
+        }
+        return renderer.getChildNodes(vm.elm);
+    },
+    get firstChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'firstChild');
+        }
+        return renderer.getFirstChild(vm.elm);
+    },
+    get firstElementChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'firstElementChild');
+        }
+        return renderer.getFirstElementChild(vm.elm);
+    },
+    get lastChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'lastChild');
+        }
+        return renderer.getLastChild(vm.elm);
+    },
+    get lastElementChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'lastElementChild');
+        }
+        return renderer.getLastElementChild(vm.elm);
+    },
     render() {
         const vm = getAssociatedVM(this);
         return vm.def.template;
@@ -1745,76 +1645,22 @@ LightningElement.prototype = {
     },
 };
 const queryAndChildGetterDescriptors = shared.create(null);
-// The reason we don't just call `import * as renderer from '../renderer'` here is that the bundle size
-// is smaller if we reference each function individually. Otherwise Rollup will create one big frozen
-// object representing the renderer, with a lot of methods we don't actually need.
-const childGetters = [
-    'children',
-    'childNodes',
-    'firstChild',
-    'firstElementChild',
-    'lastChild',
-    'lastElementChild',
-];
-function getChildGetter(methodName) {
-    switch (methodName) {
-        case 'children':
-            return getChildren;
-        case 'childNodes':
-            return getChildNodes;
-        case 'firstChild':
-            return getFirstChild;
-        case 'firstElementChild':
-            return getFirstElementChild;
-        case 'lastChild':
-            return getLastChild;
-        case 'lastElementChild':
-            return getLastElementChild;
-    }
-}
-// Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
-for (const childGetter of childGetters) {
-    queryAndChildGetterDescriptors[childGetter] = {
-        get() {
-            const vm = getAssociatedVM(this);
-            const { elm } = vm;
-            if (process.env.NODE_ENV !== 'production') {
-                warnIfInvokedDuringConstruction(vm, childGetter);
-            }
-            return getChildGetter(childGetter)(elm);
-        },
-        configurable: true,
-        enumerable: true,
-    };
-}
 const queryMethods = [
     'getElementsByClassName',
     'getElementsByTagName',
     'querySelector',
     'querySelectorAll',
 ];
-function getQueryMethod(methodName) {
-    switch (methodName) {
-        case 'getElementsByClassName':
-            return getElementsByClassName;
-        case 'getElementsByTagName':
-            return getElementsByTagName;
-        case 'querySelector':
-            return querySelector;
-        case 'querySelectorAll':
-            return querySelectorAll;
-    }
-}
 // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
 for (const queryMethod of queryMethods) {
     queryAndChildGetterDescriptors[queryMethod] = {
         value(arg) {
             const vm = getAssociatedVM(this);
-            const { elm } = vm;
+            const { elm, renderer } = vm;
             if (process.env.NODE_ENV !== 'production') {
                 warnIfInvokedDuringConstruction(vm, `${queryMethod}()`);
             }
-            return getQueryMethod(queryMethod)(elm, arg);
+            return renderer[queryMethod](elm, arg);
         },
         configurable: true,
         enumerable: true,
@@ -3038,7 +2884,8 @@ function getComponentDef(Ctor) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function getUpgradableConstructor(tagName) {
+function getUpgradableConstructor(tagName, renderer) {
+    const { getCustomElement, HTMLElementExported: RendererHTMLElement, defineCustomElement, } = renderer;
     // Should never get a tag with upper case letter at this point, the compiler should
     // produce only tags with lowercase letters
     // But, for backwards compatibility, we will lower case the tagName
@@ -3051,7 +2898,7 @@ function getUpgradableConstructor(tagName) {
      * LWC Upgradable Element reference to an element that was created
      * via the scoped registry mechanism, and that is ready to be upgraded.
      */
-    CE = class LWCUpgradableElement extends HTMLElementExported {
+    CE = class LWCUpgradableElement extends RendererHTMLElement {
         constructor(upgradeCallback) {
             super();
             if (shared.isFunction(upgradeCallback)) {
@@ -3084,7 +2931,7 @@ function isSameVnode(vnode1, vnode2) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const ColonCharCode = 58;
-function patchAttributes(oldVnode, vnode) {
+function patchAttributes(oldVnode, vnode, renderer) {
     const { attrs } = vnode.data;
     if (shared.isUndefined(attrs)) {
         return;
@@ -3094,6 +2941,7 @@ function patchAttributes(oldVnode, vnode) {
         return;
     }
     const { elm } = vnode;
+    const { setAttribute, removeAttribute } = renderer;
     for (const key in attrs) {
         const cur = attrs[key];
         const old = oldAttrs[key];
@@ -3129,7 +2977,7 @@ function isLiveBindingProp(sel, key) {
     // instead of relying on internally tracked values.
     return sel === 'input' && (key === 'value' || key === 'checked');
 }
-function patchProps(oldVnode, vnode) {
+function patchProps(oldVnode, vnode, renderer) {
     const { props } = vnode.data;
     if (shared.isUndefined(props)) {
         return;
@@ -3140,6 +2988,7 @@ function patchProps(oldVnode, vnode) {
     }
     const isFirstPatch = shared.isNull(oldVnode);
     const { elm, sel } = vnode;
+    const { getProperty, setProperty } = renderer;
     for (const key in props) {
         const cur = props[key];
         // Set the property if it's the first time is is patched or if the previous property is
@@ -3191,12 +3040,13 @@ function getMapFromClassName(className) {
     }
     return map;
 }
-function patchClassAttribute(oldVnode, vnode) {
+function patchClassAttribute(oldVnode, vnode, renderer) {
     const { elm, data: { className: newClass }, } = vnode;
     const oldClass = shared.isNull(oldVnode) ? undefined : oldVnode.data.className;
     if (oldClass === newClass) {
         return;
     }
+    const { getClassList } = renderer;
     const classList = getClassList(elm);
     const newClassMap = getMapFromClassName(newClass);
     const oldClassMap = getMapFromClassName(oldClass);
@@ -3221,12 +3071,13 @@ function patchClassAttribute(oldVnode, vnode) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // The style property is a string when defined via an expression in the template.
-function patchStyleAttribute(oldVnode, vnode) {
+function patchStyleAttribute(oldVnode, vnode, renderer) {
     const { elm, data: { style: newStyle }, } = vnode;
     const oldStyle = shared.isNull(oldVnode) ? undefined : oldVnode.data.style;
     if (oldStyle === newStyle) {
         return;
     }
+    const { setAttribute, removeAttribute } = renderer;
     if (!shared.isString(newStyle) || newStyle === '') {
         removeAttribute(elm, 'style');
     }
@@ -3241,11 +3092,12 @@ function patchStyleAttribute(oldVnode, vnode) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function applyEventListeners(vnode) {
+function applyEventListeners(vnode, renderer) {
     const { elm, data: { on }, } = vnode;
     if (shared.isUndefined(on)) {
         return;
     }
+    const { addEventListener } = renderer;
     for (const name in on) {
         const handler = on[name];
         addEventListener(elm, name, handler);
@@ -3261,11 +3113,12 @@ function applyEventListeners(vnode) {
 // The HTML class property becomes the vnode.data.classMap object when defined as a string in the template.
 // The compiler takes care of transforming the inline classnames into an object. It's faster to set the
 // different classnames properties individually instead of via a string.
-function applyStaticClassAttribute(vnode) {
+function applyStaticClassAttribute(vnode, renderer) {
     const { elm, data: { classMap }, } = vnode;
     if (shared.isUndefined(classMap)) {
         return;
     }
+    const { getClassList } = renderer;
     const classList = getClassList(elm);
     for (const name in classMap) {
         classList.add(name);
@@ -3281,11 +3134,12 @@ function applyStaticClassAttribute(vnode) {
 // The HTML style property becomes the vnode.data.styleDecls object when defined as a string in the template.
 // The compiler takes care of transforming the inline style into an object. It's faster to set the
 // different style properties individually instead of via a string.
-function applyStaticStyleAttribute(vnode) {
+function applyStaticStyleAttribute(vnode, renderer) {
     const { elm, data: { styleDecls }, } = vnode;
     if (shared.isUndefined(styleDecls)) {
         return;
     }
+    const { setCSSStyleProperty } = renderer;
     for (let i = 0; i < styleDecls.length; i++) {
         const [prop, value, important] = styleDecls[i];
         setCSSStyleProperty(elm, prop, value, important);
@@ -3298,15 +3152,16 @@ function applyStaticStyleAttribute(vnode) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function patchChildren(c1, c2, parent) {
+function patchChildren(c1, c2, parent, renderer) {
     if (hasDynamicChildren(c2)) {
-        updateDynamicChildren(c1, c2, parent);
+        updateDynamicChildren(c1, c2, parent, renderer);
     }
     else {
-        updateStaticChildren(c1, c2, parent);
+        updateStaticChildren(c1, c2, parent, renderer);
     }
 }
-function patch(n1, n2) {
+function patch(n1, n2, renderer) {
+    var _a, _b;
     if (n1 === n2) {
         return;
     }
@@ -3320,80 +3175,115 @@ function patch(n1, n2) {
     }
     switch (n2.type) {
         case 0 /* Text */:
-            patchText(n1, n2);
+            // VText has no special capability, fallback to the owner's renderer
+            patchText(n1, n2, renderer);
             break;
         case 1 /* Comment */:
-            patchComment(n1, n2);
+            // VComment has no special capability, fallback to the owner's renderer
+            patchComment(n1, n2, renderer);
+            break;
+        case 4 /* Static */:
+            n2.elm = n1.elm;
             break;
         case 2 /* Element */:
-            patchElement(n1, n2);
+            patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
         case 3 /* CustomElement */:
-            patchCustomElement(n1, n2);
+            patchCustomElement(n1, n2, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
             break;
     }
 }
-function mount(node, parent, anchor) {
+function mount(node, parent, renderer, anchor) {
+    var _a, _b;
     switch (node.type) {
         case 0 /* Text */:
-            mountText(node, parent, anchor);
+            // VText has no special capability, fallback to the owner's renderer
+            mountText(node, parent, anchor, renderer);
             break;
         case 1 /* Comment */:
-            mountComment(node, parent, anchor);
+            // VComment has no special capability, fallback to the owner's renderer
+            mountComment(node, parent, anchor, renderer);
+            break;
+        case 4 /* Static */:
+            // VStatic cannot have a custom renderer associated to them, using owner's renderer
+            mountStatic(node, parent, anchor, renderer);
             break;
         case 2 /* Element */:
-            mountElement(node, parent, anchor);
+            // If the vnode data has a renderer override use it, else fallback to owner's renderer
+            mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
         case 3 /* CustomElement */:
-            mountCustomElement(node, parent, anchor);
+            // If the vnode data has a renderer override use it, else fallback to owner's renderer
+            mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
             break;
     }
 }
-function patchText(n1, n2) {
+function patchText(n1, n2, renderer) {
     n2.elm = n1.elm;
     if (n2.text !== n1.text) {
-        updateTextContent(n2);
+        updateTextContent(n2, renderer);
     }
 }
-function mountText(node, parent, anchor) {
-    const { owner } = node;
-    const textNode = (node.elm = createText(node.text));
-    linkNodeToShadow(textNode, owner);
-    insertNode(textNode, parent, anchor);
+function mountText(vnode, parent, anchor, renderer) {
+    const { owner } = vnode;
+    const { createText } = renderer;
+    const textNode = (vnode.elm = createText(vnode.text));
+    linkNodeToShadow(textNode, owner, renderer);
+    insertNode(textNode, parent, anchor, renderer);
 }
-function patchComment(n1, n2) {
+function patchComment(n1, n2, renderer) {
     n2.elm = n1.elm;
     // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
     // it is the case today.
     if (n2.text !== n1.text) {
-        updateTextContent(n2);
+        updateTextContent(n2, renderer);
     }
 }
-function mountComment(node, parent, anchor) {
-    const { owner } = node;
-    const commentNode = (node.elm = createComment(node.text));
-    linkNodeToShadow(commentNode, owner);
-    insertNode(commentNode, parent, anchor);
+function mountComment(vnode, parent, anchor, renderer) {
+    const { owner } = vnode;
+    const { createComment } = renderer;
+    const commentNode = (vnode.elm = createComment(vnode.text));
+    linkNodeToShadow(commentNode, owner, renderer);
+    insertNode(commentNode, parent, anchor, renderer);
 }
-function mountElement(vnode, parent, anchor) {
+function mountElement(vnode, parent, anchor, renderer) {
     const { sel, owner, data: { svg }, } = vnode;
+    const { createElement } = renderer;
     const namespace = shared.isTrue(svg) ? shared.SVG_NAMESPACE : undefined;
     const elm = createElement(sel, namespace);
-    linkNodeToShadow(elm, owner);
-    fallbackElmHook(elm, vnode);
+    linkNodeToShadow(elm, owner, renderer);
+    fallbackElmHook(elm, vnode, renderer);
     vnode.elm = elm;
-    patchElementPropsAndAttrs$1(null, vnode);
-    insertNode(elm, parent, anchor);
-    mountVNodes(vnode.children, elm, null);
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
+    mountVNodes(vnode.children, elm, renderer, null);
 }
-function patchElement(n1, n2) {
+function patchElement(n1, n2, renderer) {
     const elm = (n2.elm = n1.elm);
-    patchElementPropsAndAttrs$1(n1, n2);
-    patchChildren(n1.children, n2.children, elm);
+    patchElementPropsAndAttrs$1(n1, n2, renderer);
+    patchChildren(n1.children, n2.children, elm, renderer);
 }
-function mountCustomElement(vnode, parent, anchor) {
+function mountStatic(vnode, parent, anchor, renderer) {
+    const { owner } = vnode;
+    const { cloneNode, isSyntheticShadowDefined } = 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 === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
+            elm[shared.KEY__SHADOW_STATIC] = true;
+        }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        const isLight = renderMode === 0 /* Light */;
+        patchElementWithRestrictions(elm, { isPortal: false, isLight });
+    }
+    insertNode(elm, parent, anchor, renderer);
+}
+function mountCustomElement(vnode, parent, anchor, renderer) {
     const { sel, owner } = vnode;
-    const UpgradableConstructor = getUpgradableConstructor(sel);
+    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
     /**
      * Note: if the upgradable constructor does not expect, or throw when we new it
      * with a callback as the first argument, we could implement a more advanced
@@ -3403,9 +3293,9 @@ function mountCustomElement(vnode, parent, anchor) {
     let vm;
     const elm = new UpgradableConstructor((elm) => {
         // the custom element from the registry is expecting an upgrade callback
-        vm = createViewModelHook(elm, vnode);
+        vm = createViewModelHook(elm, vnode, renderer);
     });
-    linkNodeToShadow(elm, owner);
+    linkNodeToShadow(elm, owner, renderer);
     vnode.elm = elm;
     vnode.vm = vm;
     if (vm) {
@@ -3414,23 +3304,23 @@ function mountCustomElement(vnode, parent, anchor) {
     else if (vnode.ctor !== UpgradableConstructor) {
         throw new TypeError(`Incorrect Component Constructor`);
     }
-    patchElementPropsAndAttrs$1(null, vnode);
-    insertNode(elm, parent, anchor);
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
     if (vm) {
         if (process.env.NODE_ENV !== 'production') {
             shared.assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
         }
         runConnectedCallback(vm);
     }
-    mountVNodes(vnode.children, elm, null);
+    mountVNodes(vnode.children, elm, renderer, null);
     if (vm) {
         appendVM(vm);
     }
 }
-function patchCustomElement(n1, n2) {
+function patchCustomElement(n1, n2, renderer) {
     const elm = (n2.elm = n1.elm);
     const vm = (n2.vm = n1.vm);
-    patchElementPropsAndAttrs$1(n1, n2);
+    patchElementPropsAndAttrs$1(n1, n2, renderer);
     if (!shared.isUndefined(vm)) {
         // in fallback mode, the allocation will always set children to
         // empty and delegate the real allocation to the slot elements
@@ -3438,34 +3328,36 @@ function patchCustomElement(n1, n2) {
     }
     // in fallback mode, the children will be always empty, so, nothing
     // will happen, but in native, it does allocate the light dom
-    patchChildren(n1.children, n2.children, elm);
+    patchChildren(n1.children, n2.children, elm, renderer);
     if (!shared.isUndefined(vm)) {
         // this will probably update the shadowRoot, but only if the vm is in a dirty state
         // this is important to preserve the top to bottom synchronous rendering phase.
         rerenderVM(vm);
     }
 }
-function mountVNodes(vnodes, parent, anchor, start = 0, end = vnodes.length) {
+function mountVNodes(vnodes, parent, renderer, anchor, start = 0, end = vnodes.length) {
     for (; start < end; ++start) {
         const vnode = vnodes[start];
         if (isVNode(vnode)) {
-            mount(vnode, parent, anchor);
+            mount(vnode, parent, renderer, anchor);
         }
     }
 }
-function unmount(vnode, parent, doRemove = false) {
+function unmount(vnode, parent, renderer, doRemove = false) {
     const { type, elm, sel } = vnode;
     // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
     // subtree root, is the only element worth unmounting from the subtree.
     if (doRemove) {
-        removeNode(elm, parent);
+        // The vnode might or might not have a data.renderer associated to it
+        // but the removal used here is from the owner instead.
+        removeNode(elm, parent, renderer);
     }
     switch (type) {
         case 2 /* Element */: {
             // Slot content is removed to trigger slotchange event when removing slot.
             // Only required for synthetic shadow.
-            const removeChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* Synthetic */;
-            unmountVNodes(vnode.children, elm, removeChildren);
+            const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* Synthetic */;
+            unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
             break;
         }
         case 3 /* CustomElement */: {
@@ -3478,11 +3370,11 @@ function unmount(vnode, parent, doRemove = false) {
         }
     }
 }
-function unmountVNodes(vnodes, parent, doRemove = false, start = 0, end = vnodes.length) {
+function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, end = vnodes.length) {
     for (; start < end; ++start) {
         const ch = vnodes[start];
         if (isVNode(ch)) {
-            unmount(ch, parent, doRemove);
+            unmount(ch, parent, renderer, doRemove);
         }
     }
 }
@@ -3496,15 +3388,19 @@ function setElementShadowToken(elm, token) {
     elm.$shadowToken$ = token;
 }
 // Set the scope token class for *.scoped.css styles
-function setScopeTokenClassIfNecessary(elm, owner) {
+function setScopeTokenClassIfNecessary(elm, owner, renderer) {
     const { cmpTemplate, context } = owner;
+    const { getClassList } = renderer;
     const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
     if (!shared.isUndefined(token) && context.hasScopedStyles) {
+        // TODO [#2762]: this dot notation with add is probably problematic
+        // probably we should have a renderer api for just the add operation
         getClassList(elm).add(token);
     }
 }
-function linkNodeToShadow(elm, owner) {
+function linkNodeToShadow(elm, owner, renderer) {
     const { renderRoot, renderMode, shadowMode } = owner;
+    const { isSyntheticShadowDefined } = renderer;
     // TODO [#1164]: this should eventually be done by the polyfill directly
     if (isSyntheticShadowDefined) {
         if (shadowMode === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
@@ -3512,8 +3408,9 @@ function linkNodeToShadow(elm, owner) {
         }
     }
 }
-function updateTextContent(vnode) {
+function updateTextContent(vnode, renderer) {
     const { elm, text } = vnode;
+    const { setText } = renderer;
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
     }
@@ -3522,40 +3419,40 @@ function updateTextContent(vnode) {
         lockDomMutation();
     }
 }
-function insertNode(node, parent, anchor) {
+function insertNode(node, parent, anchor, renderer) {
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
     }
-    insert(node, parent, anchor);
+    renderer.insert(node, parent, anchor);
     if (process.env.NODE_ENV !== 'production') {
         lockDomMutation();
     }
 }
-function removeNode(node, parent) {
+function removeNode(node, parent, renderer) {
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
     }
-    remove(node, parent);
+    renderer.remove(node, parent);
     if (process.env.NODE_ENV !== 'production') {
         lockDomMutation();
     }
 }
-function patchElementPropsAndAttrs$1(oldVnode, vnode) {
+function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     if (shared.isNull(oldVnode)) {
-        applyEventListeners(vnode);
-        applyStaticClassAttribute(vnode);
-        applyStaticStyleAttribute(vnode);
+        applyEventListeners(vnode, renderer);
+        applyStaticClassAttribute(vnode, renderer);
+        applyStaticStyleAttribute(vnode, renderer);
     }
     // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
     // value is set before type=radio.
-    patchClassAttribute(oldVnode, vnode);
-    patchStyleAttribute(oldVnode, vnode);
-    patchAttributes(oldVnode, vnode);
-    patchProps(oldVnode, vnode);
+    patchClassAttribute(oldVnode, vnode, renderer);
+    patchStyleAttribute(oldVnode, vnode, renderer);
+    patchAttributes(oldVnode, vnode, renderer);
+    patchProps(oldVnode, vnode, renderer);
 }
-function fallbackElmHook(elm, vnode) {
+function fallbackElmHook(elm, vnode, renderer) {
     const { owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
     if (owner.shadowMode === 1 /* Synthetic */) {
         const { data: { context }, } = vnode;
         const { stylesheetToken } = owner.context;
@@ -3603,7 +3500,7 @@ function allocateChildren(vnode, vm) {
         vnode.children = EmptyArray;
     }
 }
-function createViewModelHook(elm, vnode) {
+function createViewModelHook(elm, vnode, renderer) {
     let vm = getAssociatedVMIfPresent(elm);
     // There is a possibility that a custom element is registered under tagName, in which case, the
     // initialization is already carry on, and there is nothing else to do here since this hook is
@@ -3612,7 +3509,7 @@ function createViewModelHook(elm, vnode) {
         return vm;
     }
     const { sel, mode, ctor, owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
     if (owner.shadowMode === 1 /* Synthetic */) {
         const { stylesheetToken } = owner.context;
         // when running in synthetic shadow mode, we need to set the shadowToken value
@@ -3621,7 +3518,7 @@ function createViewModelHook(elm, vnode) {
             setElementShadowToken(elm, stylesheetToken);
         }
     }
-    vm = createVM(elm, ctor, {
+    vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
         tagName: sel,
@@ -3696,7 +3593,7 @@ function createKeyToOldIdx(children, beginIdx, endIdx) {
     }
     return map;
 }
-function updateDynamicChildren(oldCh, newCh, parent) {
+function updateDynamicChildren(oldCh, newCh, parent, renderer) {
     let oldStartIdx = 0;
     let newStartIdx = 0;
     let oldEndIdx = oldCh.length - 1;
@@ -3725,26 +3622,26 @@ function updateDynamicChildren(oldCh, newCh, parent) {
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldStartVnode, newStartVnode)) {
-            patch(oldStartVnode, newStartVnode);
+            patch(oldStartVnode, newStartVnode, renderer);
             oldStartVnode = oldCh[++oldStartIdx];
             newStartVnode = newCh[++newStartIdx];
         }
         else if (isSameVnode(oldEndVnode, newEndVnode)) {
-            patch(oldEndVnode, newEndVnode);
+            patch(oldEndVnode, newEndVnode, renderer);
             oldEndVnode = oldCh[--oldEndIdx];
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldStartVnode, newEndVnode)) {
             // Vnode moved right
-            patch(oldStartVnode, newEndVnode);
-            insertNode(oldStartVnode.elm, parent, nextSibling(oldEndVnode.elm));
+            patch(oldStartVnode, newEndVnode, renderer);
+            insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldEndVnode, newStartVnode)) {
             // Vnode moved left
-            patch(oldEndVnode, newStartVnode);
-            insertNode(newStartVnode.elm, parent, oldStartVnode.elm);
+            patch(oldEndVnode, newStartVnode, renderer);
+            insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
             oldEndVnode = oldCh[--oldEndIdx];
             newStartVnode = newCh[++newStartIdx];
         }
@@ -3755,7 +3652,7 @@ function updateDynamicChildren(oldCh, newCh, parent) {
             idxInOld = oldKeyToIdx[newStartVnode.key];
             if (shared.isUndefined(idxInOld)) {
                 // New element
-                mount(newStartVnode, parent, oldStartVnode.elm);
+                mount(newStartVnode, parent, renderer, oldStartVnode.elm);
                 newStartVnode = newCh[++newStartIdx];
             }
             else {
@@ -3763,10 +3660,10 @@ function updateDynamicChildren(oldCh, newCh, parent) {
                 if (isVNode(elmToMove)) {
                     if (elmToMove.sel !== newStartVnode.sel) {
                         // New element
-                        mount(newStartVnode, parent, oldStartVnode.elm);
+                        mount(newStartVnode, parent, renderer, oldStartVnode.elm);
                     }
                     else {
-                        patch(elmToMove, newStartVnode);
+                        patch(elmToMove, newStartVnode, renderer);
                         // Delete the old child, but copy the array since it is read-only.
                         // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
                         // so we only care about the `oldCh` object inside this function.
@@ -3778,7 +3675,7 @@ function updateDynamicChildren(oldCh, newCh, parent) {
                         }
                         // We've already cloned at least once, so it's no longer read-only
                         oldCh[idxInOld] = undefined;
-                        insertNode(elmToMove.elm, parent, oldStartVnode.elm);
+                        insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
                     }
                 }
                 newStartVnode = newCh[++newStartIdx];
@@ -3795,25 +3692,25 @@ function updateDynamicChildren(oldCh, newCh, parent) {
                 n = newCh[++i];
             } while (!isVNode(n) && i < newChEnd);
             before = isVNode(n) ? n.elm : null;
-            mountVNodes(newCh, parent, before, newStartIdx, newEndIdx + 1);
+            mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
         }
         else {
-            unmountVNodes(oldCh, parent, true, oldStartIdx, oldEndIdx + 1);
+            unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
         }
     }
 }
-function updateStaticChildren(c1, c2, parent) {
+function updateStaticChildren(c1, c2, parent, renderer) {
     const c1Length = c1.length;
     const c2Length = c2.length;
     if (c1Length === 0) {
         // the old list is empty, we can directly insert anything new
-        mountVNodes(c2, parent, null);
+        mountVNodes(c2, parent, renderer, null);
         return;
     }
     if (c2Length === 0) {
         // the old list is nonempty and the new list is empty so we can directly remove all old nodes
         // this is the case in which the dynamic children of an if-directive should be removed
-        unmountVNodes(c1, parent, true);
+        unmountVNodes(c1, parent, renderer, true);
         return;
     }
     // if the old list is not empty, the new list MUST have the same
@@ -3826,16 +3723,16 @@ function updateStaticChildren(c1, c2, parent) {
             if (isVNode(n1)) {
                 if (isVNode(n2)) {
                     // both vnodes are equivalent, and we just need to patch them
-                    patch(n1, n2);
+                    patch(n1, n2, renderer);
                     anchor = n2.elm;
                 }
                 else {
                     // removing the old vnode since the new one is null
-                    unmount(n1, parent, true);
+                    unmount(n1, parent, renderer, true);
                 }
             }
             else if (isVNode(n2)) {
-                mount(n2, parent, anchor);
+                mount(n2, parent, renderer, anchor);
                 anchor = n2.elm;
             }
         }
@@ -3852,6 +3749,17 @@ const SymbolIterator = Symbol.iterator;
 function addVNodeToChildLWC(vnode) {
     shared.ArrayPush.call(getVMBeingRendered().velements, vnode);
 }
+// [st]atic node
+function st(fragment, key) {
+    return {
+        type: 4 /* Static */,
+        sel: undefined,
+        key,
+        elm: undefined,
+        fragment,
+        owner: getVMBeingRendered(),
+    };
+}
 // [h]tml node
 function h(sel, data, children = EmptyArray) {
     const vmBeingRendered = getVMBeingRendered();
@@ -4241,6 +4149,7 @@ const api = shared.freeze({
     co,
     dc,
     ti,
+    st,
     gid,
     fid,
     shc,
@@ -4264,7 +4173,7 @@ function createInlineStyleVNode(content) {
     }, [api.t(content)]);
 }
 function updateStylesheetToken(vm, template) {
-    const { elm, context, renderMode, shadowMode } = vm;
+    const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
     const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
     const isSyntheticShadow = renderMode === 1 /* Shadow */ && shadowMode === 1 /* Synthetic */;
     const { hasScopedStyles } = context;
@@ -4381,7 +4290,7 @@ function getNearestNativeShadowComponent(vm) {
     return owner;
 }
 function createStylesheet(vm, stylesheets) {
-    const { renderMode, shadowMode } = vm;
+    const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
     if (renderMode === 1 /* Shadow */ && shadowMode === 1 /* Synthetic */) {
         for (let i = 0; i < stylesheets.length; i++) {
             insertStylesheet(stylesheets[i]);
@@ -4392,8 +4301,7 @@ function createStylesheet(vm, stylesheets) {
         //       This works in the client, because the stylesheets are created, and cached in the VM
         //       the first time the VM renders.
         // native shadow or light DOM, SSR
-        const combinedStylesheetContent = shared.ArrayJoin.call(stylesheets, '\n');
-        return createInlineStyleVNode(combinedStylesheetContent);
+        return shared.ArrayMap.call(stylesheets, createInlineStyleVNode);
     }
     else {
         // native shadow or light DOM, DOM renderer
@@ -4561,6 +4469,59 @@ function validateLightDomTemplate(template, vm) {
         shared.assert.isTrue(shared.isUndefined(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
     }
 }
+function buildParseFragmentFn(createFragmentFn) {
+    return (strings, ...keys) => {
+        const cache = shared.create(null);
+        return function () {
+            const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
+            const hasStyleToken = !shared.isUndefined(stylesheetToken);
+            const isSyntheticShadow = shadowMode === 1 /* Synthetic */;
+            let cacheKey = 0;
+            if (hasStyleToken && hasScopedStyles) {
+                cacheKey |= 1 /* HAS_SCOPED_STYLE */;
+            }
+            if (hasStyleToken && isSyntheticShadow) {
+                cacheKey |= 2 /* SHADOW_MODE_SYNTHETIC */;
+            }
+            if (!shared.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, renderer);
+            return cache[cacheKey];
+        };
+    };
+}
+// Note: at the moment this code executes, we don't have a renderer yet.
+const parseFragment = buildParseFragmentFn((html, renderer) => {
+    const { createFragment } = renderer;
+    return createFragment(html);
+});
+const parseSVGFragment = buildParseFragmentFn((html, renderer) => {
+    const { createFragment, getFirstChild } = renderer;
+    const fragment = createFragment('<svg>' + html + '</svg>');
+    return getFirstChild(fragment);
+});
 function evaluateTemplate(vm, html) {
     if (process.env.NODE_ENV !== 'production') {
         shared.assert.isTrue(shared.isFunction(html), `evaluateTemplate() second argument must be an imported template instead of ${shared.toString(html)}`);
@@ -4607,7 +4568,7 @@ function evaluateTemplate(vm, html) {
                 // Evaluate, create stylesheet and cache the produced VNode for future
                 // re-rendering.
                 const stylesheetsContent = getStylesheetsContent(vm, html);
-                context.styleVNode =
+                context.styleVNodes =
                     stylesheetsContent.length === 0
                         ? null
                         : createStylesheet(vm, stylesheetsContent);
@@ -4624,9 +4585,9 @@ function evaluateTemplate(vm, html) {
             // Set the global flag that template is being updated
             isUpdatingTemplate = true;
             vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
-            const { styleVNode } = context;
-            if (!shared.isNull(styleVNode)) {
-                shared.ArrayUnshift.call(vnodes, styleVNode);
+            const { styleVNodes } = context;
+            if (!shared.isNull(styleVNodes)) {
+                shared.ArrayUnshift.apply(vnodes, styleVNodes);
             }
         });
     }, () => {
@@ -4956,7 +4917,7 @@ function getNearestShadowAncestor(vm) {
   return ancestor;
 }
 
-function createVM(elm, ctor, options) {
+function createVM(elm, ctor, renderer, options) {
   const {
     mode,
     owner,
@@ -4991,7 +4952,7 @@ function createVM(elm, ctor, options) {
       hasTokenInClass: undefined,
       hasTokenInAttribute: undefined,
       hasScopedStyles: undefined,
-      styleVNode: null,
+      styleVNodes: null,
       tplCache: EmptyObject,
       wiredConnecting: EmptyArray,
       wiredDisconnecting: EmptyArray
@@ -5005,9 +4966,10 @@ function createVM(elm, ctor, options) {
     renderRoot: null,
     callHook,
     setHook,
-    getHook
+    getHook,
+    renderer
   };
-  vm.shadowMode = computeShadowMode(vm);
+  vm.shadowMode = computeShadowMode(vm, renderer);
   vm.tro = getTemplateReactiveObserver(vm);
 
   if (process.env.NODE_ENV !== 'production') {
@@ -5032,10 +4994,14 @@ function createVM(elm, ctor, options) {
   return vm;
 }
 
-function computeShadowMode(vm) {
+function computeShadowMode(vm, renderer) {
   const {
     def
   } = vm;
+  const {
+    isSyntheticShadowDefined,
+    isNativeShadowDefined
+  } = renderer;
   let shadowMode;
 
   if (isSyntheticShadowDefined) {
@@ -5137,7 +5103,8 @@ function rehydrate(vm) {
 function patchShadowRoot(vm, newCh) {
   const {
     renderRoot,
-    children: oldCh
+    children: oldCh,
+    renderer
   } = vm; // caching the new children collection
 
   vm.children = newCh;
@@ -5153,7 +5120,7 @@ function patchShadowRoot(vm, newCh) {
         , vm);
       }, () => {
         // job
-        patchChildren(oldCh, newCh, renderRoot);
+        patchChildren(oldCh, newCh, renderRoot, renderer);
       }, () => {
         // post
         logOperationEnd(2
@@ -5178,6 +5145,9 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
+    },
+    renderer: {
+      ssr
     }
   } = vm;
 
@@ -5415,7 +5385,10 @@ function recursivelyDisconnectChildren(vnodes) {
 function resetComponentRoot(vm) {
   const {
     children,
-    renderRoot
+    renderRoot,
+    renderer: {
+      remove
+    }
   } = vm;
 
   for (let i = 0, len = children.length; i < len; i++) {
@@ -5431,6 +5404,12 @@ function resetComponentRoot(vm) {
   vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
+  const {
+    renderer: {
+      ssr
+    }
+  } = vm;
+
   if (shared.isTrue(ssr) || shared.isTrue(vm.isScheduled)) {
     return;
   }
@@ -5607,6 +5586,9 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
     context: {
       wiredConnecting,
       wiredDisconnecting
+    },
+    renderer: {
+      dispatchEvent
     }
   } = vm; // waiting for the component to be connected to formally request the context via the token
 
@@ -5878,70 +5860,90 @@ function hydrateRoot(vm) {
 function hydrateVM(vm) {
     const children = renderComponent(vm);
     vm.children = children;
-    const parentNode = vm.renderRoot;
+    const { renderRoot: parentNode, renderer: { getFirstChild }, } = vm;
     hydrateChildren(getFirstChild(parentNode), children, parentNode, vm);
     runRenderedCallback(vm);
 }
-function hydrateNode(node, vnode) {
+function hydrateNode(node, vnode, renderer) {
+    var _a, _b;
     let hydratedNode;
     switch (vnode.type) {
         case 0 /* Text */:
-            hydratedNode = hydrateText(node, vnode);
+            // VText has no special capability, fallback to the owner's renderer
+            hydratedNode = hydrateText(node, vnode, renderer);
             break;
         case 1 /* Comment */:
-            hydratedNode = hydrateComment(node, vnode);
+            // VComment has no special capability, fallback to the owner's renderer
+            hydratedNode = hydrateComment(node, vnode, renderer);
+            break;
+        case 4 /* Static */:
+            // VStatic are cacheable and cannot have custom renderer associated to them
+            hydratedNode = hydrateStaticElement(node, vnode, renderer);
             break;
         case 2 /* Element */:
-            hydratedNode = hydrateElement(node, vnode);
+            hydratedNode = hydrateElement(node, vnode, (_a = vnode.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
         case 3 /* CustomElement */:
-            hydratedNode = hydrateCustomElement(node, vnode);
+            hydratedNode = hydrateCustomElement(node, vnode, (_b = vnode.data.renderer) !== null && _b !== void 0 ? _b : renderer);
             break;
     }
-    return nextSibling(hydratedNode);
+    return renderer.nextSibling(hydratedNode);
 }
-function hydrateText(node, vnode) {
+function hydrateText(node, vnode, renderer) {
     var _a;
-    if (!hasCorrectNodeType(vnode, node, 3 /* TEXT */)) {
-        return handleMismatch(node, vnode);
+    if (!hasCorrectNodeType(vnode, node, 3 /* TEXT */, renderer)) {
+        return handleMismatch(node, vnode, renderer);
     }
     if (process.env.NODE_ENV !== 'production') {
+        const { getProperty } = renderer;
         const nodeValue = getProperty(node, 'nodeValue');
         if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
             logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
         }
     }
+    const { setText } = renderer;
     setText(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
     vnode.elm = node;
     return node;
 }
-function hydrateComment(node, vnode) {
+function hydrateComment(node, vnode, renderer) {
     var _a;
-    if (!hasCorrectNodeType(vnode, node, 8 /* COMMENT */)) {
-        return handleMismatch(node, vnode);
+    if (!hasCorrectNodeType(vnode, node, 8 /* COMMENT */, renderer)) {
+        return handleMismatch(node, vnode, renderer);
     }
     if (process.env.NODE_ENV !== 'production') {
+        const { getProperty } = renderer;
         const nodeValue = getProperty(node, 'nodeValue');
         if (nodeValue !== vnode.text) {
             logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
         }
     }
+    const { setProperty } = renderer;
     setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
     vnode.elm = node;
     return node;
 }
-function hydrateElement(elm, vnode) {
-    if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
-        !isMatchingElement(vnode, elm)) {
-        return handleMismatch(elm, vnode);
+function hydrateStaticElement(elm, vnode, renderer) {
+    if (!areCompatibleNodes(vnode.fragment, elm, vnode, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
+    }
+    vnode.elm = elm;
+    return elm;
+}
+function hydrateElement(elm, vnode, renderer) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */, renderer) ||
+        !isMatchingElement(vnode, elm, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
+    const { owner } = vnode;
     const { context } = vnode.data;
     const isDomManual = Boolean(!shared.isUndefined(context) && !shared.isUndefined(context.lwc) && context.lwc.dom === "manual" /* Manual */);
     if (isDomManual) {
         // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
         // remove the innerHTML from props so it reuses the existing dom elements.
-        const { props } = vnode.data;
+        const { data: { props }, } = vnode;
+        const { getProperty } = renderer;
         if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
             if (getProperty(elm, 'innerHTML') === props.innerHTML) {
                 // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
@@ -5949,24 +5951,25 @@ function hydrateElement(elm, vnode) {
             }
             else {
                 if (process.env.NODE_ENV !== 'production') {
-                    logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
+                    logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, owner);
                 }
             }
         }
     }
-    patchElementPropsAndAttrs(vnode);
+    patchElementPropsAndAttrs(vnode, renderer);
     if (!isDomManual) {
-        hydrateChildren(getFirstChild(elm), vnode.children, elm, vnode.owner);
+        const { getFirstChild } = renderer;
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, owner);
     }
     return elm;
 }
-function hydrateCustomElement(elm, vnode) {
-    if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
-        !isMatchingElement(vnode, elm)) {
-        return handleMismatch(elm, vnode);
+function hydrateCustomElement(elm, vnode, renderer) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */, renderer) ||
+        !isMatchingElement(vnode, elm, renderer)) {
+        return handleMismatch(elm, vnode, renderer);
     }
     const { sel, mode, ctor, owner } = vnode;
-    const vm = createVM(elm, ctor, {
+    const vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
         tagName: sel,
@@ -5975,13 +5978,14 @@ function hydrateCustomElement(elm, vnode) {
     vnode.elm = elm;
     vnode.vm = vm;
     allocateChildren(vnode, vm);
-    patchElementPropsAndAttrs(vnode);
+    patchElementPropsAndAttrs(vnode, renderer);
     // Insert hook section:
     if (process.env.NODE_ENV !== 'production') {
         shared.assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
     }
     runConnectedCallback(vm);
     if (vm.renderMode !== 0 /* Light */) {
+        const { getFirstChild } = renderer;
         // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
         // Note: for Light DOM, this is handled while hydrating the VM
         hydrateChildren(getFirstChild(elm), vnode.children, elm, vm);
@@ -5993,11 +5997,12 @@ function hydrateChildren(node, children, parentNode, owner) {
     let hasWarned = false;
     let nextNode = node;
     let anchor = null;
+    const { renderer } = owner;
     for (let i = 0; i < children.length; i++) {
         const childVnode = children[i];
         if (!shared.isNull(childVnode)) {
             if (nextNode) {
-                nextNode = hydrateNode(nextNode, childVnode);
+                nextNode = hydrateNode(nextNode, childVnode, renderer);
                 anchor = childVnode.elm;
             }
             else {
@@ -6008,7 +6013,7 @@ function hydrateChildren(node, children, parentNode, owner) {
                         logError(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
                     }
                 }
-                mount(childVnode, parentNode, anchor);
+                mount(childVnode, parentNode, renderer, anchor);
                 anchor = childVnode.elm;
             }
         }
@@ -6020,30 +6025,32 @@ function hydrateChildren(node, children, parentNode, owner) {
                 logError(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
             }
         }
+        // nextSibling is mostly harmless, and since we don't have
+        // a good reference to what element to act upon, we instead
+        // rely on the vm's associated renderer for navigating to the
+        // next node in the list to be hydrated.
+        const { nextSibling } = renderer;
         do {
             const current = nextNode;
             nextNode = nextSibling(nextNode);
-            removeNode(current, parentNode);
+            removeNode(current, parentNode, renderer);
         } while (nextNode);
     }
 }
-function handleMismatch(node, vnode, msg) {
+function handleMismatch(node, vnode, renderer) {
     hasMismatch = true;
-    if (!shared.isUndefined(msg)) {
-        if (process.env.NODE_ENV !== 'production') {
-            logError(msg, vnode.owner);
-        }
-    }
+    const { getProperty } = renderer;
     const parentNode = getProperty(node, 'parentNode');
-    mount(vnode, parentNode, node);
-    removeNode(node, parentNode);
+    mount(vnode, parentNode, renderer, node);
+    removeNode(node, parentNode, renderer);
     return vnode.elm;
 }
-function patchElementPropsAndAttrs(vnode) {
-    applyEventListeners(vnode);
-    patchProps(null, vnode);
+function patchElementPropsAndAttrs(vnode, renderer) {
+    applyEventListeners(vnode, renderer);
+    patchProps(null, vnode, renderer);
 }
-function hasCorrectNodeType(vnode, node, nodeType) {
+function hasCorrectNodeType(vnode, node, nodeType, renderer) {
+    const { getProperty } = renderer;
     if (getProperty(node, 'nodeType') !== nodeType) {
         if (process.env.NODE_ENV !== 'production') {
             logError('Hydration mismatch: incorrect node type received', vnode.owner);
@@ -6052,36 +6059,41 @@ function hasCorrectNodeType(vnode, node, nodeType) {
     }
     return true;
 }
-function isMatchingElement(vnode, elm) {
+function isMatchingElement(vnode, elm, renderer) {
+    const { getProperty } = renderer;
     if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
         if (process.env.NODE_ENV !== 'production') {
             logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
         }
         return false;
     }
-    const hasIncompatibleAttrs = validateAttrs(vnode, elm);
-    const hasIncompatibleClass = validateClassAttr(vnode, elm);
-    const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+    const hasIncompatibleAttrs = validateAttrs(vnode, elm, renderer);
+    const hasIncompatibleClass = validateClassAttr(vnode, elm, renderer);
+    const hasIncompatibleStyle = validateStyleAttr(vnode, elm, renderer);
     return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
 }
-function validateAttrs(vnode, elm) {
+function validateAttrs(vnode, elm, renderer) {
     const { data: { attrs = {} }, } = vnode;
     let nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
     for (const [attrName, attrValue] of Object.entries(attrs)) {
+        const { owner } = vnode;
+        const { getAttribute } = renderer;
         const elmAttrValue = getAttribute(elm, attrName);
         if (String(attrValue) !== elmAttrValue) {
             if (process.env.NODE_ENV !== 'production') {
-                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
+                const { getProperty } = renderer;
+                logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, owner);
             }
             nodesAreCompatible = false;
         }
     }
     return nodesAreCompatible;
 }
-function validateClassAttr(vnode, elm) {
+function validateClassAttr(vnode, elm, renderer) {
     const { data: { className, classMap }, } = vnode;
+    const { getProperty, getClassList } = renderer;
     let nodesAreCompatible = true;
     let vnodeClassName;
     if (!shared.isUndefined(className) && String(className) !== getProperty(elm, 'className')) {
@@ -6112,8 +6124,9 @@ function validateClassAttr(vnode, elm) {
     }
     return nodesAreCompatible;
 }
-function validateStyleAttr(vnode, elm) {
+function validateStyleAttr(vnode, elm, renderer) {
     const { data: { style, styleDecls }, } = vnode;
+    const { getAttribute } = renderer;
     const elmStyle = getAttribute(elm, 'style') || '';
     let vnodeStyle;
     let nodesAreCompatible = true;
@@ -6146,11 +6159,45 @@ function validateStyleAttr(vnode, elm) {
     }
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
+            const { getProperty } = renderer;
             logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
         }
     }
     return nodesAreCompatible;
 }
+function areCompatibleNodes(client, ssr, vnode, renderer) {
+    const { getProperty, getAttribute } = renderer;
+    if (getProperty(client, 'nodeType') === 3 /* TEXT */) {
+        if (!hasCorrectNodeType(vnode, ssr, 3 /* TEXT */, renderer)) {
+            return false;
+        }
+        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+    if (getProperty(client, 'nodeType') === 8 /* COMMENT */) {
+        if (!hasCorrectNodeType(vnode, ssr, 8 /* COMMENT */, renderer)) {
+            return false;
+        }
+        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+    if (!hasCorrectNodeType(vnode, ssr, 1 /* 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 = 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;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6310,56 +6357,19 @@ exports.getComponentHtmlPrototype = getComponentHtmlPrototype;
 exports.getUpgradableConstructor = getUpgradableConstructor;
 exports.hydrateRoot = hydrateRoot;
 exports.isComponentConstructor = isComponentConstructor;
+exports.parseFragment = parseFragment;
+exports.parseSVGFragment = parseSVGFragment;
 exports.readonly = readonly;
 exports.register = register;
 exports.registerComponent = registerComponent;
 exports.registerDecorators = registerDecorators;
 exports.registerTemplate = registerTemplate;
 exports.sanitizeAttribute = sanitizeAttribute;
-exports.setAddEventListener = setAddEventListener;
-exports.setAssertInstanceOfHTMLElement = setAssertInstanceOfHTMLElement;
-exports.setAttachShadow = setAttachShadow;
-exports.setCreateComment = setCreateComment;
-exports.setCreateElement = setCreateElement;
-exports.setCreateText = setCreateText;
-exports.setDefineCustomElement = setDefineCustomElement;
-exports.setDispatchEvent = setDispatchEvent;
-exports.setGetAttribute = setGetAttribute;
-exports.setGetBoundingClientRect = setGetBoundingClientRect;
-exports.setGetChildNodes = setGetChildNodes;
-exports.setGetChildren = setGetChildren;
-exports.setGetClassList = setGetClassList;
-exports.setGetCustomElement = setGetCustomElement;
-exports.setGetElementsByClassName = setGetElementsByClassName;
-exports.setGetElementsByTagName = setGetElementsByTagName;
-exports.setGetFirstChild = setGetFirstChild;
-exports.setGetFirstElementChild = setGetFirstElementChild;
-exports.setGetLastChild = setGetLastChild;
-exports.setGetLastElementChild = setGetLastElementChild;
-exports.setGetProperty = setGetProperty;
-exports.setHTMLElement = setHTMLElement;
 exports.setHooks = setHooks;
-exports.setInsert = setInsert;
-exports.setInsertStylesheet = setInsertStylesheet;
-exports.setIsConnected = setIsConnected;
-exports.setIsHydrating = setIsHydrating;
-exports.setIsNativeShadowDefined = setIsNativeShadowDefined;
-exports.setIsSyntheticShadowDefined = setIsSyntheticShadowDefined;
-exports.setNextSibling = setNextSibling;
-exports.setQuerySelector = setQuerySelector;
-exports.setQuerySelectorAll = setQuerySelectorAll;
-exports.setRemove = setRemove;
-exports.setRemoveAttribute = setRemoveAttribute;
-exports.setRemoveEventListener = setRemoveEventListener;
-exports.setSetAttribute = setSetAttribute;
-exports.setSetCSSStyleProperty = setSetCSSStyleProperty;
-exports.setSetProperty = setSetProperty;
-exports.setSetText = setSetText;
-exports.setSsr = setSsr;
 exports.swapComponent = swapComponent;
 exports.swapStyle = swapStyle;
 exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.14.1 */
+/* version: 2.16.0 */