lwc 2.14.0 → 2.15.0

package/dist/engine-dom/umd/es5/engine-dom_debug.js

@@ -295,6 +295,7 @@
 
   var KEY__IS_NATIVE_SHADOW_ROOT_DEFINED = '$isNativeShadowRootDefined$';
   var KEY__SHADOW_RESOLVER = '$shadowResolver$';
+  var KEY__SHADOW_STATIC = '$shadowStaticNode$';
   var KEY__SHADOW_TOKEN = '$shadowToken$';
   var KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
   var KEY__SCOPED_CSS = '$scoped$';
@@ -350,7 +351,7 @@
   var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   var XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-  /** version: 2.14.0 */
+  /** version: 2.15.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -611,231 +612,6 @@
 
     return result;
   }
-  // Primitives
-  //
-
-
-  var ssr$1;
-
-  function setSsr(ssrImpl) {
-    ssr$1 = ssrImpl;
-  }
-
-  var isNativeShadowDefined$1;
-
-  function setIsNativeShadowDefined(isNativeShadowDefinedImpl) {
-    isNativeShadowDefined$1 = isNativeShadowDefinedImpl;
-  }
-
-  var isSyntheticShadowDefined$1;
-
-  function setIsSyntheticShadowDefined(isSyntheticShadowDefinedImpl) {
-    isSyntheticShadowDefined$1 = isSyntheticShadowDefinedImpl;
-  }
-
-  var HTMLElementExported$1;
-
-  function setHTMLElement(HTMLElementImpl) {
-    HTMLElementExported$1 = HTMLElementImpl;
-  }
-
-  var insert$1;
-
-  function setInsert(insertImpl) {
-    insert$1 = insertImpl;
-  }
-
-  var remove$1;
-
-  function setRemove(removeImpl) {
-    remove$1 = removeImpl;
-  }
-
-  var createElement$2;
-
-  function setCreateElement(createElementImpl) {
-    createElement$2 = createElementImpl;
-  }
-
-  var createText$1;
-
-  function setCreateText(createTextImpl) {
-    createText$1 = createTextImpl;
-  }
-
-  var createComment$1;
-
-  function setCreateComment(createCommentImpl) {
-    createComment$1 = createCommentImpl;
-  }
-
-  var nextSibling$1;
-
-  function setNextSibling(nextSiblingImpl) {
-    nextSibling$1 = nextSiblingImpl;
-  }
-
-  var attachShadow$1;
-
-  function setAttachShadow(attachShadowImpl) {
-    attachShadow$1 = attachShadowImpl;
-  }
-
-  var getProperty$1;
-
-  function setGetProperty(getPropertyImpl) {
-    getProperty$1 = getPropertyImpl;
-  }
-
-  var setProperty$1;
-
-  function setSetProperty(setPropertyImpl) {
-    setProperty$1 = setPropertyImpl;
-  }
-
-  var setText$1;
-
-  function setSetText(setTextImpl) {
-    setText$1 = setTextImpl;
-  }
-
-  var getAttribute$1;
-
-  function setGetAttribute(getAttributeImpl) {
-    getAttribute$1 = getAttributeImpl;
-  }
-
-  var setAttribute$1;
-
-  function setSetAttribute(setAttributeImpl) {
-    setAttribute$1 = setAttributeImpl;
-  }
-
-  var removeAttribute$1;
-
-  function setRemoveAttribute(removeAttributeImpl) {
-    removeAttribute$1 = removeAttributeImpl;
-  }
-
-  var addEventListener$1;
-
-  function setAddEventListener(addEventListenerImpl) {
-    addEventListener$1 = addEventListenerImpl;
-  }
-
-  var removeEventListener$1;
-
-  function setRemoveEventListener(removeEventListenerImpl) {
-    removeEventListener$1 = removeEventListenerImpl;
-  }
-
-  var dispatchEvent$1;
-
-  function setDispatchEvent(dispatchEventImpl) {
-    dispatchEvent$1 = dispatchEventImpl;
-  }
-
-  var getClassList$1;
-
-  function setGetClassList(getClassListImpl) {
-    getClassList$1 = getClassListImpl;
-  }
-
-  var setCSSStyleProperty$1;
-
-  function setSetCSSStyleProperty(setCSSStylePropertyImpl) {
-    setCSSStyleProperty$1 = setCSSStylePropertyImpl;
-  }
-
-  var getBoundingClientRect$1;
-
-  function setGetBoundingClientRect(getBoundingClientRectImpl) {
-    getBoundingClientRect$1 = getBoundingClientRectImpl;
-  }
-
-  var querySelector$1;
-
-  function setQuerySelector(querySelectorImpl) {
-    querySelector$1 = querySelectorImpl;
-  }
-
-  var querySelectorAll$1;
-
-  function setQuerySelectorAll(querySelectorAllImpl) {
-    querySelectorAll$1 = querySelectorAllImpl;
-  }
-
-  var getElementsByTagName$1;
-
-  function setGetElementsByTagName(getElementsByTagNameImpl) {
-    getElementsByTagName$1 = getElementsByTagNameImpl;
-  }
-
-  var getElementsByClassName$1;
-
-  function setGetElementsByClassName(getElementsByClassNameImpl) {
-    getElementsByClassName$1 = getElementsByClassNameImpl;
-  }
-
-  var getChildren$1;
-
-  function setGetChildren(getChildrenImpl) {
-    getChildren$1 = getChildrenImpl;
-  }
-
-  var getChildNodes$1;
-
-  function setGetChildNodes(getChildNodesImpl) {
-    getChildNodes$1 = getChildNodesImpl;
-  }
-
-  var getFirstChild$1;
-
-  function setGetFirstChild(getFirstChildImpl) {
-    getFirstChild$1 = getFirstChildImpl;
-  }
-
-  var getFirstElementChild$1;
-
-  function setGetFirstElementChild(getFirstElementChildImpl) {
-    getFirstElementChild$1 = getFirstElementChildImpl;
-  }
-
-  var getLastChild$1;
-
-  function setGetLastChild(getLastChildImpl) {
-    getLastChild$1 = getLastChildImpl;
-  }
-
-  var getLastElementChild$1;
-
-  function setGetLastElementChild(getLastElementChildImpl) {
-    getLastElementChild$1 = getLastElementChildImpl;
-  }
-
-  var isConnected$1;
-
-  function setIsConnected(isConnectedImpl) {
-    isConnected$1 = isConnectedImpl;
-  }
-
-  var insertStylesheet$1;
-
-  function setInsertStylesheet(insertStylesheetImpl) {
-    insertStylesheet$1 = insertStylesheetImpl;
-  }
-
-  var defineCustomElement$1;
-
-  function setDefineCustomElement(defineCustomElementImpl) {
-    defineCustomElement$1 = defineCustomElementImpl;
-  }
-
-  var getCustomElement$1;
-
-  function setGetCustomElement(getCustomElementImpl) {
-    getCustomElement$1 = getCustomElementImpl;
-  }
   /*
    * Copyright (c) 2019, salesforce.com, inc.
    * All rights reserved.
@@ -2013,13 +1789,14 @@
   };
 
   function doAttachShadow(vm) {
-    var _attachShadow$;
+    var _attachShadow;
 
     var elm = vm.elm,
         mode = vm.mode,
         shadowMode = vm.shadowMode,
-        ctor = vm.def.ctor;
-    var shadowRoot = attachShadow$1(elm, (_attachShadow$ = {}, _defineProperty(_attachShadow$, KEY__SYNTHETIC_MODE, shadowMode === 1), _defineProperty(_attachShadow$, "delegatesFocus", Boolean(ctor.delegatesFocus)), _defineProperty(_attachShadow$, "mode", mode), _attachShadow$));
+        ctor = vm.def.ctor,
+        attachShadow = vm.renderer.attachShadow;
+    var shadowRoot = attachShadow(elm, (_attachShadow = {}, _defineProperty(_attachShadow, KEY__SYNTHETIC_MODE, shadowMode === 1), _defineProperty(_attachShadow, "delegatesFocus", Boolean(ctor.delegatesFocus)), _defineProperty(_attachShadow, "mode", mode), _attachShadow));
     vm.shadowRoot = shadowRoot;
     associateVM(shadowRoot, vm);
 
@@ -2030,99 +1807,106 @@
   LightningElement.prototype = {
     constructor: LightningElement,
     dispatchEvent: function dispatchEvent(event) {
-      var _getAssociatedVM = getAssociatedVM(this),
-          elm = _getAssociatedVM.elm;
-
-      return dispatchEvent$1(elm, event);
+      var vm = getAssociatedVM(this);
+      var elm = vm.elm,
+          dispatchEvent = vm.renderer.dispatchEvent;
+      return dispatchEvent(elm, event);
     },
     addEventListener: function addEventListener(type, listener, options) {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm;
+      var elm = vm.elm,
+          addEventListener = vm.renderer.addEventListener;
 
       var wrappedListener = getWrappedComponentsListener(vm, listener);
-      addEventListener$1(elm, type, wrappedListener, options);
+      addEventListener(elm, type, wrappedListener, options);
     },
     removeEventListener: function removeEventListener(type, listener, options) {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm;
+      var elm = vm.elm,
+          removeEventListener = vm.renderer.removeEventListener;
       var wrappedListener = getWrappedComponentsListener(vm, listener);
-      removeEventListener$1(elm, type, wrappedListener, options);
+      removeEventListener(elm, type, wrappedListener, options);
     },
     hasAttribute: function hasAttribute(name) {
-      var _getAssociatedVM2 = getAssociatedVM(this),
-          elm = _getAssociatedVM2.elm;
-
-      return !isNull(getAttribute$1(elm, name));
+      var vm = getAssociatedVM(this);
+      var elm = vm.elm,
+          getAttribute = vm.renderer.getAttribute;
+      return !isNull(getAttribute(elm, name));
     },
     hasAttributeNS: function hasAttributeNS(namespace, name) {
-      var _getAssociatedVM3 = getAssociatedVM(this),
-          elm = _getAssociatedVM3.elm;
-
-      return !isNull(getAttribute$1(elm, name, namespace));
+      var vm = getAssociatedVM(this);
+      var elm = vm.elm,
+          getAttribute = vm.renderer.getAttribute;
+      return !isNull(getAttribute(elm, name, namespace));
     },
     removeAttribute: function removeAttribute(name) {
-      var _getAssociatedVM4 = getAssociatedVM(this),
-          elm = _getAssociatedVM4.elm;
-
+      var vm = getAssociatedVM(this);
+      var elm = vm.elm,
+          removeAttribute = vm.renderer.removeAttribute;
       unlockAttribute(elm, name);
-      removeAttribute$1(elm, name);
+      removeAttribute(elm, name);
       lockAttribute();
     },
     removeAttributeNS: function removeAttributeNS(namespace, name) {
-      var _getAssociatedVM5 = getAssociatedVM(this),
-          elm = _getAssociatedVM5.elm;
+      var _getAssociatedVM = getAssociatedVM(this),
+          elm = _getAssociatedVM.elm,
+          removeAttribute = _getAssociatedVM.renderer.removeAttribute;
 
       unlockAttribute(elm, name);
-      removeAttribute$1(elm, name, namespace);
+      removeAttribute(elm, name, namespace);
       lockAttribute();
     },
     getAttribute: function getAttribute(name) {
-      var _getAssociatedVM6 = getAssociatedVM(this),
-          elm = _getAssociatedVM6.elm;
-
-      return getAttribute$1(elm, name);
+      var vm = getAssociatedVM(this);
+      var elm = vm.elm;
+      var getAttribute = vm.renderer.getAttribute;
+      return getAttribute(elm, name);
     },
     getAttributeNS: function getAttributeNS(namespace, name) {
-      var _getAssociatedVM7 = getAssociatedVM(this),
-          elm = _getAssociatedVM7.elm;
-
-      return getAttribute$1(elm, name, namespace);
+      var vm = getAssociatedVM(this);
+      var elm = vm.elm;
+      var getAttribute = vm.renderer.getAttribute;
+      return getAttribute(elm, name, namespace);
     },
     setAttribute: function setAttribute(name, value) {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm;
+      var elm = vm.elm,
+          setAttribute = vm.renderer.setAttribute;
 
       unlockAttribute(elm, name);
-      setAttribute$1(elm, name, value);
+      setAttribute(elm, name, value);
       lockAttribute();
     },
     setAttributeNS: function setAttributeNS(namespace, name, value) {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm;
+      var elm = vm.elm,
+          setAttribute = vm.renderer.setAttribute;
 
       unlockAttribute(elm, name);
-      setAttribute$1(elm, name, value, namespace);
+      setAttribute(elm, name, value, namespace);
       lockAttribute();
     },
     getBoundingClientRect: function getBoundingClientRect() {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm;
+      var elm = vm.elm,
+          getBoundingClientRect = vm.renderer.getBoundingClientRect;
 
-      return getBoundingClientRect$1(elm);
+      return getBoundingClientRect(elm);
     },
 
     get isConnected() {
-      var _getAssociatedVM8 = getAssociatedVM(this),
-          elm = _getAssociatedVM8.elm;
-
-      return isConnected$1(elm);
+      var vm = getAssociatedVM(this);
+      var elm = vm.elm,
+          isConnected = vm.renderer.isConnected;
+      return isConnected(elm);
     },
 
     get classList() {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm;
+      var elm = vm.elm,
+          getClassList = vm.renderer.getClassList;
 
-      return getClassList$1(elm);
+      return getClassList(elm);
     },
 
     get template() {
@@ -2137,89 +1921,69 @@
       return null;
     },
 
-    render: function render() {
-      var vm = getAssociatedVM(this);
-      return vm.def.template;
-    },
-    toString: function toString() {
+    get children() {
       var vm = getAssociatedVM(this);
-      return "[object ".concat(vm.def.name, "]");
-    }
-  };
-  var 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.
+      var renderer = vm.renderer;
 
-  var 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;
+      return renderer.getChildren(vm.elm);
+    },
 
-      case 'lastChild':
-        return getLastChild$1;
+    get childNodes() {
+      var vm = getAssociatedVM(this);
+      var renderer = vm.renderer;
 
-      case 'lastElementChild':
-        return getLastElementChild$1;
-    }
-  } // Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
+      return renderer.getChildNodes(vm.elm);
+    },
 
+    get firstChild() {
+      var vm = getAssociatedVM(this);
+      var renderer = vm.renderer;
 
-  var _loop = function _loop() {
-    var childGetter = _childGetters[_i7];
-    queryAndChildGetterDescriptors[childGetter] = {
-      get: function get() {
-        var vm = getAssociatedVM(this);
-        var elm = vm.elm;
+      return renderer.getFirstChild(vm.elm);
+    },
 
-        return getChildGetter(childGetter)(elm);
-      },
-      configurable: true,
-      enumerable: true
-    };
-  };
+    get firstElementChild() {
+      var vm = getAssociatedVM(this);
+      var renderer = vm.renderer;
 
-  for (var _i7 = 0, _childGetters = childGetters; _i7 < _childGetters.length; _i7++) {
-    _loop();
-  }
+      return renderer.getFirstElementChild(vm.elm);
+    },
 
-  var queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll'];
+    get lastChild() {
+      var vm = getAssociatedVM(this);
+      var renderer = vm.renderer;
 
-  function getQueryMethod(methodName) {
-    switch (methodName) {
-      case 'getElementsByClassName':
-        return getElementsByClassName$1;
+      return renderer.getLastChild(vm.elm);
+    },
 
-      case 'getElementsByTagName':
-        return getElementsByTagName$1;
+    get lastElementChild() {
+      var vm = getAssociatedVM(this);
+      var renderer = vm.renderer;
 
-      case 'querySelector':
-        return querySelector$1;
+      return renderer.getLastElementChild(vm.elm);
+    },
 
-      case 'querySelectorAll':
-        return querySelectorAll$1;
+    render: function render() {
+      var vm = getAssociatedVM(this);
+      return vm.def.template;
+    },
+    toString: function toString() {
+      var vm = getAssociatedVM(this);
+      return "[object ".concat(vm.def.name, "]");
     }
-  } // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
-
+  };
+  var queryAndChildGetterDescriptors = create(null);
+  var queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll']; // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
 
-  var _loop2 = function _loop2() {
-    var queryMethod = _queryMethods[_i8];
+  var _loop = function _loop() {
+    var queryMethod = _queryMethods[_i7];
     queryAndChildGetterDescriptors[queryMethod] = {
       value: function value(arg) {
         var vm = getAssociatedVM(this);
-        var elm = vm.elm;
+        var elm = vm.elm,
+            renderer = vm.renderer;
 
-        return getQueryMethod(queryMethod)(elm, arg);
+        return renderer[queryMethod](elm, arg);
       },
       configurable: true,
       enumerable: true,
@@ -2227,8 +1991,8 @@
     };
   };
 
-  for (var _i8 = 0, _queryMethods = queryMethods; _i8 < _queryMethods.length; _i8++) {
-    _loop2();
+  for (var _i7 = 0, _queryMethods = queryMethods; _i7 < _queryMethods.length; _i7++) {
+    _loop();
   }
 
   defineProperties(LightningElement.prototype, queryAndChildGetterDescriptors);
@@ -2588,8 +2352,8 @@
     }
 
     if (!isUndefined$1(fields)) {
-      for (var _i9 = 0, n = fields.length; _i9 < n; _i9++) {
-        var _fieldName2 = fields[_i9];
+      for (var _i8 = 0, n = fields.length; _i8 < n; _i8++) {
+        var _fieldName2 = fields[_i8];
         descriptor = getOwnPropertyDescriptor$1(proto, _fieldName2);
         // tracked property. This is only here for backward compatibility purposes.
 
@@ -2843,8 +2607,8 @@
         superObservedAttributes = _SuperClass$observedA === void 0 ? [] : _SuperClass$observedA;
     var descriptors = create(null); // expose getters and setters for each public props on the new Element Bridge
 
-    for (var _i10 = 0, len = props.length; _i10 < len; _i10 += 1) {
-      var _propName = props[_i10];
+    for (var _i9 = 0, len = props.length; _i9 < len; _i9 += 1) {
+      var _propName = props[_i9];
       attributeToPropMap[htmlPropertyToAttribute(_propName)] = _propName;
       descriptors[_propName] = {
         get: createGetter(_propName),
@@ -2855,8 +2619,8 @@
     } // expose public methods as props on the new Element Bridge
 
 
-    for (var _i11 = 0, _len3 = methods.length; _i11 < _len3; _i11 += 1) {
-      var methodName = methods[_i11];
+    for (var _i10 = 0, _len3 = methods.length; _i10 < _len3; _i10 += 1) {
+      var methodName = methods[_i10];
       descriptors[methodName] = {
         value: createMethodCaller(methodName),
         writable: true,
@@ -3159,12 +2923,15 @@
    */
 
 
-  function getUpgradableConstructor(tagName) {
-    // Should never get a tag with upper case letter at this point, the compiler should
+  function getUpgradableConstructor(tagName, renderer) {
+    var getCustomElement = renderer.getCustomElement,
+        RendererHTMLElement = renderer.HTMLElementExported,
+        defineCustomElement = renderer.defineCustomElement; // 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();
-    var CE = getCustomElement$1(tagName);
+    var CE = getCustomElement(tagName);
 
     if (!isUndefined$1(CE)) {
       return CE;
@@ -3175,8 +2942,8 @@
      */
 
 
-    CE = /*#__PURE__*/function (_HTMLElementExported$) {
-      _inherits(LWCUpgradableElement, _HTMLElementExported$);
+    CE = /*#__PURE__*/function (_RendererHTMLElement) {
+      _inherits(LWCUpgradableElement, _RendererHTMLElement);
 
       var _super5 = _createSuper(LWCUpgradableElement);
 
@@ -3195,9 +2962,9 @@
       }
 
       return _createClass(LWCUpgradableElement);
-    }(HTMLElementExported$1);
+    }(RendererHTMLElement);
 
-    defineCustomElement$1(tagName, CE);
+    defineCustomElement(tagName, CE);
     return CE;
   }
   /*
@@ -3230,7 +2997,7 @@
 
   var ColonCharCode = 58;
 
-  function patchAttributes(oldVnode, vnode) {
+  function patchAttributes(oldVnode, vnode, renderer) {
     var attrs = vnode.data.attrs;
 
     if (isUndefined$1(attrs)) {
@@ -3244,6 +3011,8 @@
     }
 
     var elm = vnode.elm;
+    var setAttribute = renderer.setAttribute,
+        removeAttribute = renderer.removeAttribute;
 
     for (var key in attrs) {
       var cur = attrs[key];
@@ -3254,14 +3023,14 @@
 
         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();
@@ -3282,7 +3051,7 @@
     return sel === 'input' && (key === 'value' || key === 'checked');
   }
 
-  function patchProps(oldVnode, vnode) {
+  function patchProps(oldVnode, vnode, renderer) {
     var props = vnode.data.props;
 
     if (isUndefined$1(props)) {
@@ -3298,13 +3067,15 @@
     var isFirstPatch = isNull(oldVnode);
     var elm = vnode.elm,
         sel = vnode.sel;
+    var getProperty = renderer.getProperty,
+        setProperty = renderer.setProperty;
 
     for (var key in props) {
       var 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);
+      if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
+        setProperty(elm, key, cur);
       }
     }
   }
@@ -3356,7 +3127,7 @@
     return map;
   }
 
-  function patchClassAttribute(oldVnode, vnode) {
+  function patchClassAttribute(oldVnode, vnode, renderer) {
     var elm = vnode.elm,
         newClass = vnode.data.className;
     var oldClass = isNull(oldVnode) ? undefined : oldVnode.data.className;
@@ -3365,7 +3136,8 @@
       return;
     }
 
-    var classList = getClassList$1(elm);
+    var getClassList = renderer.getClassList;
+    var classList = getClassList(elm);
     var newClassMap = getMapFromClassName(newClass);
     var oldClassMap = getMapFromClassName(oldClass);
     var name;
@@ -3392,7 +3164,7 @@
   // The style property is a string when defined via an expression in the template.
 
 
-  function patchStyleAttribute(oldVnode, vnode) {
+  function patchStyleAttribute(oldVnode, vnode, renderer) {
     var elm = vnode.elm,
         newStyle = vnode.data.style;
     var oldStyle = isNull(oldVnode) ? undefined : oldVnode.data.style;
@@ -3401,10 +3173,13 @@
       return;
     }
 
+    var setAttribute = renderer.setAttribute,
+        removeAttribute = renderer.removeAttribute;
+
     if (!isString(newStyle) || newStyle === '') {
-      removeAttribute$1(elm, 'style');
+      removeAttribute(elm, 'style');
     } else {
-      setAttribute$1(elm, 'style', newStyle);
+      setAttribute(elm, 'style', newStyle);
     }
   }
   /*
@@ -3415,7 +3190,7 @@
    */
 
 
-  function applyEventListeners(vnode) {
+  function applyEventListeners(vnode, renderer) {
     var elm = vnode.elm,
         on = vnode.data.on;
 
@@ -3423,9 +3198,11 @@
       return;
     }
 
+    var addEventListener = renderer.addEventListener;
+
     for (var name in on) {
       var handler = on[name];
-      addEventListener$1(elm, name, handler);
+      addEventListener(elm, name, handler);
     }
   }
   /*
@@ -3439,7 +3216,7 @@
   // different classnames properties individually instead of via a string.
 
 
-  function applyStaticClassAttribute(vnode) {
+  function applyStaticClassAttribute(vnode, renderer) {
     var elm = vnode.elm,
         classMap = vnode.data.classMap;
 
@@ -3447,7 +3224,8 @@
       return;
     }
 
-    var classList = getClassList$1(elm);
+    var getClassList = renderer.getClassList;
+    var classList = getClassList(elm);
 
     for (var name in classMap) {
       classList.add(name);
@@ -3464,7 +3242,7 @@
   // different style properties individually instead of via a string.
 
 
-  function applyStaticStyleAttribute(vnode) {
+  function applyStaticStyleAttribute(vnode, renderer) {
     var elm = vnode.elm,
         styleDecls = vnode.data.styleDecls;
 
@@ -3472,13 +3250,15 @@
       return;
     }
 
-    for (var _i12 = 0; _i12 < styleDecls.length; _i12++) {
-      var _styleDecls$_i = _slicedToArray(styleDecls[_i12], 3),
+    var setCSSStyleProperty = renderer.setCSSStyleProperty;
+
+    for (var _i11 = 0; _i11 < styleDecls.length; _i11++) {
+      var _styleDecls$_i = _slicedToArray(styleDecls[_i11], 3),
           prop = _styleDecls$_i[0],
           value = _styleDecls$_i[1],
           important = _styleDecls$_i[2];
 
-      setCSSStyleProperty$1(elm, prop, value, important);
+      setCSSStyleProperty(elm, prop, value, important);
     }
   }
   /*
@@ -3489,15 +3269,17 @@
    */
 
 
-  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;
     }
@@ -3506,112 +3288,159 @@
       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) {
-    var owner = node.owner;
-    var textNode = node.elm = createText$1(node.text);
-    linkNodeToShadow(textNode, owner);
-    insertNode(textNode, parent, anchor);
+  function mountText(vnode, parent, anchor, renderer) {
+    var owner = vnode.owner;
+    var createText = renderer.createText;
+    var 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) {
-    var owner = node.owner;
-    var commentNode = node.elm = createComment$1(node.text);
-    linkNodeToShadow(commentNode, owner);
-    insertNode(commentNode, parent, anchor);
+  function mountComment(vnode, parent, anchor, renderer) {
+    var owner = vnode.owner;
+    var createComment = renderer.createComment;
+    var 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) {
     var sel = vnode.sel,
         owner = vnode.owner,
         svg = vnode.data.svg;
+    var createElement = renderer.createElement;
     var namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    var elm = createElement$2(sel, namespace);
-    linkNodeToShadow(elm, owner);
-    fallbackElmHook(elm, vnode);
+    var 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) {
     var 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) {
+    var owner = vnode.owner;
+    var cloneNode = renderer.cloneNode,
+        isSyntheticShadowDefined = renderer.isSyntheticShadowDefined;
+    var 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
+
+    var renderMode = owner.renderMode,
+        shadowMode = owner.shadowMode;
+
+    if (isSyntheticShadowDefined) {
+      if (shadowMode === 1
+      /* Synthetic */
+      || renderMode === 0
+      /* Light */
+      ) {
+        elm[KEY__SHADOW_STATIC] = true;
+      }
+    }
+
+    insertNode(elm, parent, anchor, renderer);
+  }
+
+  function mountCustomElement(vnode, parent, anchor, renderer) {
     var sel = vnode.sel,
         owner = vnode.owner;
-    var UpgradableConstructor = getUpgradableConstructor(sel);
+    var 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
@@ -3622,9 +3451,9 @@
     var vm;
     var elm = new UpgradableConstructor(function (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;
 
@@ -3634,25 +3463,25 @@
       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) {
 
       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) {
     var elm = n2.elm = n1.elm;
     var 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
@@ -3662,7 +3491,7 @@
     // 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
@@ -3671,38 +3500,45 @@
     }
   }
 
-  function mountVNodes(vnodes, parent, anchor) {
-    var start = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-    var end = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : vnodes.length;
+  function mountVNodes(vnodes, parent, renderer, anchor) {
+    var start = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    var end = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : vnodes.length;
 
     for (; start < end; ++start) {
       var vnode = vnodes[start];
 
       if (isVNode(vnode)) {
-        mount(vnode, parent, anchor);
+        mount(vnode, parent, renderer, anchor);
       }
     }
   }
 
-  function unmount(vnode, parent) {
-    var doRemove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  function unmount(vnode, parent, renderer) {
+    var doRemove = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var type = vnode.type,
         elm = vnode.elm,
         sel = vnode.sel; // 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);
     }
 
-    var removeChildren = sel === 'slot'; // slot content is removed to trigger slotchange event when removing slot
-
     switch (type) {
       case 2
       /* Element */
       :
-        unmountVNodes(vnode.children, elm, removeChildren);
-        break;
+        {
+          // Slot content is removed to trigger slotchange event when removing slot.
+          // Only required for synthetic shadow.
+          var shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1
+          /* Synthetic */
+          ;
+          unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
+          break;
+        }
 
       case 3
       /* CustomElement */
@@ -3718,16 +3554,16 @@
     }
   }
 
-  function unmountVNodes(vnodes, parent) {
-    var doRemove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var start = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-    var end = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : vnodes.length;
+  function unmountVNodes(vnodes, parent, renderer) {
+    var doRemove = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    var start = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    var end = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : vnodes.length;
 
     for (; start < end; ++start) {
       var ch = vnodes[start];
 
       if (isVNode(ch)) {
-        unmount(ch, parent, doRemove);
+        unmount(ch, parent, renderer, doRemove);
       }
     }
   }
@@ -3745,22 +3581,26 @@
   } // Set the scope token class for *.scoped.css styles
 
 
-  function setScopeTokenClassIfNecessary(elm, owner) {
+  function setScopeTokenClassIfNecessary(elm, owner, renderer) {
     var cmpTemplate = owner.cmpTemplate,
         context = owner.context;
+    var getClassList = renderer.getClassList;
     var 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) {
     var renderRoot = owner.renderRoot,
         renderMode = owner.renderMode,
-        shadowMode = owner.shadowMode; // TODO [#1164]: this should eventually be done by the polyfill directly
+        shadowMode = owner.shadowMode;
+    var isSyntheticShadowDefined = renderer.isSyntheticShadowDefined; // TODO [#1164]: this should eventually be done by the polyfill directly
 
-    if (isSyntheticShadowDefined$1) {
+    if (isSyntheticShadowDefined) {
       if (shadowMode === 1
       /* Synthetic */
       || renderMode === 0
@@ -3771,41 +3611,42 @@
     }
   }
 
-  function updateTextContent(vnode) {
+  function updateTextContent(vnode, renderer) {
     var elm = vnode.elm,
         text = vnode.text;
+    var setText = renderer.setText;
 
-    setText$1(elm, text);
+    setText(elm, text);
   }
 
-  function insertNode(node, parent, anchor) {
+  function insertNode(node, parent, anchor, renderer) {
 
-    insert$1(node, parent, anchor);
+    renderer.insert(node, parent, anchor);
   }
 
-  function removeNode(node, parent) {
+  function removeNode(node, parent, renderer) {
 
-    remove$1(node, parent);
+    renderer.remove(node, parent);
   }
 
-  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) {
     var owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
 
     if (owner.shadowMode === 1
     /* Synthetic */
@@ -3858,7 +3699,7 @@
     }
   }
 
-  function createViewModelHook(elm, vnode) {
+  function createViewModelHook(elm, vnode, renderer) {
     var 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
     // called right after invoking `document.createElement`.
@@ -3871,7 +3712,7 @@
         mode = vnode.mode,
         ctor = vnode.ctor,
         owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
 
     if (owner.shadowMode === 1
     /* Synthetic */
@@ -3884,7 +3725,7 @@
       }
     }
 
-    vm = createVM(elm, ctor, {
+    vm = createVM(elm, ctor, renderer, {
       mode: mode,
       owner: owner,
       tagName: sel
@@ -3899,8 +3740,8 @@
     var oldSlots = vm.cmpSlots;
     var cmpSlots = vm.cmpSlots = create(null);
 
-    for (var _i13 = 0, len = children.length; _i13 < len; _i13 += 1) {
-      var vnode = children[_i13];
+    for (var _i12 = 0, len = children.length; _i12 < len; _i12 += 1) {
+      var vnode = children[_i12];
 
       if (isNull(vnode)) {
         continue;
@@ -3926,8 +3767,8 @@
         return;
       }
 
-      for (var _i14 = 0, _len4 = oldKeys.length; _i14 < _len4; _i14 += 1) {
-        var key = oldKeys[_i14];
+      for (var _i13 = 0, _len4 = oldKeys.length; _i13 < _len4; _i13 += 1) {
+        var key = oldKeys[_i13];
 
         if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
           markComponentAsDirty(vm);
@@ -3977,7 +3818,7 @@
     return map;
   }
 
-  function updateDynamicChildren(oldCh, newCh, parent) {
+  function updateDynamicChildren(oldCh, newCh, parent, renderer) {
     var oldStartIdx = 0;
     var newStartIdx = 0;
     var oldEndIdx = oldCh.length - 1;
@@ -4003,23 +3844,23 @@
       } else if (!isVNode(newEndVnode)) {
         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];
       } else {
@@ -4031,7 +3872,7 @@
 
         if (isUndefined$1(idxInOld)) {
           // New element
-          mount(newStartVnode, parent, oldStartVnode.elm);
+          mount(newStartVnode, parent, renderer, oldStartVnode.elm);
           newStartVnode = newCh[++newStartIdx];
         } else {
           elmToMove = oldCh[idxInOld];
@@ -4039,9 +3880,9 @@
           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); // Delete the old child, but copy the array since it is read-only.
+              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.
               // To avoid cloning over and over again, we check `clonedOldCh`
@@ -4054,7 +3895,7 @@
 
 
               oldCh[idxInOld] = undefined;
-              insertNode(elmToMove.elm, parent, oldStartVnode.elm);
+              insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
             }
           }
 
@@ -4067,35 +3908,35 @@
       if (oldStartIdx > oldEndIdx) {
         // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
         // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-        var _i15 = newEndIdx;
+        var _i14 = newEndIdx;
         var n;
 
         do {
-          n = newCh[++_i15];
-        } while (!isVNode(n) && _i15 < newChEnd);
+          n = newCh[++_i14];
+        } while (!isVNode(n) && _i14 < 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) {
     var c1Length = c1.length;
     var 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
     // amount of nodes, that's why we call this static children
@@ -4103,22 +3944,22 @@
 
     var anchor = null;
 
-    for (var _i16 = c2Length - 1; _i16 >= 0; _i16 -= 1) {
-      var n1 = c1[_i16];
-      var n2 = c2[_i16];
+    for (var _i15 = c2Length - 1; _i15 >= 0; _i15 -= 1) {
+      var n1 = c1[_i15];
+      var n2 = c2[_i15];
 
       if (n2 !== n1) {
         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;
         }
       }
@@ -4136,6 +3977,20 @@
 
   function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
+  } // [st]atic node
+
+
+  function st(fragment, key) {
+    return {
+      type: 4
+      /* Static */
+      ,
+      sel: undefined,
+      key: key,
+      elm: undefined,
+      fragment: fragment,
+      owner: getVMBeingRendered()
+    };
   } // [h]tml node
 
 
@@ -4502,6 +4357,7 @@
     co: co,
     dc: dc,
     ti: ti,
+    st: st,
     gid: gid,
     fid: fid,
     shc: shc
@@ -4530,7 +4386,11 @@
     var elm = vm.elm,
         context = vm.context,
         renderMode = vm.renderMode,
-        shadowMode = vm.shadowMode;
+        shadowMode = vm.shadowMode,
+        _vm$renderer = vm.renderer,
+        getClassList = _vm$renderer.getClassList,
+        removeAttribute = _vm$renderer.removeAttribute,
+        setAttribute = _vm$renderer.setAttribute;
     var newStylesheets = template.stylesheets,
         newStylesheetToken = template.stylesheetToken;
     var isSyntheticShadow = renderMode === 1
@@ -4549,11 +4409,11 @@
 
     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
     // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
@@ -4566,12 +4426,12 @@
 
     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;
       }
     } // Update the styling tokens present on the context object.
@@ -4586,8 +4446,8 @@
     var content = [];
     var root;
 
-    for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
-      var stylesheet = stylesheets[_i17];
+    for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
+      var stylesheet = stylesheets[_i16];
 
       if (isArray$1(stylesheet)) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
@@ -4684,31 +4544,33 @@
 
   function createStylesheet(vm, stylesheets) {
     var renderMode = vm.renderMode,
-        shadowMode = vm.shadowMode;
+        shadowMode = vm.shadowMode,
+        _vm$renderer2 = vm.renderer,
+        ssr = _vm$renderer2.ssr,
+        insertStylesheet = _vm$renderer2.insertStylesheet;
 
     if (renderMode === 1
     /* Shadow */
     && shadowMode === 1
     /* Synthetic */
     ) {
-      for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
-        insertStylesheet$1(stylesheets[_i18]);
+      for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
+        insertStylesheet(stylesheets[_i17]);
       }
-    } 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
-      var combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
-      return createInlineStyleVNode(combinedStylesheetContent);
+      return ArrayMap.call(stylesheets, createInlineStyleVNode);
     } else {
       // native shadow or light DOM, DOM renderer
       var root = getNearestNativeShadowComponent(vm); // null root means a global style
 
       var target = isNull(root) ? undefined : root.shadowRoot;
 
-      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
-        insertStylesheet$1(stylesheets[_i19], target);
+      for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
+        insertStylesheet(stylesheets[_i18], target);
       }
     }
 
@@ -4812,6 +4674,91 @@
     }
   }
 
+  function buildParseFragmentFn(createFragmentFn) {
+    return function (strings) {
+      for (var _len5 = arguments.length, keys = new Array(_len5 > 1 ? _len5 - 1 : 0), _key3 = 1; _key3 < _len5; _key3++) {
+        keys[_key3 - 1] = arguments[_key3];
+      }
+
+      var cache = create(null);
+      return function () {
+        var _getVMBeingRendered = getVMBeingRendered(),
+            _getVMBeingRendered$c = _getVMBeingRendered.context,
+            hasScopedStyles = _getVMBeingRendered$c.hasScopedStyles,
+            stylesheetToken = _getVMBeingRendered$c.stylesheetToken,
+            shadowMode = _getVMBeingRendered.shadowMode,
+            renderer = _getVMBeingRendered.renderer;
+
+        var hasStyleToken = !isUndefined$1(stylesheetToken);
+        var isSyntheticShadow = shadowMode === 1
+        /* Synthetic */
+        ;
+        var 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];
+        }
+
+        var classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
+        var classAttrToken = hasScopedStyles && hasStyleToken ? " class=\"".concat(stylesheetToken, "\"") : '';
+        var attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+        var htmlFragment = '';
+
+        for (var _i19 = 0, n = keys.length; _i19 < n; _i19++) {
+          switch (keys[_i19]) {
+            case 0:
+              // styleToken in existing class attr
+              htmlFragment += strings[_i19] + classToken;
+              break;
+
+            case 1:
+              // styleToken for added class attr
+              htmlFragment += strings[_i19] + classAttrToken;
+              break;
+
+            case 2:
+              // styleToken as attr
+              htmlFragment += strings[_i19] + attrToken;
+              break;
+
+            case 3:
+              // ${1}${2}
+              htmlFragment += strings[_i19] + 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.
+
+
+  var parseFragment = buildParseFragmentFn(function (html, renderer) {
+    var createFragment = renderer.createFragment;
+    return createFragment(html);
+  });
+  var parseSVGFragment = buildParseFragmentFn(function (html, renderer) {
+    var createFragment = renderer.createFragment,
+        getFirstChild = renderer.getFirstChild;
+    var fragment = createFragment('<svg>' + html + '</svg>');
+    return getFirstChild(fragment);
+  });
+
   function evaluateTemplate(vm, html) {
 
     var isUpdatingTemplateInception = isUpdatingTemplate;
@@ -4859,7 +4806,7 @@
           // re-rendering.
 
           var stylesheetsContent = getStylesheetsContent(vm, html);
-          context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
+          context.styleVNodes = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
         }
 
         if ("production" !== 'production') ; // right before producing the vnodes, we clear up all internal references
@@ -4870,10 +4817,10 @@
 
         isUpdatingTemplate = true;
         vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
-        var styleVNode = context.styleVNode;
+        var styleVNodes = context.styleVNodes;
 
-        if (!isNull(styleVNode)) {
-          ArrayUnshift.call(vnodes, styleVNode);
+        if (!isNull(styleVNodes)) {
+          ArrayUnshift.apply(vnodes, styleVNodes);
         }
       });
     }, function () {
@@ -5197,9 +5144,19 @@
     resetComponentStateWhenRemoved(vm);
   }
 
-  function createVM(elm, ctor, options) {
-    var _a;
+  function getNearestShadowAncestor(vm) {
+    var ancestor = vm.owner;
+
+    while (!isNull(ancestor) && ancestor.renderMode === 0
+    /* Light */
+    ) {
+      ancestor = ancestor.owner;
+    }
 
+    return ancestor;
+  }
+
+  function createVM(elm, ctor, renderer, options) {
     var mode = options.mode,
         owner = options.owner,
         tagName = options.tagName,
@@ -5227,28 +5184,29 @@
       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,
         hasTokenInAttribute: undefined,
         hasScopedStyles: undefined,
-        styleVNode: null,
+        styleVNodes: null,
         tplCache: EmptyObject,
         wiredConnecting: EmptyArray,
         wiredDisconnecting: EmptyArray
       },
       // Properties set right after VM creation.
       tro: null,
+      shadowMode: null,
       // Properties set by the LightningElement constructor.
       component: null,
       shadowRoot: null,
       renderRoot: null,
       callHook: callHook,
       setHook: setHook,
-      getHook: getHook
+      getHook: getHook,
+      renderer: renderer
     };
+    vm.shadowMode = computeShadowMode(vm, renderer);
     vm.tro = getTemplateReactiveObserver(vm);
 
 
@@ -5261,12 +5219,13 @@
     return vm;
   }
 
-  function computeShadowMode(def, owner) {
-    var _a;
-
+  function computeShadowMode(vm, renderer) {
+    var def = vm.def;
+    var isSyntheticShadowDefined = renderer.isSyntheticShadowDefined,
+        isNativeShadowDefined = renderer.isNativeShadowDefined;
     var shadowMode;
 
-    if (isSyntheticShadowDefined$1) {
+    if (isSyntheticShadowDefined) {
       if (def.renderMode === 0
       /* Light */
       ) {
@@ -5275,7 +5234,7 @@
         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) {
@@ -5286,13 +5245,23 @@
             /* 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 */
-            ;
+            var 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
@@ -5340,7 +5309,8 @@
 
   function patchShadowRoot(vm, newCh) {
     var renderRoot = vm.renderRoot,
-        oldCh = vm.children; // caching the new children collection
+        oldCh = vm.children,
+        renderer = vm.renderer; // caching the new children collection
 
     vm.children = newCh;
 
@@ -5355,7 +5325,7 @@
           , vm);
         }, function () {
           // job
-          patchChildren(oldCh, newCh, renderRoot);
+          patchChildren(oldCh, newCh, renderRoot, renderer);
         }, function () {
           // post
           logOperationEnd(2
@@ -5377,9 +5347,10 @@
   }
 
   function runRenderedCallback(vm) {
-    var renderedCallback = vm.def.renderedCallback;
+    var renderedCallback = vm.def.renderedCallback,
+        ssr = vm.renderer.ssr;
 
-    if (isTrue(ssr$1)) {
+    if (isTrue(ssr)) {
       return;
     }
 
@@ -5588,13 +5559,14 @@
 
   function resetComponentRoot(vm) {
     var children = vm.children,
-        renderRoot = vm.renderRoot;
+        renderRoot = vm.renderRoot,
+        remove = vm.renderer.remove;
 
     for (var _i26 = 0, len = children.length; _i26 < len; _i26++) {
       var child = children[_i26];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
-        remove$1(child.elm, renderRoot);
+        remove(child.elm, renderRoot);
       }
     }
 
@@ -5604,7 +5576,9 @@
   }
 
   function scheduleRehydration(vm) {
-    if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
+    var ssr = vm.renderer.ssr;
+
+    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -5771,7 +5745,8 @@
     var elm = vm.elm,
         _vm$context = vm.context,
         wiredConnecting = _vm$context.wiredConnecting,
-        wiredDisconnecting = _vm$context.wiredDisconnecting; // waiting for the component to be connected to formally request the context via the token
+        wiredDisconnecting = _vm$context.wiredDisconnecting,
+        dispatchEvent = vm.renderer.dispatchEvent; // waiting for the component to be connected to formally request the context via the token
 
     ArrayPush$1.call(wiredConnecting, function () {
       // This event is responsible for connecting the host element with another
@@ -5791,7 +5766,7 @@
           ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
         }
       });
-      dispatchEvent$1(elm, contextRegistrationEvent);
+      dispatchEvent(elm, contextRegistrationEvent);
     });
   }
 
@@ -6045,79 +6020,103 @@
   function hydrateVM(vm) {
     var children = renderComponent(vm);
     vm.children = children;
-    var parentNode = vm.renderRoot;
-    hydrateChildren(getFirstChild$1(parentNode), children, parentNode);
+    var parentNode = vm.renderRoot,
+        getFirstChild = vm.renderer.getFirstChild;
+    hydrateChildren(getFirstChild(parentNode), children, parentNode, vm);
     runRenderedCallback(vm);
   }
 
-  function hydrateNode(node, vnode) {
+  function hydrateNode(node, vnode, renderer) {
+    var _a, _b;
+
     var 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);
+    , renderer)) {
+      return handleMismatch(node, vnode, renderer);
     }
 
-    setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    var setText = renderer.setText;
+    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);
+    , renderer)) {
+      return handleMismatch(node, vnode, renderer);
     }
 
-    setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    var setProperty = renderer.setProperty;
+    setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
     vnode.elm = node;
     return node;
   }
 
-  function hydrateElement(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 */
-    ) || !isMatchingElement(vnode, elm)) {
-      return handleMismatch(elm, vnode);
+    , renderer) || !isMatchingElement(vnode, elm, renderer)) {
+      return handleMismatch(elm, vnode, renderer);
     }
 
     vnode.elm = elm;
+    var owner = vnode.owner;
     var context = vnode.data.context;
     var isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
     /* Manual */
@@ -6127,9 +6126,10 @@
       // 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.
       var props = vnode.data.props;
+      var _getProperty3 = renderer.getProperty;
 
       if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-        if (getProperty$1(elm, 'innerHTML') === props.innerHTML) {
+        if (_getProperty3(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')
@@ -6138,27 +6138,28 @@
       }
     }
 
-    patchElementPropsAndAttrs(vnode);
+    patchElementPropsAndAttrs(vnode, renderer);
 
     if (!isDomManual) {
-      hydrateChildren(getFirstChild$1(elm), vnode.children, elm, vnode.owner);
+      var _getFirstChild = renderer.getFirstChild;
+      hydrateChildren(_getFirstChild(elm), vnode.children, elm, owner);
     }
 
     return elm;
   }
 
-  function hydrateCustomElement(elm, vnode) {
+  function hydrateCustomElement(elm, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, elm, 1
     /* ELEMENT */
-    ) || !isMatchingElement(vnode, elm)) {
-      return handleMismatch(elm, vnode);
+    , renderer) || !isMatchingElement(vnode, elm, renderer)) {
+      return handleMismatch(elm, vnode, renderer);
     }
 
     var sel = vnode.sel,
         mode = vnode.mode,
         ctor = vnode.ctor,
         owner = vnode.owner;
-    var vm = createVM(elm, ctor, {
+    var vm = createVM(elm, ctor, renderer, {
       mode: mode,
       owner: owner,
       tagName: sel,
@@ -6167,16 +6168,17 @@
     vnode.elm = elm;
     vnode.vm = vm;
     allocateChildren(vnode, vm);
-    patchElementPropsAndAttrs(vnode); // Insert hook section:
+    patchElementPropsAndAttrs(vnode, renderer); // Insert hook section:
 
     runConnectedCallback(vm);
 
     if (vm.renderMode !== 0
     /* Light */
     ) {
-      // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+      var _getFirstChild2 = renderer.getFirstChild; // 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);
+
+      hydrateChildren(_getFirstChild2(elm), vnode.children, elm, vm);
     }
 
     hydrateVM(vm);
@@ -6186,18 +6188,19 @@
   function hydrateChildren(node, children, parentNode, owner) {
     var nextNode = node;
     var anchor = null;
+    var renderer = owner.renderer;
 
     for (var _i29 = 0; _i29 < children.length; _i29++) {
       var childVnode = children[_i29];
 
       if (!isNull(childVnode)) {
         if (nextNode) {
-          nextNode = hydrateNode(nextNode, childVnode);
+          nextNode = hydrateNode(nextNode, childVnode, renderer);
           anchor = childVnode.elm;
         } else {
           hasMismatch = true;
 
-          mount(childVnode, parentNode, anchor);
+          mount(childVnode, parentNode, renderer, anchor);
           anchor = childVnode.elm;
         }
       }
@@ -6205,31 +6208,39 @@
 
     if (nextNode) {
       hasMismatch = true;
+      // 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.
+
+
+      var _nextSibling = renderer.nextSibling;
 
       do {
         var 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;
-
-    var parentNode = getProperty$1(node, 'parentNode');
-    mount(vnode, parentNode, node);
-    removeNode(node, parentNode);
+    var getProperty = renderer.getProperty;
+    var 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) {
+    var getProperty = renderer.getProperty;
+
+    if (getProperty(node, 'nodeType') !== nodeType) {
 
       return false;
     }
@@ -6237,19 +6248,21 @@
     return true;
   }
 
-  function isMatchingElement(vnode, elm) {
-    if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
+  function isMatchingElement(vnode, elm, renderer) {
+    var getProperty = renderer.getProperty;
+
+    if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
 
       return false;
     }
 
-    var hasIncompatibleAttrs = validateAttrs(vnode, elm);
-    var hasIncompatibleClass = validateClassAttr(vnode, elm);
-    var hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+    var hasIncompatibleAttrs = validateAttrs(vnode, elm, renderer);
+    var hasIncompatibleClass = validateClassAttr(vnode, elm, renderer);
+    var hasIncompatibleStyle = validateStyleAttr(vnode, elm, renderer);
     return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
   }
 
-  function validateAttrs(vnode, elm) {
+  function validateAttrs(vnode, elm, renderer) {
     var _vnode$data$attrs = vnode.data.attrs,
         attrs = _vnode$data$attrs === void 0 ? {} : _vnode$data$attrs;
     var nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
@@ -6260,7 +6273,10 @@
           attrName = _Object$entries$_i[0],
           attrValue = _Object$entries$_i[1];
 
-      var elmAttrValue = getAttribute$1(elm, attrName);
+      vnode.owner;
+      var _getAttribute = renderer.getAttribute;
+
+      var elmAttrValue = _getAttribute(elm, attrName);
 
       if (String(attrValue) !== elmAttrValue) {
 
@@ -6271,18 +6287,20 @@
     return nodesAreCompatible;
   }
 
-  function validateClassAttr(vnode, elm) {
+  function validateClassAttr(vnode, elm, renderer) {
     var _vnode$data = vnode.data,
         className = _vnode$data.className,
         classMap = _vnode$data.classMap;
+    var getProperty = renderer.getProperty,
+        getClassList = renderer.getClassList;
     var nodesAreCompatible = true;
 
-    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;
     } else if (!isUndefined$1(classMap)) {
       // classMap is used when class is set to static value.
-      var classList = getClassList$1(elm);
+      var classList = getClassList(elm);
       var computedClassName = ''; // all classes from the vnode should be in the element.classList
 
       for (var name in classMap) {
@@ -6303,11 +6321,12 @@
     return nodesAreCompatible;
   }
 
-  function validateStyleAttr(vnode, elm) {
+  function validateStyleAttr(vnode, elm, renderer) {
     var _vnode$data2 = vnode.data,
         style = _vnode$data2.style,
         styleDecls = _vnode$data2.styleDecls;
-    var elmStyle = getAttribute$1(elm, 'style') || '';
+    var getAttribute = renderer.getAttribute;
+    var elmStyle = getAttribute(elm, 'style') || '';
     var nodesAreCompatible = true;
 
     if (!isUndefined$1(style) && style !== elmStyle) {
@@ -6343,6 +6362,57 @@
 
     return nodesAreCompatible;
   }
+
+  function areCompatibleNodes(client, ssr, vnode, renderer) {
+    var getProperty = renderer.getProperty,
+        getAttribute = renderer.getAttribute;
+
+    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;
+    }
+
+    var isCompatibleElements = true;
+
+    if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
+
+      return false;
+    }
+
+    var clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
+    clientAttrsNames.forEach(function (attrName) {
+      if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+        logError("Mismatch hydrating element <".concat(getProperty(client, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(getAttribute(client, attrName), "\" but found \"").concat(getAttribute(ssr, attrName), "\""), vnode.owner);
+        isCompatibleElements = false;
+      }
+    });
+    return isCompatibleElements;
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6390,7 +6460,7 @@
 
     return ctor;
   }
-  /* version: 2.14.0 */
+  /* version: 2.15.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6560,7 +6630,7 @@
     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.
       var HTMLElementAlias = HTMLElement; // In case we use compat mode with a modern browser, the compat mode transformation
       // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
@@ -6636,9 +6706,22 @@
   }
 
   var ssr = false;
+
+  function isHydrating() {
+    return hydrating;
+  }
+
   var isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
   var 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) : document.createElementNS(namespace, tagName);
   }
@@ -6770,44 +6853,54 @@
     return node.isConnected;
   }
 
+  function assertInstanceOfHTMLElement(elm, msg) {
+    assert.invariant(elm instanceof HTMLElement, msg);
+  }
+
   var HTMLElementExported = HTMLElementConstructor;
-  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);
+  var renderer = {
+    ssr: ssr,
+    isNativeShadowDefined: isNativeShadowDefined,
+    isSyntheticShadowDefined: isSyntheticShadowDefined,
+    HTMLElementExported: HTMLElementExported,
+    isHydrating: isHydrating,
+    insert: insert,
+    remove: remove,
+    cloneNode: cloneNode,
+    createFragment: createFragment,
+    createElement: createElement$1,
+    createText: createText,
+    createComment: createComment,
+    nextSibling: nextSibling,
+    attachShadow: attachShadow,
+    getProperty: getProperty,
+    setProperty: setProperty,
+    setText: setText,
+    getAttribute: getAttribute,
+    setAttribute: setAttribute,
+    removeAttribute: removeAttribute,
+    addEventListener: addEventListener,
+    removeEventListener: removeEventListener,
+    dispatchEvent: dispatchEvent,
+    getClassList: getClassList,
+    setCSSStyleProperty: setCSSStyleProperty,
+    getBoundingClientRect: getBoundingClientRect,
+    querySelector: querySelector,
+    querySelectorAll: querySelectorAll,
+    getElementsByTagName: getElementsByTagName,
+    getElementsByClassName: getElementsByClassName,
+    getChildren: getChildren,
+    getChildNodes: getChildNodes,
+    getFirstChild: getFirstChild,
+    getFirstElementChild: getFirstElementChild,
+    getLastChild: getLastChild,
+    getLastElementChild: getLastElementChild,
+    isConnected: isConnected,
+    insertStylesheet: insertStylesheet,
+    assertInstanceOfHTMLElement: assertInstanceOfHTMLElement,
+    defineCustomElement: defineCustomElement,
+    getCustomElement: getCustomElement
+  };
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6815,7 +6908,6 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-
   function resetShadowRootAndLightDom(element, Ctor) {
     if (element.shadowRoot) {
       var shadowRoot = element.shadowRoot;
@@ -6833,7 +6925,7 @@
   }
 
   function createVMWithProps(element, Ctor, props) {
-    var vm = createVM(element, Ctor, {
+    var vm = createVM(element, Ctor, renderer, {
       mode: 'open',
       owner: null,
       tagName: element.tagName.toLowerCase(),
@@ -6949,7 +7041,7 @@
           hydrateComponent(_assertThisInitialized(_this6), Ctor, {});
           hydratedCustomElements.add(_assertThisInitialized(_this6));
         } else {
-          createVM(_assertThisInitialized(_this6), Ctor, {
+          createVM(_assertThisInitialized(_this6), Ctor, renderer, {
             mode: 'open',
             owner: null,
             tagName: _this6.tagName
@@ -7058,7 +7150,7 @@
       throw new TypeError("\"createElement\" function expects an \"is\" option with a valid component constructor.");
     }
 
-    var UpgradableConstructor = getUpgradableConstructor(sel);
+    var UpgradableConstructor = getUpgradableConstructor(sel, renderer);
     var wasComponentUpgraded = false; // the custom element from the registry is expecting an upgrade callback
 
     /**
@@ -7069,7 +7161,7 @@
      */
 
     var element = new UpgradableConstructor(function (elm) {
-      createVM(elm, Ctor, {
+      createVM(elm, Ctor, renderer, {
         tagName: sel,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
         owner: null
@@ -7166,7 +7258,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.14.0 */
+  /* version: 2.15.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -7180,11 +7272,14 @@
   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;