lwc 2.13.4 → 2.14.2

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

@@ -298,9 +298,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.13.4";
+const LWC_VERSION = "2.14.2";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.13.4 */
+/** version: 2.14.2 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -454,7 +454,32 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.13.4 */
+/** version: 2.14.2 */
+
+/*
+ * 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 +589,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 +1893,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 +1928,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 +1950,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 +1964,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 +2064,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 +2122,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,
@@ -2769,7 +2642,8 @@ function getDecoratorsMeta(Ctor) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 let warned = false;
-if (process.env.NODE_ENV === 'development') {
+// @ts-ignore
+if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
     // @ts-ignore
     window.__lwcResetWarnedOnVersionMismatch = () => {
         warned = false;
@@ -3487,12 +3361,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;
     }
@@ -3500,7 +3375,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)) {
@@ -3508,7 +3383,7 @@ function getUpgradableConstructor(tagName) {
             }
         }
     };
-    defineCustomElement$1(tagName, CE);
+    defineCustomElement(tagName, CE);
     return CE;
 }
 
@@ -3533,7 +3408,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;
@@ -3543,6 +3418,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];
@@ -3550,17 +3426,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();
         }
@@ -3578,7 +3454,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;
@@ -3589,13 +3465,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);
         }
     }
 }
@@ -3640,13 +3517,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;
@@ -3670,17 +3548,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);
     }
 }
 
@@ -3690,14 +3569,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);
     }
 }
 
@@ -3710,12 +3590,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);
     }
@@ -3730,14 +3611,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);
     }
 }
 
@@ -3747,15 +3629,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;
     }
@@ -3769,80 +3652,90 @@ 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 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 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 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
@@ -3852,9 +3745,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) {
@@ -3863,23 +3756,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
@@ -3887,33 +3780,38 @@ 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);
     }
-    const removeChildren = sel === 'slot'; // slot content is removed to trigger slotchange event when removing slot
     switch (type) {
-        case 2 /* Element */:
-            unmountVNodes(vnode.children, elm, removeChildren);
+        case 2 /* Element */: {
+            // Slot content is removed to trigger slotchange event when removing slot.
+            // Only required for synthetic shadow.
+            const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* Synthetic */;
+            unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
             break;
+        }
         case 3 /* CustomElement */: {
             const { vm } = vnode;
             // No need to unmount the children here, `removeVM` will take care of removing the
@@ -3924,11 +3822,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);
         }
     }
 }
@@ -3942,66 +3840,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;
@@ -4049,7 +3952,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
@@ -4058,7 +3961,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
@@ -4067,7 +3970,7 @@ function createViewModelHook(elm, vnode) {
             setElementShadowToken(elm, stylesheetToken);
         }
     }
-    vm = createVM(elm, ctor, {
+    vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
         tagName: sel,
@@ -4142,7 +4045,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;
@@ -4171,26 +4074,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];
         }
@@ -4201,7 +4104,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 {
@@ -4209,10 +4112,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.
@@ -4224,7 +4127,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];
@@ -4241,25 +4144,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
@@ -4272,16 +4175,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;
             }
         }
@@ -4710,7 +4613,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;
@@ -4721,10 +4624,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
@@ -4735,11 +4638,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;
         }
     }
@@ -4827,13 +4730,13 @@ 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.
@@ -4847,7 +4750,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;
@@ -5389,9 +5292,20 @@ function removeVM(vm) {
 
   resetComponentStateWhenRemoved(vm);
 }
-function createVM(elm, ctor, options) {
-  var _a;
 
+function getNearestShadowAncestor(vm) {
+  let ancestor = vm.owner;
+
+  while (!isNull(ancestor) && ancestor.renderMode === 0
+  /* Light */
+  ) {
+    ancestor = ancestor.owner;
+  }
+
+  return ancestor;
+}
+
+function createVM(elm, ctor, renderer, options) {
   const {
     mode,
     owner,
@@ -5421,8 +5335,6 @@ function createVM(elm, ctor, options) {
     cmpTemplate: null,
     hydrated: Boolean(hydrated),
     renderMode: def.renderMode,
-    shadowMode: computeShadowMode(def, owner),
-    nearestShadowMode: (owner === null || owner === void 0 ? void 0 : owner.shadowRoot) ? owner.shadowMode : (_a = owner === null || owner === void 0 ? void 0 : owner.nearestShadowMode) !== null && _a !== void 0 ? _a : null,
     context: {
       stylesheetToken: undefined,
       hasTokenInClass: undefined,
@@ -5435,14 +5347,17 @@ function createVM(elm, ctor, options) {
     },
     // Properties set right after VM creation.
     tro: null,
+    shadowMode: null,
     // Properties set by the LightningElement constructor.
     component: null,
     shadowRoot: null,
     renderRoot: null,
     callHook,
     setHook,
-    getHook
+    getHook,
+    renderer
   };
+  vm.shadowMode = computeShadowMode(vm, renderer);
   vm.tro = getTemplateReactiveObserver(vm);
 
   if (process.env.NODE_ENV !== 'production') {
@@ -5467,12 +5382,17 @@ function createVM(elm, ctor, options) {
   return vm;
 }
 
-function computeShadowMode(def, owner) {
-  var _a;
-
+function computeShadowMode(vm, renderer) {
+  const {
+    def
+  } = vm;
+  const {
+    isSyntheticShadowDefined,
+    isNativeShadowDefined
+  } = renderer;
   let shadowMode;
 
-  if (isSyntheticShadowDefined$1) {
+  if (isSyntheticShadowDefined) {
     if (def.renderMode === 0
     /* Light */
     ) {
@@ -5481,7 +5401,7 @@ function computeShadowMode(def, owner) {
       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) {
@@ -5492,13 +5412,23 @@ function computeShadowMode(def, owner) {
           /* Native */
           ;
         } else {
-          // Transitive support for native Shadow DOM. A component in native mode
-          // transitively opts all of its descendants into native.
-          // Synthetic if neither this component nor any of its ancestors are configured
-          // to be native.
-          shadowMode = (_a = owner === null || owner === void 0 ? void 0 : owner.nearestShadowMode) !== null && _a !== void 0 ? _a : 1
-          /* Synthetic */
-          ;
+          const shadowAncestor = getNearestShadowAncestor(vm);
+
+          if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
+          /* Native */
+          ) {
+            // Transitive support for native Shadow DOM. A component in native mode
+            // transitively opts all of its descendants into native.
+            shadowMode = 0
+            /* Native */
+            ;
+          } else {
+            // Synthetic if neither this component nor any of its ancestors are configured
+            // to be native.
+            shadowMode = 1
+            /* Synthetic */
+            ;
+          }
         }
       } else {
         shadowMode = 1
@@ -5561,7 +5491,8 @@ function rehydrate(vm) {
 function patchShadowRoot(vm, newCh) {
   const {
     renderRoot,
-    children: oldCh
+    children: oldCh,
+    renderer
   } = vm; // caching the new children collection
 
   vm.children = newCh;
@@ -5577,7 +5508,7 @@ function patchShadowRoot(vm, newCh) {
         , vm);
       }, () => {
         // job
-        patchChildren(oldCh, newCh, renderRoot);
+        patchChildren(oldCh, newCh, renderRoot, renderer);
       }, () => {
         // post
         logOperationEnd(2
@@ -5602,10 +5533,13 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
+    },
+    renderer: {
+      ssr
     }
   } = vm;
 
-  if (isTrue(ssr$1)) {
+  if (isTrue(ssr)) {
     return;
   }
 
@@ -5839,14 +5773,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);
     }
   }
 
@@ -5855,7 +5792,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;
   }
 
@@ -6031,6 +5974,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
 
@@ -6054,7 +6000,7 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
       }
 
     });
-    dispatchEvent$1(elm, contextRegistrationEvent);
+    dispatchEvent(elm, contextRegistrationEvent);
   });
 }
 
@@ -6302,95 +6248,105 @@ 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 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 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,
@@ -6399,16 +6355,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;
@@ -6417,11 +6374,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 {
@@ -6432,7 +6390,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;
             }
         }
@@ -6444,31 +6402,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);
         }
@@ -6476,46 +6436,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) {
@@ -6531,14 +6496,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) {
@@ -6570,7 +6536,8 @@ 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;
@@ -6710,7 +6677,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.13.4 */
+/* version: 2.14.2 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6869,7 +6836,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
@@ -6923,6 +6890,9 @@ 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 createElement$1(tagName, namespace) {
@@ -7041,76 +7011,47 @@ 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,
+    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.
@@ -7132,7 +7073,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(),
@@ -7228,7 +7169,7 @@ function buildCustomElementConstructor(Ctor) {
                 hydratedCustomElements.add(this);
             }
             else {
-                createVM(this, Ctor, {
+                createVM(this, Ctor, renderer, {
                     mode: 'open',
                     owner: null,
                     tagName: this.tagName,
@@ -7313,7 +7254,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
     /**
@@ -7323,7 +7264,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,
@@ -7407,6 +7348,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.13.4 */
+/* version: 2.14.2 */
 
-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, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };