lwc 2.14.1 → 2.16.0

package/dist/engine-dom/esm/es2017/engine-dom.js

@@ -230,6 +230,7 @@ const _globalThis = /*@__PURE__*/ (function () {
  */
 const KEY__IS_NATIVE_SHADOW_ROOT_DEFINED = '$isNativeShadowRootDefined$';
 const KEY__SHADOW_RESOLVER = '$shadowResolver$';
+const KEY__SHADOW_STATIC = '$shadowStaticNode$';
 const KEY__SHADOW_TOKEN = '$shadowToken$';
 const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
 const KEY__SCOPED_CSS = '$scoped$';
@@ -298,9 +299,9 @@ const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.14.1";
+const LWC_VERSION = "2.16.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.14.1 */
+/** version: 2.16.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -454,7 +455,32 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.14.1 */
+/** version: 2.16.0 */
+
+/*
+ * 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
+ */
+// @ts-ignore
+
+if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
+  window.addEventListener('test-dummy-flag', () => {
+    let hasFlag = false;
+
+    if (runtimeFlags.DUMMY_TEST_FLAG) {
+      hasFlag = true;
+    }
+
+    window.dispatchEvent(new CustomEvent('has-dummy-flag', {
+      detail: {
+        package: '@lwc/engine-dom',
+        hasFlag
+      }
+    }));
+  });
+}
 
 /* proxy-compat-disable */
 
@@ -564,162 +590,6 @@ function flattenStylesheets(stylesheets) {
     return list;
 }
 
-//
-// Primitives
-//
-let ssr$1;
-function setSsr(ssrImpl) {
-    ssr$1 = ssrImpl;
-}
-let isNativeShadowDefined$1;
-function setIsNativeShadowDefined(isNativeShadowDefinedImpl) {
-    isNativeShadowDefined$1 = isNativeShadowDefinedImpl;
-}
-let isSyntheticShadowDefined$1;
-function setIsSyntheticShadowDefined(isSyntheticShadowDefinedImpl) {
-    isSyntheticShadowDefined$1 = isSyntheticShadowDefinedImpl;
-}
-let HTMLElementExported$1;
-function setHTMLElement(HTMLElementImpl) {
-    HTMLElementExported$1 = HTMLElementImpl;
-}
-let insert$1;
-function setInsert(insertImpl) {
-    insert$1 = insertImpl;
-}
-let remove$1;
-function setRemove(removeImpl) {
-    remove$1 = removeImpl;
-}
-let createElement$2;
-function setCreateElement(createElementImpl) {
-    createElement$2 = createElementImpl;
-}
-let createText$1;
-function setCreateText(createTextImpl) {
-    createText$1 = createTextImpl;
-}
-let createComment$1;
-function setCreateComment(createCommentImpl) {
-    createComment$1 = createCommentImpl;
-}
-let nextSibling$1;
-function setNextSibling(nextSiblingImpl) {
-    nextSibling$1 = nextSiblingImpl;
-}
-let attachShadow$1;
-function setAttachShadow(attachShadowImpl) {
-    attachShadow$1 = attachShadowImpl;
-}
-let getProperty$1;
-function setGetProperty(getPropertyImpl) {
-    getProperty$1 = getPropertyImpl;
-}
-let setProperty$1;
-function setSetProperty(setPropertyImpl) {
-    setProperty$1 = setPropertyImpl;
-}
-let setText$1;
-function setSetText(setTextImpl) {
-    setText$1 = setTextImpl;
-}
-let getAttribute$1;
-function setGetAttribute(getAttributeImpl) {
-    getAttribute$1 = getAttributeImpl;
-}
-let setAttribute$1;
-function setSetAttribute(setAttributeImpl) {
-    setAttribute$1 = setAttributeImpl;
-}
-let removeAttribute$1;
-function setRemoveAttribute(removeAttributeImpl) {
-    removeAttribute$1 = removeAttributeImpl;
-}
-let addEventListener$1;
-function setAddEventListener(addEventListenerImpl) {
-    addEventListener$1 = addEventListenerImpl;
-}
-let removeEventListener$1;
-function setRemoveEventListener(removeEventListenerImpl) {
-    removeEventListener$1 = removeEventListenerImpl;
-}
-let dispatchEvent$1;
-function setDispatchEvent(dispatchEventImpl) {
-    dispatchEvent$1 = dispatchEventImpl;
-}
-let getClassList$1;
-function setGetClassList(getClassListImpl) {
-    getClassList$1 = getClassListImpl;
-}
-let setCSSStyleProperty$1;
-function setSetCSSStyleProperty(setCSSStylePropertyImpl) {
-    setCSSStyleProperty$1 = setCSSStylePropertyImpl;
-}
-let getBoundingClientRect$1;
-function setGetBoundingClientRect(getBoundingClientRectImpl) {
-    getBoundingClientRect$1 = getBoundingClientRectImpl;
-}
-let querySelector$1;
-function setQuerySelector(querySelectorImpl) {
-    querySelector$1 = querySelectorImpl;
-}
-let querySelectorAll$1;
-function setQuerySelectorAll(querySelectorAllImpl) {
-    querySelectorAll$1 = querySelectorAllImpl;
-}
-let getElementsByTagName$1;
-function setGetElementsByTagName(getElementsByTagNameImpl) {
-    getElementsByTagName$1 = getElementsByTagNameImpl;
-}
-let getElementsByClassName$1;
-function setGetElementsByClassName(getElementsByClassNameImpl) {
-    getElementsByClassName$1 = getElementsByClassNameImpl;
-}
-let getChildren$1;
-function setGetChildren(getChildrenImpl) {
-    getChildren$1 = getChildrenImpl;
-}
-let getChildNodes$1;
-function setGetChildNodes(getChildNodesImpl) {
-    getChildNodes$1 = getChildNodesImpl;
-}
-let getFirstChild$1;
-function setGetFirstChild(getFirstChildImpl) {
-    getFirstChild$1 = getFirstChildImpl;
-}
-let getFirstElementChild$1;
-function setGetFirstElementChild(getFirstElementChildImpl) {
-    getFirstElementChild$1 = getFirstElementChildImpl;
-}
-let getLastChild$1;
-function setGetLastChild(getLastChildImpl) {
-    getLastChild$1 = getLastChildImpl;
-}
-let getLastElementChild$1;
-function setGetLastElementChild(getLastElementChildImpl) {
-    getLastElementChild$1 = getLastElementChildImpl;
-}
-let isConnected$1;
-function setIsConnected(isConnectedImpl) {
-    isConnected$1 = isConnectedImpl;
-}
-let insertStylesheet$1;
-function setInsertStylesheet(insertStylesheetImpl) {
-    insertStylesheet$1 = insertStylesheetImpl;
-}
-let assertInstanceOfHTMLElement$1;
-function setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElementImpl) {
-    assertInstanceOfHTMLElement$1 = assertInstanceOfHTMLElementImpl;
-}
-let defineCustomElement$1;
-function setDefineCustomElement(defineCustomElementImpl) {
-    defineCustomElement$1 = defineCustomElementImpl;
-}
-let getCustomElement$1;
-function setGetCustomElement(getCustomElementImpl) {
-    getCustomElement$1 = getCustomElementImpl;
-}
-
 /*
  * Copyright (c) 2019, salesforce.com, inc.
  * All rights reserved.
@@ -2024,7 +1894,8 @@ const LightningElement = function () {
     const { def, elm } = vm;
     const { bridge } = def;
     if (process.env.NODE_ENV !== 'production') {
-        assertInstanceOfHTMLElement$1(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
+        const { assertInstanceOfHTMLElement } = vm.renderer;
+        assertInstanceOfHTMLElement(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
     }
     const component = this;
     setPrototypeOf(elm, bridge.prototype);
@@ -2058,8 +1929,8 @@ const LightningElement = function () {
     return this;
 };
 function doAttachShadow(vm) {
-    const { elm, mode, shadowMode, def: { ctor }, } = vm;
-    const shadowRoot = attachShadow$1(elm, {
+    const { elm, mode, shadowMode, def: { ctor }, renderer: { attachShadow }, } = vm;
+    const shadowRoot = attachShadow(elm, {
         [KEY__SYNTHETIC_MODE]: shadowMode === 1 /* Synthetic */,
         delegatesFocus: Boolean(ctor.delegatesFocus),
         mode,
@@ -2080,12 +1951,13 @@ function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
 LightningElement.prototype = {
     constructor: LightningElement,
     dispatchEvent(event) {
-        const { elm } = getAssociatedVM(this);
-        return dispatchEvent$1(elm, event);
+        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();
             assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
@@ -2093,83 +1965,91 @@ LightningElement.prototype = {
             assert.invariant(isFunction$1(listener), `Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
         }
         const wrappedListener = getWrappedComponentsListener(vm, listener);
-        addEventListener$1(elm, type, wrappedListener, options);
+        addEventListener(elm, type, wrappedListener, options);
     },
     removeEventListener(type, listener, options) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { removeEventListener }, } = vm;
         const wrappedListener = getWrappedComponentsListener(vm, listener);
-        removeEventListener$1(elm, type, wrappedListener, options);
+        removeEventListener(elm, type, wrappedListener, options);
     },
     hasAttribute(name) {
-        const { elm } = getAssociatedVM(this);
-        return !isNull(getAttribute$1(elm, name));
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getAttribute }, } = vm;
+        return !isNull(getAttribute(elm, name));
     },
     hasAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
-        return !isNull(getAttribute$1(elm, name, namespace));
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getAttribute }, } = vm;
+        return !isNull(getAttribute(elm, name, namespace));
     },
     removeAttribute(name) {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { removeAttribute }, } = vm;
         unlockAttribute(elm, name);
-        removeAttribute$1(elm, name);
+        removeAttribute(elm, name);
         lockAttribute();
     },
     removeAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
+        const { elm, renderer: { removeAttribute }, } = getAssociatedVM(this);
         unlockAttribute(elm, name);
-        removeAttribute$1(elm, name, namespace);
+        removeAttribute(elm, name, namespace);
         lockAttribute();
     },
     getAttribute(name) {
-        const { elm } = getAssociatedVM(this);
-        return getAttribute$1(elm, name);
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
+        return getAttribute(elm, name);
     },
     getAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
-        return getAttribute$1(elm, name, namespace);
+        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') {
             assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
         }
         unlockAttribute(elm, name);
-        setAttribute$1(elm, name, value);
+        setAttribute(elm, name, value);
         lockAttribute();
     },
     setAttributeNS(namespace, name, value) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { setAttribute }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
         }
         unlockAttribute(elm, name);
-        setAttribute$1(elm, name, value, namespace);
+        setAttribute(elm, name, value, namespace);
         lockAttribute();
     },
     getBoundingClientRect() {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { getBoundingClientRect }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect()');
         }
-        return getBoundingClientRect$1(elm);
+        return getBoundingClientRect(elm);
     },
     get isConnected() {
-        const { elm } = getAssociatedVM(this);
-        return isConnected$1(elm);
+        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
             assert.isFalse(isBeingConstructed(vm), `Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
         }
-        return getClassList$1(elm);
+        return getClassList(elm);
     },
     get template() {
         const vm = getAssociatedVM(this);
@@ -2185,6 +2065,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;
@@ -2195,76 +2123,22 @@ LightningElement.prototype = {
     },
 };
 const queryAndChildGetterDescriptors = 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$1;
-        case 'childNodes':
-            return getChildNodes$1;
-        case 'firstChild':
-            return getFirstChild$1;
-        case 'firstElementChild':
-            return getFirstElementChild$1;
-        case 'lastChild':
-            return getLastChild$1;
-        case 'lastElementChild':
-            return getLastElementChild$1;
-    }
-}
-// 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$1;
-        case 'getElementsByTagName':
-            return getElementsByTagName$1;
-        case 'querySelector':
-            return querySelector$1;
-        case 'querySelectorAll':
-            return querySelectorAll$1;
-    }
-}
 // 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,
@@ -3488,12 +3362,13 @@ 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
     tagName = tagName.toLowerCase();
-    let CE = getCustomElement$1(tagName);
+    let CE = getCustomElement(tagName);
     if (!isUndefined$1(CE)) {
         return CE;
     }
@@ -3501,7 +3376,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$1 {
+    CE = class LWCUpgradableElement extends RendererHTMLElement {
         constructor(upgradeCallback) {
             super();
             if (isFunction$1(upgradeCallback)) {
@@ -3509,7 +3384,7 @@ function getUpgradableConstructor(tagName) {
             }
         }
     };
-    defineCustomElement$1(tagName, CE);
+    defineCustomElement(tagName, CE);
     return CE;
 }
 
@@ -3534,7 +3409,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 (isUndefined$1(attrs)) {
         return;
@@ -3544,6 +3419,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];
@@ -3551,17 +3427,17 @@ function patchAttributes(oldVnode, vnode) {
             unlockAttribute(elm, key);
             if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
                 // Assume xml namespace
-                setAttribute$1(elm, key, cur, XML_NAMESPACE);
+                setAttribute(elm, key, cur, XML_NAMESPACE);
             }
             else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
                 // Assume xlink namespace
-                setAttribute$1(elm, key, cur, XLINK_NAMESPACE);
+                setAttribute(elm, key, cur, XLINK_NAMESPACE);
             }
             else if (isNull(cur) || isUndefined$1(cur)) {
-                removeAttribute$1(elm, key);
+                removeAttribute(elm, key);
             }
             else {
-                setAttribute$1(elm, key, cur);
+                setAttribute(elm, key, cur);
             }
             lockAttribute();
         }
@@ -3579,7 +3455,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 (isUndefined$1(props)) {
         return;
@@ -3590,13 +3466,14 @@ function patchProps(oldVnode, vnode) {
     }
     const isFirstPatch = 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
         // different than the one previously set.
         if (isFirstPatch ||
-            cur !== (isLiveBindingProp(sel, key) ? getProperty$1(elm, key) : oldProps[key])) {
-            setProperty$1(elm, key, cur);
+            cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
+            setProperty(elm, key, cur);
         }
     }
 }
@@ -3641,13 +3518,14 @@ function getMapFromClassName(className) {
     }
     return map;
 }
-function patchClassAttribute(oldVnode, vnode) {
+function patchClassAttribute(oldVnode, vnode, renderer) {
     const { elm, data: { className: newClass }, } = vnode;
     const oldClass = isNull(oldVnode) ? undefined : oldVnode.data.className;
     if (oldClass === newClass) {
         return;
     }
-    const classList = getClassList$1(elm);
+    const { getClassList } = renderer;
+    const classList = getClassList(elm);
     const newClassMap = getMapFromClassName(newClass);
     const oldClassMap = getMapFromClassName(oldClass);
     let name;
@@ -3671,17 +3549,18 @@ 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 = isNull(oldVnode) ? undefined : oldVnode.data.style;
     if (oldStyle === newStyle) {
         return;
     }
+    const { setAttribute, removeAttribute } = renderer;
     if (!isString(newStyle) || newStyle === '') {
-        removeAttribute$1(elm, 'style');
+        removeAttribute(elm, 'style');
     }
     else {
-        setAttribute$1(elm, 'style', newStyle);
+        setAttribute(elm, 'style', newStyle);
     }
 }
 
@@ -3691,14 +3570,15 @@ 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 (isUndefined$1(on)) {
         return;
     }
+    const { addEventListener } = renderer;
     for (const name in on) {
         const handler = on[name];
-        addEventListener$1(elm, name, handler);
+        addEventListener(elm, name, handler);
     }
 }
 
@@ -3711,12 +3591,13 @@ 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 (isUndefined$1(classMap)) {
         return;
     }
-    const classList = getClassList$1(elm);
+    const { getClassList } = renderer;
+    const classList = getClassList(elm);
     for (const name in classMap) {
         classList.add(name);
     }
@@ -3731,14 +3612,15 @@ 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 (isUndefined$1(styleDecls)) {
         return;
     }
+    const { setCSSStyleProperty } = renderer;
     for (let i = 0; i < styleDecls.length; i++) {
         const [prop, value, important] = styleDecls[i];
-        setCSSStyleProperty$1(elm, prop, value, important);
+        setCSSStyleProperty(elm, prop, value, important);
     }
 }
 
@@ -3748,15 +3630,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;
     }
@@ -3770,80 +3653,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$1(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$1(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 = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = createElement$2(sel, namespace);
-    linkNodeToShadow(elm, owner);
-    fallbackElmHook(elm, vnode);
+    const elm = createElement(sel, namespace);
+    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[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
@@ -3853,9 +3771,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) {
@@ -3864,23 +3782,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') {
             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 (!isUndefined$1(vm)) {
         // in fallback mode, the allocation will always set children to
         // empty and delegate the real allocation to the slot elements
@@ -3888,34 +3806,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 (!isUndefined$1(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 */: {
@@ -3928,11 +3848,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);
         }
     }
 }
@@ -3946,66 +3866,71 @@ 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 (!isUndefined$1(token) && context.hasScopedStyles) {
-        getClassList$1(elm).add(token);
+        // 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$1) {
+    if (isSyntheticShadowDefined) {
         if (shadowMode === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
             elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
         }
     }
 }
-function updateTextContent(vnode) {
+function updateTextContent(vnode, renderer) {
     const { elm, text } = vnode;
+    const { setText } = renderer;
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
     }
-    setText$1(elm, text);
+    setText(elm, text);
     if (process.env.NODE_ENV !== 'production') {
         lockDomMutation();
     }
 }
-function insertNode(node, parent, anchor) {
+function insertNode(node, parent, anchor, renderer) {
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
     }
-    insert$1(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$1(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 (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;
@@ -4053,7 +3978,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
@@ -4062,7 +3987,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
@@ -4071,7 +3996,7 @@ function createViewModelHook(elm, vnode) {
             setElementShadowToken(elm, stylesheetToken);
         }
     }
-    vm = createVM(elm, ctor, {
+    vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
         tagName: sel,
@@ -4146,7 +4071,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;
@@ -4175,26 +4100,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$1(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];
         }
@@ -4205,7 +4130,7 @@ function updateDynamicChildren(oldCh, newCh, parent) {
             idxInOld = oldKeyToIdx[newStartVnode.key];
             if (isUndefined$1(idxInOld)) {
                 // New element
-                mount(newStartVnode, parent, oldStartVnode.elm);
+                mount(newStartVnode, parent, renderer, oldStartVnode.elm);
                 newStartVnode = newCh[++newStartIdx];
             }
             else {
@@ -4213,10 +4138,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.
@@ -4228,7 +4153,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];
@@ -4245,25 +4170,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
@@ -4276,16 +4201,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;
             }
         }
@@ -4302,6 +4227,17 @@ const SymbolIterator = Symbol.iterator;
 function addVNodeToChildLWC(vnode) {
     ArrayPush$1.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();
@@ -4691,6 +4627,7 @@ const api = freeze({
     co,
     dc,
     ti,
+    st,
     gid,
     fid,
     shc,
@@ -4714,7 +4651,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;
@@ -4725,10 +4662,10 @@ function updateStylesheetToken(vm, template) {
     const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
     if (!isUndefined$1(oldToken)) {
         if (oldHasTokenInClass) {
-            getClassList$1(elm).remove(makeHostToken(oldToken));
+            getClassList(elm).remove(makeHostToken(oldToken));
         }
         if (oldHasTokenInAttribute) {
-            removeAttribute$1(elm, makeHostToken(oldToken));
+            removeAttribute(elm, makeHostToken(oldToken));
         }
     }
     // Apply the new template styling token to the host element, if the new template has any
@@ -4739,11 +4676,11 @@ function updateStylesheetToken(vm, template) {
     // Set the new styling token on the host element
     if (!isUndefined$1(newToken)) {
         if (hasScopedStyles) {
-            getClassList$1(elm).add(makeHostToken(newToken));
+            getClassList(elm).add(makeHostToken(newToken));
             newHasTokenInClass = true;
         }
         if (isSyntheticShadow) {
-            setAttribute$1(elm, makeHostToken(newToken), '');
+            setAttribute(elm, makeHostToken(newToken), '');
             newHasTokenInAttribute = true;
         }
     }
@@ -4831,19 +4768,18 @@ 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$1(stylesheets[i]);
+            insertStylesheet(stylesheets[i]);
         }
     }
-    else if (ssr$1 || vm.hydrated) {
+    else if (ssr || vm.hydrated) {
         // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
         //       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 = ArrayJoin.call(stylesheets, '\n');
-        return createInlineStyleVNode(combinedStylesheetContent);
+        return ArrayMap.call(stylesheets, createInlineStyleVNode);
     }
     else {
         // native shadow or light DOM, DOM renderer
@@ -4851,7 +4787,7 @@ function createStylesheet(vm, stylesheets) {
         // null root means a global style
         const target = isNull(root) ? undefined : root.shadowRoot;
         for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet$1(stylesheets[i], target);
+            insertStylesheet(stylesheets[i], target);
         }
     }
     return null;
@@ -5011,6 +4947,59 @@ function validateLightDomTemplate(template, vm) {
         assert.isTrue(isUndefined$1(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 = create(null);
+        return function () {
+            const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
+            const hasStyleToken = !isUndefined$1(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 (!isUndefined$1(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') {
         assert.isTrue(isFunction$1(html), `evaluateTemplate() second argument must be an imported template instead of ${toString$1(html)}`);
@@ -5057,7 +5046,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);
@@ -5074,9 +5063,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 (!isNull(styleVNode)) {
-                ArrayUnshift.call(vnodes, styleVNode);
+            const { styleVNodes } = context;
+            if (!isNull(styleVNodes)) {
+                ArrayUnshift.apply(vnodes, styleVNodes);
             }
         });
     }, () => {
@@ -5406,7 +5395,7 @@ function getNearestShadowAncestor(vm) {
   return ancestor;
 }
 
-function createVM(elm, ctor, options) {
+function createVM(elm, ctor, renderer, options) {
   const {
     mode,
     owner,
@@ -5441,7 +5430,7 @@ function createVM(elm, ctor, options) {
       hasTokenInClass: undefined,
       hasTokenInAttribute: undefined,
       hasScopedStyles: undefined,
-      styleVNode: null,
+      styleVNodes: null,
       tplCache: EmptyObject,
       wiredConnecting: EmptyArray,
       wiredDisconnecting: EmptyArray
@@ -5455,9 +5444,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') {
@@ -5482,13 +5472,17 @@ 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$1) {
+  if (isSyntheticShadowDefined) {
     if (def.renderMode === 0
     /* Light */
     ) {
@@ -5497,7 +5491,7 @@ function computeShadowMode(vm) {
       shadowMode = 0
       /* Native */
       ;
-    } else if (isNativeShadowDefined$1) {
+    } else if (isNativeShadowDefined) {
       // Not combined with above condition because @lwc/features only supports identifiers in
       // the if-condition.
       if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
@@ -5587,7 +5581,8 @@ function rehydrate(vm) {
 function patchShadowRoot(vm, newCh) {
   const {
     renderRoot,
-    children: oldCh
+    children: oldCh,
+    renderer
   } = vm; // caching the new children collection
 
   vm.children = newCh;
@@ -5603,7 +5598,7 @@ function patchShadowRoot(vm, newCh) {
         , vm);
       }, () => {
         // job
-        patchChildren(oldCh, newCh, renderRoot);
+        patchChildren(oldCh, newCh, renderRoot, renderer);
       }, () => {
         // post
         logOperationEnd(2
@@ -5628,10 +5623,13 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
+    },
+    renderer: {
+      ssr
     }
   } = vm;
 
-  if (isTrue(ssr$1)) {
+  if (isTrue(ssr)) {
     return;
   }
 
@@ -5865,14 +5863,17 @@ function recursivelyDisconnectChildren(vnodes) {
 function resetComponentRoot(vm) {
   const {
     children,
-    renderRoot
+    renderRoot,
+    renderer: {
+      remove
+    }
   } = vm;
 
   for (let i = 0, len = children.length; i < len; i++) {
     const child = children[i];
 
     if (!isNull(child) && !isUndefined$1(child.elm)) {
-      remove$1(child.elm, renderRoot);
+      remove(child.elm, renderRoot);
     }
   }
 
@@ -5881,7 +5882,13 @@ function resetComponentRoot(vm) {
   vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
-  if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
+  const {
+    renderer: {
+      ssr
+    }
+  } = vm;
+
+  if (isTrue(ssr) || isTrue(vm.isScheduled)) {
     return;
   }
 
@@ -6057,6 +6064,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
 
@@ -6080,7 +6090,7 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
       }
 
     });
-    dispatchEvent$1(elm, contextRegistrationEvent);
+    dispatchEvent(elm, contextRegistrationEvent);
   });
 }
 
@@ -6328,95 +6338,116 @@ function hydrateRoot(vm) {
 function hydrateVM(vm) {
     const children = renderComponent(vm);
     vm.children = children;
-    const parentNode = vm.renderRoot;
-    hydrateChildren(getFirstChild$1(parentNode), children, parentNode, vm);
+    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$1(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 nodeValue = getProperty$1(node, 'nodeValue');
+        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);
         }
     }
-    setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    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 nodeValue = getProperty$1(node, 'nodeValue');
+        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);
         }
     }
-    setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    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(!isUndefined$1(context) && !isUndefined$1(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 (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-            if (getProperty$1(elm, 'innerHTML') === props.innerHTML) {
+            if (getProperty(elm, 'innerHTML') === props.innerHTML) {
                 // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
                 vnode.data = Object.assign(Object.assign({}, vnode.data), { props: cloneAndOmitKey(props, 'innerHTML') });
             }
             else {
                 if (process.env.NODE_ENV !== 'production') {
-                    logWarn(`Mismatch hydrating element <${getProperty$1(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$1(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,
@@ -6425,16 +6456,17 @@ 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') {
         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$1(elm), vnode.children, elm, vm);
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, vm);
     }
     hydrateVM(vm);
     return elm;
@@ -6443,11 +6475,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 (!isNull(childVnode)) {
             if (nextNode) {
-                nextNode = hydrateNode(nextNode, childVnode);
+                nextNode = hydrateNode(nextNode, childVnode, renderer);
                 anchor = childVnode.elm;
             }
             else {
@@ -6458,7 +6491,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;
             }
         }
@@ -6470,31 +6503,33 @@ 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$1(nextNode);
-            removeNode(current, parentNode);
+            nextNode = nextSibling(nextNode);
+            removeNode(current, parentNode, renderer);
         } while (nextNode);
     }
 }
-function handleMismatch(node, vnode, msg) {
+function handleMismatch(node, vnode, renderer) {
     hasMismatch = true;
-    if (!isUndefined$1(msg)) {
-        if (process.env.NODE_ENV !== 'production') {
-            logError(msg, vnode.owner);
-        }
-    }
-    const parentNode = getProperty$1(node, 'parentNode');
-    mount(vnode, parentNode, node);
-    removeNode(node, parentNode);
+    const { getProperty } = renderer;
+    const parentNode = getProperty(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) {
-    if (getProperty$1(node, 'nodeType') !== 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);
         }
@@ -6502,46 +6537,51 @@ function hasCorrectNodeType(vnode, node, nodeType) {
     }
     return true;
 }
-function isMatchingElement(vnode, elm) {
-    if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
+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$1(elm, 'tagName').toLowerCase()}".`, vnode.owner);
+            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 elmAttrValue = getAttribute$1(elm, attrName);
+        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$1(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 (!isUndefined$1(className) && String(className) !== getProperty$1(elm, 'className')) {
+    if (!isUndefined$1(className) && String(className) !== getProperty(elm, 'className')) {
         // className is used when class is bound to an expr.
         nodesAreCompatible = false;
         vnodeClassName = className;
     }
     else if (!isUndefined$1(classMap)) {
         // classMap is used when class is set to static value.
-        const classList = getClassList$1(elm);
+        const classList = getClassList(elm);
         let computedClassName = '';
         // all classes from the vnode should be in the element.classList
         for (const name in classMap) {
@@ -6557,14 +6597,15 @@ function validateClassAttr(vnode, elm) {
     }
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty$1(elm, 'className')}"`, vnode.owner);
+            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty(elm, 'className')}"`, vnode.owner);
         }
     }
     return nodesAreCompatible;
 }
-function validateStyleAttr(vnode, elm) {
+function validateStyleAttr(vnode, elm, renderer) {
     const { data: { style, styleDecls }, } = vnode;
-    const elmStyle = getAttribute$1(elm, 'style') || '';
+    const { getAttribute } = renderer;
+    const elmStyle = getAttribute(elm, 'style') || '';
     let vnodeStyle;
     let nodesAreCompatible = true;
     if (!isUndefined$1(style) && style !== elmStyle) {
@@ -6596,11 +6637,45 @@ function validateStyleAttr(vnode, elm) {
     }
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
+            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.
@@ -6736,7 +6811,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.14.1 */
+/* version: 2.16.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6895,7 +6970,7 @@ function isCustomElementRegistryAvailable() {
     try {
         // dereference HTMLElement global because babel wraps globals in compat mode with a
         // _wrapNativeSuper()
-        // This is a problem because LWCUpgradableElement extends renderer.HTMLElement which does not
+        // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
         // get wrapped by babel.
         const HTMLElementAlias = HTMLElement;
         // In case we use compat mode with a modern browser, the compat mode transformation
@@ -6949,8 +7024,17 @@ function setIsHydrating(value) {
     hydrating = value;
 }
 const ssr = false;
+function isHydrating() {
+    return hydrating;
+}
 const isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
 const isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
+function cloneNode(node, deep) {
+    return node.cloneNode(deep);
+}
+function createFragment(html) {
+    return document.createRange().createContextualFragment(html).firstChild;
+}
 function createElement$1(tagName, namespace) {
     return isUndefined$1(namespace)
         ? document.createElement(tagName)
@@ -7067,76 +7151,49 @@ function assertInstanceOfHTMLElement(elm, msg) {
     assert.invariant(elm instanceof HTMLElement, msg);
 }
 const HTMLElementExported = HTMLElementConstructor;
-
-/*
- * Copyright (c) 2020, 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
- */
-setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElement);
-setAttachShadow(attachShadow);
-setCreateComment(createComment);
-setCreateElement(createElement$1);
-setCreateText(createText);
-setDefineCustomElement(defineCustomElement);
-setDispatchEvent(dispatchEvent);
-setGetAttribute(getAttribute);
-setGetBoundingClientRect(getBoundingClientRect);
-setGetChildNodes(getChildNodes);
-setGetChildren(getChildren);
-setGetClassList(getClassList);
-setGetCustomElement(getCustomElement);
-setGetElementsByClassName(getElementsByClassName);
-setGetElementsByTagName(getElementsByTagName);
-setGetFirstChild(getFirstChild);
-setGetFirstElementChild(getFirstElementChild);
-setGetLastChild(getLastChild);
-setGetLastElementChild(getLastElementChild);
-setGetProperty(getProperty);
-setHTMLElement(HTMLElementExported);
-setInsert(insert);
-setIsConnected(isConnected);
-setIsNativeShadowDefined(isNativeShadowDefined);
-setIsSyntheticShadowDefined(isSyntheticShadowDefined);
-setNextSibling(nextSibling);
-setQuerySelector(querySelector);
-setQuerySelectorAll(querySelectorAll);
-setRemove(remove);
-setRemoveAttribute(removeAttribute);
-setRemoveEventListener(removeEventListener);
-setSetAttribute(setAttribute);
-setSetCSSStyleProperty(setCSSStyleProperty);
-setSetProperty(setProperty);
-setSetText(setText);
-setSsr(ssr);
-setAddEventListener(addEventListener);
-setInsertStylesheet(insertStylesheet);
-
-/*
- * 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
- */
-// @ts-ignore
-
-if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
-  window.addEventListener('test-dummy-flag', () => {
-    let hasFlag = false;
-
-    if (runtimeFlags.DUMMY_TEST_FLAG) {
-      hasFlag = true;
-    }
-
-    window.dispatchEvent(new CustomEvent('has-dummy-flag', {
-      detail: {
-        package: '@lwc/engine-dom',
-        hasFlag
-      }
-    }));
-  });
-}
+const renderer = {
+    ssr,
+    isNativeShadowDefined,
+    isSyntheticShadowDefined,
+    HTMLElementExported,
+    isHydrating,
+    insert,
+    remove,
+    cloneNode,
+    createFragment,
+    createElement: createElement$1,
+    createText,
+    createComment,
+    nextSibling,
+    attachShadow,
+    getProperty,
+    setProperty,
+    setText,
+    getAttribute,
+    setAttribute,
+    removeAttribute,
+    addEventListener,
+    removeEventListener,
+    dispatchEvent,
+    getClassList,
+    setCSSStyleProperty,
+    getBoundingClientRect,
+    querySelector,
+    querySelectorAll,
+    getElementsByTagName,
+    getElementsByClassName,
+    getChildren,
+    getChildNodes,
+    getFirstChild,
+    getFirstElementChild,
+    getLastChild,
+    getLastElementChild,
+    isConnected,
+    insertStylesheet,
+    assertInstanceOfHTMLElement,
+    defineCustomElement,
+    getCustomElement,
+};
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7158,7 +7215,7 @@ function resetShadowRootAndLightDom(element, Ctor) {
     }
 }
 function createVMWithProps(element, Ctor, props) {
-    const vm = createVM(element, Ctor, {
+    const vm = createVM(element, Ctor, renderer, {
         mode: 'open',
         owner: null,
         tagName: element.tagName.toLowerCase(),
@@ -7254,7 +7311,7 @@ function buildCustomElementConstructor(Ctor) {
                 hydratedCustomElements.add(this);
             }
             else {
-                createVM(this, Ctor, {
+                createVM(this, Ctor, renderer, {
                     mode: 'open',
                     owner: null,
                     tagName: this.tagName,
@@ -7339,7 +7396,7 @@ function createElement(sel, options) {
     if (!isFunction$1(Ctor)) {
         throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
     }
-    const UpgradableConstructor = getUpgradableConstructor(sel);
+    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
     let wasComponentUpgraded = false;
     // the custom element from the registry is expecting an upgrade callback
     /**
@@ -7349,7 +7406,7 @@ function createElement(sel, options) {
      * an upgradable custom element.
      */
     const element = new UpgradableConstructor((elm) => {
-        createVM(elm, Ctor, {
+        createVM(elm, Ctor, renderer, {
             tagName: sel,
             mode: options.mode !== 'closed' ? 'open' : 'closed',
             owner: null,
@@ -7433,6 +7490,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.14.1 */
+/* version: 2.16.0 */
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };