lwc 2.14.1 → 2.16.0

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

@@ -292,6 +292,7 @@ var LWC = (function (exports) {
 
   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$';
@@ -347,7 +348,7 @@ var LWC = (function (exports) {
   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.1 */
+  /** version: 2.16.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -608,231 +609,6 @@ var LWC = (function (exports) {
 
     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.
@@ -2010,13 +1786,14 @@ var LWC = (function (exports) {
   };
 
   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);
 
@@ -2027,99 +1804,106 @@ var LWC = (function (exports) {
   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() {
@@ -2134,89 +1918,69 @@ var LWC = (function (exports) {
       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 childGetters = ['children', 'childNodes', 'firstChild', 'firstElementChild', 'lastChild', 'lastElementChild'];
+      var renderer = vm.renderer;
 
-  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,
@@ -2224,8 +1988,8 @@ var LWC = (function (exports) {
     };
   };
 
-  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);
@@ -2585,8 +2349,8 @@ var LWC = (function (exports) {
     }
 
     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.
 
@@ -2840,8 +2604,8 @@ var LWC = (function (exports) {
         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),
@@ -2852,8 +2616,8 @@ var LWC = (function (exports) {
     } // 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,
@@ -3156,12 +2920,15 @@ var LWC = (function (exports) {
    */
 
 
-  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;
@@ -3172,8 +2939,8 @@ var LWC = (function (exports) {
      */
 
 
-    CE = /*#__PURE__*/function (_HTMLElementExported$) {
-      _inherits(LWCUpgradableElement, _HTMLElementExported$);
+    CE = /*#__PURE__*/function (_RendererHTMLElement) {
+      _inherits(LWCUpgradableElement, _RendererHTMLElement);
 
       var _super5 = _createSuper(LWCUpgradableElement);
 
@@ -3192,9 +2959,9 @@ var LWC = (function (exports) {
       }
 
       return _createClass(LWCUpgradableElement);
-    }(HTMLElementExported$1);
+    }(RendererHTMLElement);
 
-    defineCustomElement$1(tagName, CE);
+    defineCustomElement(tagName, CE);
     return CE;
   }
   /*
@@ -3227,7 +2994,7 @@ var LWC = (function (exports) {
 
   var ColonCharCode = 58;
 
-  function patchAttributes(oldVnode, vnode) {
+  function patchAttributes(oldVnode, vnode, renderer) {
     var attrs = vnode.data.attrs;
 
     if (isUndefined$1(attrs)) {
@@ -3241,6 +3008,8 @@ var LWC = (function (exports) {
     }
 
     var elm = vnode.elm;
+    var setAttribute = renderer.setAttribute,
+        removeAttribute = renderer.removeAttribute;
 
     for (var key in attrs) {
       var cur = attrs[key];
@@ -3251,14 +3020,14 @@ var LWC = (function (exports) {
 
         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();
@@ -3279,7 +3048,7 @@ var LWC = (function (exports) {
     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)) {
@@ -3295,13 +3064,15 @@ var LWC = (function (exports) {
     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);
       }
     }
   }
@@ -3353,7 +3124,7 @@ var LWC = (function (exports) {
     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;
@@ -3362,7 +3133,8 @@ var LWC = (function (exports) {
       return;
     }
 
-    var classList = getClassList$1(elm);
+    var getClassList = renderer.getClassList;
+    var classList = getClassList(elm);
     var newClassMap = getMapFromClassName(newClass);
     var oldClassMap = getMapFromClassName(oldClass);
     var name;
@@ -3389,7 +3161,7 @@ var LWC = (function (exports) {
   // 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;
@@ -3398,10 +3170,13 @@ var LWC = (function (exports) {
       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);
     }
   }
   /*
@@ -3412,7 +3187,7 @@ var LWC = (function (exports) {
    */
 
 
-  function applyEventListeners(vnode) {
+  function applyEventListeners(vnode, renderer) {
     var elm = vnode.elm,
         on = vnode.data.on;
 
@@ -3420,9 +3195,11 @@ var LWC = (function (exports) {
       return;
     }
 
+    var addEventListener = renderer.addEventListener;
+
     for (var name in on) {
       var handler = on[name];
-      addEventListener$1(elm, name, handler);
+      addEventListener(elm, name, handler);
     }
   }
   /*
@@ -3436,7 +3213,7 @@ var LWC = (function (exports) {
   // different classnames properties individually instead of via a string.
 
 
-  function applyStaticClassAttribute(vnode) {
+  function applyStaticClassAttribute(vnode, renderer) {
     var elm = vnode.elm,
         classMap = vnode.data.classMap;
 
@@ -3444,7 +3221,8 @@ var LWC = (function (exports) {
       return;
     }
 
-    var classList = getClassList$1(elm);
+    var getClassList = renderer.getClassList;
+    var classList = getClassList(elm);
 
     for (var name in classMap) {
       classList.add(name);
@@ -3461,7 +3239,7 @@ var LWC = (function (exports) {
   // different style properties individually instead of via a string.
 
 
-  function applyStaticStyleAttribute(vnode) {
+  function applyStaticStyleAttribute(vnode, renderer) {
     var elm = vnode.elm,
         styleDecls = vnode.data.styleDecls;
 
@@ -3469,13 +3247,15 @@ var LWC = (function (exports) {
       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);
     }
   }
   /*
@@ -3486,15 +3266,17 @@ var LWC = (function (exports) {
    */
 
 
-  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;
     }
@@ -3503,112 +3285,159 @@ var LWC = (function (exports) {
       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 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) {
+  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
@@ -3619,9 +3448,9 @@ var LWC = (function (exports) {
     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;
 
@@ -3631,25 +3460,25 @@ var LWC = (function (exports) {
       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
@@ -3659,7 +3488,7 @@ var LWC = (function (exports) {
     // 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
@@ -3668,28 +3497,30 @@ var LWC = (function (exports) {
     }
   }
 
-  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);
     }
 
     switch (type) {
@@ -3699,10 +3530,10 @@ var LWC = (function (exports) {
         {
           // Slot content is removed to trigger slotchange event when removing slot.
           // Only required for synthetic shadow.
-          var removeChildren = sel === 'slot' && vnode.owner.shadowMode === 1
+          var shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1
           /* Synthetic */
           ;
-          unmountVNodes(vnode.children, elm, removeChildren);
+          unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
           break;
         }
 
@@ -3720,16 +3551,16 @@ var LWC = (function (exports) {
     }
   }
 
-  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);
       }
     }
   }
@@ -3747,22 +3578,26 @@ var LWC = (function (exports) {
   } // 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
@@ -3773,41 +3608,42 @@ var LWC = (function (exports) {
     }
   }
 
-  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 */
@@ -3860,7 +3696,7 @@ var LWC = (function (exports) {
     }
   }
 
-  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`.
@@ -3873,7 +3709,7 @@ var LWC = (function (exports) {
         mode = vnode.mode,
         ctor = vnode.ctor,
         owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
 
     if (owner.shadowMode === 1
     /* Synthetic */
@@ -3886,7 +3722,7 @@ var LWC = (function (exports) {
       }
     }
 
-    vm = createVM(elm, ctor, {
+    vm = createVM(elm, ctor, renderer, {
       mode: mode,
       owner: owner,
       tagName: sel
@@ -3901,8 +3737,8 @@ var LWC = (function (exports) {
     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;
@@ -3928,8 +3764,8 @@ var LWC = (function (exports) {
         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);
@@ -3979,7 +3815,7 @@ var LWC = (function (exports) {
     return map;
   }
 
-  function updateDynamicChildren(oldCh, newCh, parent) {
+  function updateDynamicChildren(oldCh, newCh, parent, renderer) {
     var oldStartIdx = 0;
     var newStartIdx = 0;
     var oldEndIdx = oldCh.length - 1;
@@ -4005,23 +3841,23 @@ var LWC = (function (exports) {
       } 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 {
@@ -4033,7 +3869,7 @@ var LWC = (function (exports) {
 
         if (isUndefined$1(idxInOld)) {
           // New element
-          mount(newStartVnode, parent, oldStartVnode.elm);
+          mount(newStartVnode, parent, renderer, oldStartVnode.elm);
           newStartVnode = newCh[++newStartIdx];
         } else {
           elmToMove = oldCh[idxInOld];
@@ -4041,9 +3877,9 @@ 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); // 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`
@@ -4056,7 +3892,7 @@ var LWC = (function (exports) {
 
 
               oldCh[idxInOld] = undefined;
-              insertNode(elmToMove.elm, parent, oldStartVnode.elm);
+              insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
             }
           }
 
@@ -4069,35 +3905,35 @@ var LWC = (function (exports) {
       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
@@ -4105,22 +3941,22 @@ var LWC = (function (exports) {
 
     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;
         }
       }
@@ -4138,6 +3974,20 @@ 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: key,
+      elm: undefined,
+      fragment: fragment,
+      owner: getVMBeingRendered()
+    };
   } // [h]tml node
 
 
@@ -4504,6 +4354,7 @@ var LWC = (function (exports) {
     co: co,
     dc: dc,
     ti: ti,
+    st: st,
     gid: gid,
     fid: fid,
     shc: shc
@@ -4532,7 +4383,11 @@ var LWC = (function (exports) {
     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
@@ -4551,11 +4406,11 @@ var LWC = (function (exports) {
 
     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.
@@ -4568,12 +4423,12 @@ var LWC = (function (exports) {
 
     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.
@@ -4588,8 +4443,8 @@ var LWC = (function (exports) {
     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));
@@ -4686,31 +4541,33 @@ var LWC = (function (exports) {
 
   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);
       }
     }
 
@@ -4814,6 +4671,91 @@ var LWC = (function (exports) {
     }
   }
 
+  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;
@@ -4861,7 +4803,7 @@ var LWC = (function (exports) {
           // 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
@@ -4872,10 +4814,10 @@ var LWC = (function (exports) {
 
         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 () {
@@ -5211,7 +5153,7 @@ var LWC = (function (exports) {
     return ancestor;
   }
 
-  function createVM(elm, ctor, options) {
+  function createVM(elm, ctor, renderer, options) {
     var mode = options.mode,
         owner = options.owner,
         tagName = options.tagName,
@@ -5244,7 +5186,7 @@ var LWC = (function (exports) {
         hasTokenInClass: undefined,
         hasTokenInAttribute: undefined,
         hasScopedStyles: undefined,
-        styleVNode: null,
+        styleVNodes: null,
         tplCache: EmptyObject,
         wiredConnecting: EmptyArray,
         wiredDisconnecting: EmptyArray
@@ -5258,9 +5200,10 @@ var LWC = (function (exports) {
       renderRoot: null,
       callHook: callHook,
       setHook: setHook,
-      getHook: getHook
+      getHook: getHook,
+      renderer: renderer
     };
-    vm.shadowMode = computeShadowMode(vm);
+    vm.shadowMode = computeShadowMode(vm, renderer);
     vm.tro = getTemplateReactiveObserver(vm);
 
 
@@ -5273,11 +5216,13 @@ var LWC = (function (exports) {
     return vm;
   }
 
-  function computeShadowMode(vm) {
+  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 */
       ) {
@@ -5286,7 +5231,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) {
@@ -5361,7 +5306,8 @@ var LWC = (function (exports) {
 
   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;
 
@@ -5376,7 +5322,7 @@ var LWC = (function (exports) {
           , vm);
         }, function () {
           // job
-          patchChildren(oldCh, newCh, renderRoot);
+          patchChildren(oldCh, newCh, renderRoot, renderer);
         }, function () {
           // post
           logOperationEnd(2
@@ -5398,9 +5344,10 @@ var LWC = (function (exports) {
   }
 
   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;
     }
 
@@ -5609,13 +5556,14 @@ var LWC = (function (exports) {
 
   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);
       }
     }
 
@@ -5625,7 +5573,9 @@ var LWC = (function (exports) {
   }
 
   function scheduleRehydration(vm) {
-    if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
+    var ssr = vm.renderer.ssr;
+
+    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -5792,7 +5742,8 @@ var LWC = (function (exports) {
     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
@@ -5812,7 +5763,7 @@ var LWC = (function (exports) {
           ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
         }
       });
-      dispatchEvent$1(elm, contextRegistrationEvent);
+      dispatchEvent(elm, contextRegistrationEvent);
     });
   }
 
@@ -6066,79 +6017,103 @@ var LWC = (function (exports) {
   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 */
@@ -6148,9 +6123,10 @@ var LWC = (function (exports) {
       // 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')
@@ -6159,27 +6135,28 @@ var LWC = (function (exports) {
       }
     }
 
-    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,
@@ -6188,16 +6165,17 @@ var LWC = (function (exports) {
     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);
@@ -6207,18 +6185,19 @@ var LWC = (function (exports) {
   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;
         }
       }
@@ -6226,31 +6205,39 @@ var LWC = (function (exports) {
 
     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;
     }
@@ -6258,19 +6245,21 @@ var LWC = (function (exports) {
     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.
@@ -6281,7 +6270,10 @@ var LWC = (function (exports) {
           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) {
 
@@ -6292,18 +6284,20 @@ var LWC = (function (exports) {
     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) {
@@ -6324,11 +6318,12 @@ var LWC = (function (exports) {
     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) {
@@ -6364,6 +6359,57 @@ var LWC = (function (exports) {
 
     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.
@@ -6411,7 +6457,7 @@ var LWC = (function (exports) {
 
     return ctor;
   }
-  /* version: 2.14.1 */
+  /* version: 2.16.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6581,7 +6627,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.
       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,
@@ -6657,9 +6703,22 @@ var LWC = (function (exports) {
   }
 
   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);
   }
@@ -6791,44 +6850,54 @@ var LWC = (function (exports) {
     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.
@@ -6836,7 +6905,6 @@ var LWC = (function (exports) {
    * 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;
@@ -6854,7 +6922,7 @@ var LWC = (function (exports) {
   }
 
   function createVMWithProps(element, Ctor, props) {
-    var vm = createVM(element, Ctor, {
+    var vm = createVM(element, Ctor, renderer, {
       mode: 'open',
       owner: null,
       tagName: element.tagName.toLowerCase(),
@@ -6970,7 +7038,7 @@ var LWC = (function (exports) {
           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
@@ -7079,7 +7147,7 @@ var LWC = (function (exports) {
       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
 
     /**
@@ -7090,7 +7158,7 @@ var LWC = (function (exports) {
      */
 
     var element = new UpgradableConstructor(function (elm) {
-      createVM(elm, Ctor, {
+      createVM(elm, Ctor, renderer, {
         tagName: sel,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
         owner: null
@@ -7187,7 +7255,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;
@@ -7201,11 +7269,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;