lwc 2.14.1 → 2.16.0

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

@@ -233,6 +233,7 @@ var LWC = (function (exports) {
    */
   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$';
@@ -301,9 +302,9 @@ var LWC = (function (exports) {
    * 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.
@@ -457,7 +458,32 @@ var LWC = (function (exports) {
           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 */
 
@@ -567,162 +593,6 @@ var LWC = (function (exports) {
       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.
@@ -2027,7 +1897,8 @@ var LWC = (function (exports) {
       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);
@@ -2061,8 +1932,8 @@ var LWC = (function (exports) {
       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,
@@ -2083,12 +1954,13 @@ var LWC = (function (exports) {
   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}".`);
@@ -2096,83 +1968,91 @@ var LWC = (function (exports) {
               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);
@@ -2188,6 +2068,54 @@ var LWC = (function (exports) {
           // 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;
@@ -2198,76 +2126,22 @@ var LWC = (function (exports) {
       },
   };
   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,
@@ -3491,12 +3365,13 @@ var LWC = (function (exports) {
    * 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;
       }
@@ -3504,7 +3379,7 @@ var LWC = (function (exports) {
        * 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)) {
@@ -3512,7 +3387,7 @@ var LWC = (function (exports) {
               }
           }
       };
-      defineCustomElement$1(tagName, CE);
+      defineCustomElement(tagName, CE);
       return CE;
   }
 
@@ -3537,7 +3412,7 @@ var LWC = (function (exports) {
    * 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;
@@ -3547,6 +3422,7 @@ var LWC = (function (exports) {
           return;
       }
       const { elm } = vnode;
+      const { setAttribute, removeAttribute } = renderer;
       for (const key in attrs) {
           const cur = attrs[key];
           const old = oldAttrs[key];
@@ -3554,17 +3430,17 @@ var LWC = (function (exports) {
               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();
           }
@@ -3582,7 +3458,7 @@ var LWC = (function (exports) {
       // 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;
@@ -3593,13 +3469,14 @@ var LWC = (function (exports) {
       }
       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);
           }
       }
   }
@@ -3644,13 +3521,14 @@ var LWC = (function (exports) {
       }
       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;
@@ -3674,17 +3552,18 @@ var LWC = (function (exports) {
    * 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);
       }
   }
 
@@ -3694,14 +3573,15 @@ var LWC = (function (exports) {
    * 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);
       }
   }
 
@@ -3714,12 +3594,13 @@ var LWC = (function (exports) {
   // 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);
       }
@@ -3734,14 +3615,15 @@ var LWC = (function (exports) {
   // 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);
       }
   }
 
@@ -3751,15 +3633,16 @@ var LWC = (function (exports) {
    * 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;
       }
@@ -3773,80 +3656,115 @@ var LWC = (function (exports) {
       }
       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
@@ -3856,9 +3774,9 @@ var LWC = (function (exports) {
       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) {
@@ -3867,23 +3785,23 @@ var LWC = (function (exports) {
       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
@@ -3891,34 +3809,36 @@ var LWC = (function (exports) {
       }
       // 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 */: {
@@ -3931,11 +3851,11 @@ var LWC = (function (exports) {
           }
       }
   }
-  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);
           }
       }
   }
@@ -3949,66 +3869,71 @@ var LWC = (function (exports) {
       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;
@@ -4056,7 +3981,7 @@ var LWC = (function (exports) {
           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
@@ -4065,7 +3990,7 @@ var LWC = (function (exports) {
           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
@@ -4074,7 +3999,7 @@ var LWC = (function (exports) {
               setElementShadowToken(elm, stylesheetToken);
           }
       }
-      vm = createVM(elm, ctor, {
+      vm = createVM(elm, ctor, renderer, {
           mode,
           owner,
           tagName: sel,
@@ -4149,7 +4074,7 @@ var LWC = (function (exports) {
       }
       return map;
   }
-  function updateDynamicChildren(oldCh, newCh, parent) {
+  function updateDynamicChildren(oldCh, newCh, parent, renderer) {
       let oldStartIdx = 0;
       let newStartIdx = 0;
       let oldEndIdx = oldCh.length - 1;
@@ -4178,26 +4103,26 @@ var LWC = (function (exports) {
               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];
           }
@@ -4208,7 +4133,7 @@ var LWC = (function (exports) {
               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 {
@@ -4216,10 +4141,10 @@ var LWC = (function (exports) {
                   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.
@@ -4231,7 +4156,7 @@ var LWC = (function (exports) {
                           }
                           // 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];
@@ -4248,25 +4173,25 @@ var LWC = (function (exports) {
                   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
@@ -4279,16 +4204,16 @@ var LWC = (function (exports) {
               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;
               }
           }
@@ -4305,6 +4230,17 @@ var LWC = (function (exports) {
   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();
@@ -4694,6 +4630,7 @@ var LWC = (function (exports) {
       co,
       dc,
       ti,
+      st,
       gid,
       fid,
       shc,
@@ -4717,7 +4654,7 @@ var LWC = (function (exports) {
       }, [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;
@@ -4728,10 +4665,10 @@ var LWC = (function (exports) {
       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
@@ -4742,11 +4679,11 @@ var LWC = (function (exports) {
       // 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;
           }
       }
@@ -4834,19 +4771,18 @@ var LWC = (function (exports) {
       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
@@ -4854,7 +4790,7 @@ var LWC = (function (exports) {
           // 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;
@@ -5014,6 +4950,59 @@ var LWC = (function (exports) {
           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)}`);
@@ -5060,7 +5049,7 @@ var LWC = (function (exports) {
                   // 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);
@@ -5077,9 +5066,9 @@ var LWC = (function (exports) {
               // 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);
               }
           });
       }, () => {
@@ -5409,7 +5398,7 @@ var LWC = (function (exports) {
     return ancestor;
   }
 
-  function createVM(elm, ctor, options) {
+  function createVM(elm, ctor, renderer, options) {
     const {
       mode,
       owner,
@@ -5444,7 +5433,7 @@ var LWC = (function (exports) {
         hasTokenInClass: undefined,
         hasTokenInAttribute: undefined,
         hasScopedStyles: undefined,
-        styleVNode: null,
+        styleVNodes: null,
         tplCache: EmptyObject,
         wiredConnecting: EmptyArray,
         wiredDisconnecting: EmptyArray
@@ -5458,9 +5447,10 @@ var LWC = (function (exports) {
       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') {
@@ -5485,13 +5475,17 @@ var LWC = (function (exports) {
     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 */
       ) {
@@ -5500,7 +5494,7 @@ var LWC = (function (exports) {
         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) {
@@ -5590,7 +5584,8 @@ var LWC = (function (exports) {
   function patchShadowRoot(vm, newCh) {
     const {
       renderRoot,
-      children: oldCh
+      children: oldCh,
+      renderer
     } = vm; // caching the new children collection
 
     vm.children = newCh;
@@ -5606,7 +5601,7 @@ var LWC = (function (exports) {
           , vm);
         }, () => {
           // job
-          patchChildren(oldCh, newCh, renderRoot);
+          patchChildren(oldCh, newCh, renderRoot, renderer);
         }, () => {
           // post
           logOperationEnd(2
@@ -5631,10 +5626,13 @@ var LWC = (function (exports) {
     const {
       def: {
         renderedCallback
+      },
+      renderer: {
+        ssr
       }
     } = vm;
 
-    if (isTrue(ssr$1)) {
+    if (isTrue(ssr)) {
       return;
     }
 
@@ -5868,14 +5866,17 @@ var LWC = (function (exports) {
   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);
       }
     }
 
@@ -5884,7 +5885,13 @@ var LWC = (function (exports) {
     vm.velements = EmptyArray;
   }
   function scheduleRehydration(vm) {
-    if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
+    const {
+      renderer: {
+        ssr
+      }
+    } = vm;
+
+    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -6060,6 +6067,9 @@ var LWC = (function (exports) {
       context: {
         wiredConnecting,
         wiredDisconnecting
+      },
+      renderer: {
+        dispatchEvent
       }
     } = vm; // waiting for the component to be connected to formally request the context via the token
 
@@ -6083,7 +6093,7 @@ var LWC = (function (exports) {
         }
 
       });
-      dispatchEvent$1(elm, contextRegistrationEvent);
+      dispatchEvent(elm, contextRegistrationEvent);
     });
   }
 
@@ -6331,95 +6341,116 @@ var LWC = (function (exports) {
   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,
@@ -6428,16 +6459,17 @@ var LWC = (function (exports) {
       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;
@@ -6446,11 +6478,12 @@ var LWC = (function (exports) {
       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 {
@@ -6461,7 +6494,7 @@ var LWC = (function (exports) {
                           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;
               }
           }
@@ -6473,31 +6506,33 @@ var LWC = (function (exports) {
                   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);
           }
@@ -6505,46 +6540,51 @@ var LWC = (function (exports) {
       }
       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) {
@@ -6560,14 +6600,15 @@ var LWC = (function (exports) {
       }
       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) {
@@ -6599,11 +6640,45 @@ var LWC = (function (exports) {
       }
       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.
@@ -6739,7 +6814,7 @@ var LWC = (function (exports) {
       }
       return ctor;
   }
-  /* version: 2.14.1 */
+  /* version: 2.16.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6898,7 +6973,7 @@ var LWC = (function (exports) {
       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
@@ -6952,8 +7027,17 @@ var LWC = (function (exports) {
       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)
@@ -7070,76 +7154,49 @@ var LWC = (function (exports) {
       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.
@@ -7161,7 +7218,7 @@ var LWC = (function (exports) {
       }
   }
   function createVMWithProps(element, Ctor, props) {
-      const vm = createVM(element, Ctor, {
+      const vm = createVM(element, Ctor, renderer, {
           mode: 'open',
           owner: null,
           tagName: element.tagName.toLowerCase(),
@@ -7257,7 +7314,7 @@ var LWC = (function (exports) {
                   hydratedCustomElements.add(this);
               }
               else {
-                  createVM(this, Ctor, {
+                  createVM(this, Ctor, renderer, {
                       mode: 'open',
                       owner: null,
                       tagName: this.tagName,
@@ -7342,7 +7399,7 @@ var LWC = (function (exports) {
       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
       /**
@@ -7352,7 +7409,7 @@ var LWC = (function (exports) {
        * 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,
@@ -7436,7 +7493,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.14.1 */
+  /* version: 2.16.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -7450,11 +7507,14 @@ var LWC = (function (exports) {
   exports.hydrateComponent = hydrateComponent;
   exports.isComponentConstructor = isComponentConstructor;
   exports.isNodeFromTemplate = isNodeShadowed;
+  exports.parseFragment = parseFragment;
+  exports.parseSVGFragment = parseSVGFragment;
   exports.readonly = readonly;
   exports.register = register;
   exports.registerComponent = registerComponent;
   exports.registerDecorators = registerDecorators;
   exports.registerTemplate = registerTemplate;
+  exports.renderer = renderer;
   exports.sanitizeAttribute = sanitizeAttribute;
   exports.setFeatureFlag = setFeatureFlag;
   exports.setFeatureFlagForTest = setFeatureFlagForTest;