lwc 2.14.1 → 2.16.0

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

@@ -305,6 +305,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$';
@@ -368,9 +369,9 @@
    */
   // Increment whenever the LWC template compiler changes
 
-  var LWC_VERSION = "2.14.1";
+  var LWC_VERSION = "2.16.0";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.14.1 */
+  /** version: 2.16.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -549,8 +550,33 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.14.1 */
+  /** version: 2.16.0 */
 
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  // @ts-ignore
+
+
+  if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
+    window.addEventListener('test-dummy-flag', function () {
+      var hasFlag = false;
+
+      if (runtimeFlags.DUMMY_TEST_FLAG) {
+        hasFlag = true;
+      }
+
+      window.dispatchEvent(new CustomEvent('has-dummy-flag', {
+        detail: {
+          package: '@lwc/engine-dom',
+          hasFlag: hasFlag
+        }
+      }));
+    });
+  }
   /* proxy-compat-disable */
 
   /*
@@ -702,237 +728,6 @@
     }
 
     return list;
-  } //
-  // 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 assertInstanceOfHTMLElement$1;
-
-  function setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElementImpl) {
-    assertInstanceOfHTMLElement$1 = assertInstanceOfHTMLElementImpl;
-  }
-
-  var defineCustomElement$1;
-
-  function setDefineCustomElement(defineCustomElementImpl) {
-    defineCustomElement$1 = defineCustomElementImpl;
-  }
-
-  var getCustomElement$1;
-
-  function setGetCustomElement(getCustomElementImpl) {
-    getCustomElement$1 = getCustomElementImpl;
   }
   /*
    * Copyright (c) 2019, salesforce.com, inc.
@@ -2585,7 +2380,9 @@
     var bridge = def.bridge;
 
     if (process.env.NODE_ENV !== 'production') {
-      assertInstanceOfHTMLElement$1(vm.elm, "Component creation requires a DOM element to be associated to ".concat(vm, "."));
+      var _assertInstanceOfHTMLElement = vm.renderer.assertInstanceOfHTMLElement;
+
+      _assertInstanceOfHTMLElement(vm.elm, "Component creation requires a DOM element to be associated to ".concat(vm, "."));
     }
 
     var component = this;
@@ -2629,13 +2426,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);
 
@@ -2656,14 +2454,15 @@
   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;
 
       if (process.env.NODE_ENV !== 'production') {
         var _vmBeingRendered2 = getVMBeingRendered();
@@ -2674,99 +2473,105 @@
       }
 
       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;
 
       if (process.env.NODE_ENV !== 'production') {
         assert.isFalse(isBeingConstructed(vm), "Failed to construct '".concat(getComponentTag(vm), "': The result must not have attributes."));
       }
 
       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;
 
       if (process.env.NODE_ENV !== 'production') {
         assert.isFalse(isBeingConstructed(vm), "Failed to construct '".concat(getComponentTag(vm), "': The result must not have attributes."));
       }
 
       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;
 
       if (process.env.NODE_ENV !== 'production') {
         warnIfInvokedDuringConstruction(vm, '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;
 
       if (process.env.NODE_ENV !== 'production') {
         // TODO [#1290]: this still fails in dev but works in production, eventually, we should
@@ -2774,7 +2579,7 @@
         assert.isFalse(isBeingConstructed(vm), "Failed to construct ".concat(vm, ": The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead."));
       }
 
-      return getClassList$1(elm);
+      return getClassList(elm);
     },
 
     get template() {
@@ -2797,97 +2602,97 @@
       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'];
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfInvokedDuringConstruction(vm, 'children');
+      }
 
-  function getChildGetter(methodName) {
-    switch (methodName) {
-      case 'children':
-        return getChildren$1;
+      return renderer.getChildren(vm.elm);
+    },
 
-      case 'childNodes':
-        return getChildNodes$1;
+    get childNodes() {
+      var vm = getAssociatedVM(this);
+      var renderer = vm.renderer;
 
-      case 'firstChild':
-        return getFirstChild$1;
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfInvokedDuringConstruction(vm, 'childNodes');
+      }
 
-      case 'firstElementChild':
-        return getFirstElementChild$1;
+      return renderer.getChildNodes(vm.elm);
+    },
 
-      case 'lastChild':
-        return getLastChild$1;
+    get firstChild() {
+      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
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfInvokedDuringConstruction(vm, 'firstChild');
+      }
 
+      return renderer.getFirstChild(vm.elm);
+    },
 
-  var _loop = function _loop() {
-    var childGetter = _childGetters[_i7];
-    queryAndChildGetterDescriptors[childGetter] = {
-      get: function get() {
-        var vm = getAssociatedVM(this);
-        var elm = vm.elm;
+    get firstElementChild() {
+      var vm = getAssociatedVM(this);
+      var renderer = vm.renderer;
 
-        if (process.env.NODE_ENV !== 'production') {
-          warnIfInvokedDuringConstruction(vm, childGetter);
-        }
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfInvokedDuringConstruction(vm, 'firstElementChild');
+      }
 
-        return getChildGetter(childGetter)(elm);
-      },
-      configurable: true,
-      enumerable: true
-    };
-  };
+      return renderer.getFirstElementChild(vm.elm);
+    },
 
-  for (var _i7 = 0, _childGetters = childGetters; _i7 < _childGetters.length; _i7++) {
-    _loop();
-  }
+    get lastChild() {
+      var vm = getAssociatedVM(this);
+      var renderer = vm.renderer;
 
-  var queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll'];
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfInvokedDuringConstruction(vm, 'lastChild');
+      }
 
-  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;
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfInvokedDuringConstruction(vm, 'lastElementChild');
+      }
 
-      case 'querySelectorAll':
-        return querySelectorAll$1;
-    }
-  } // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
+      return renderer.getLastElementChild(vm.elm);
+    },
 
+    render: function render() {
+      var vm = getAssociatedVM(this);
+      return vm.def.template;
+    },
+    toString: function toString() {
+      var vm = getAssociatedVM(this);
+      return "[object ".concat(vm.def.name, "]");
+    }
+  };
+  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;
 
         if (process.env.NODE_ENV !== 'production') {
           warnIfInvokedDuringConstruction(vm, "".concat(queryMethod, "()"));
         }
 
-        return getQueryMethod(queryMethod)(elm, arg);
+        return renderer[queryMethod](elm, arg);
       },
       configurable: true,
       enumerable: true,
@@ -2895,8 +2700,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);
@@ -3418,8 +3223,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);
 
         if (process.env.NODE_ENV !== 'production') {
@@ -3722,8 +3527,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),
@@ -3734,8 +3539,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,
@@ -4323,12 +4128,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;
@@ -4339,8 +4147,8 @@
      */
 
 
-    CE = /*#__PURE__*/function (_HTMLElementExported$) {
-      _inherits(LWCUpgradableElement, _HTMLElementExported$);
+    CE = /*#__PURE__*/function (_RendererHTMLElement) {
+      _inherits(LWCUpgradableElement, _RendererHTMLElement);
 
       var _super5 = _createSuper(LWCUpgradableElement);
 
@@ -4359,9 +4167,9 @@
       }
 
       return _createClass(LWCUpgradableElement);
-    }(HTMLElementExported$1);
+    }(RendererHTMLElement);
 
-    defineCustomElement$1(tagName, CE);
+    defineCustomElement(tagName, CE);
     return CE;
   }
   /*
@@ -4394,7 +4202,7 @@
 
   var ColonCharCode = 58;
 
-  function patchAttributes(oldVnode, vnode) {
+  function patchAttributes(oldVnode, vnode, renderer) {
     var attrs = vnode.data.attrs;
 
     if (isUndefined$1(attrs)) {
@@ -4408,6 +4216,8 @@
     }
 
     var elm = vnode.elm;
+    var setAttribute = renderer.setAttribute,
+        removeAttribute = renderer.removeAttribute;
 
     for (var key in attrs) {
       var cur = attrs[key];
@@ -4418,14 +4228,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();
@@ -4446,7 +4256,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)) {
@@ -4462,13 +4272,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);
       }
     }
   }
@@ -4525,7 +4337,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;
@@ -4534,7 +4346,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;
@@ -4561,7 +4374,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;
@@ -4570,10 +4383,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);
     }
   }
   /*
@@ -4584,7 +4400,7 @@
    */
 
 
-  function applyEventListeners(vnode) {
+  function applyEventListeners(vnode, renderer) {
     var elm = vnode.elm,
         on = vnode.data.on;
 
@@ -4592,9 +4408,11 @@
       return;
     }
 
+    var addEventListener = renderer.addEventListener;
+
     for (var name in on) {
       var handler = on[name];
-      addEventListener$1(elm, name, handler);
+      addEventListener(elm, name, handler);
     }
   }
   /*
@@ -4608,7 +4426,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;
 
@@ -4616,7 +4434,8 @@
       return;
     }
 
-    var classList = getClassList$1(elm);
+    var getClassList = renderer.getClassList;
+    var classList = getClassList(elm);
 
     for (var name in classMap) {
       classList.add(name);
@@ -4633,7 +4452,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;
 
@@ -4641,13 +4460,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);
     }
   }
   /*
@@ -4658,15 +4479,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;
     }
@@ -4687,112 +4510,169 @@
       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;
+      }
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      var isLight = renderMode === 0
+      /* Light */
+      ;
+      patchElementWithRestrictions(elm, {
+        isPortal: false,
+        isLight: isLight
+      });
+    }
+
+    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
@@ -4803,9 +4683,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;
 
@@ -4815,8 +4695,8 @@
       throw new TypeError("Incorrect Component Constructor");
     }
 
-    patchElementPropsAndAttrs$1(null, vnode);
-    insertNode(elm, parent, anchor);
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
 
     if (vm) {
       if (process.env.NODE_ENV !== 'production') {
@@ -4828,17 +4708,17 @@
       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
@@ -4848,7 +4728,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
@@ -4857,28 +4737,30 @@
     }
   }
 
-  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) {
@@ -4888,10 +4770,10 @@
         {
           // 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;
         }
 
@@ -4909,16 +4791,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);
       }
     }
   }
@@ -4936,22 +4818,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
@@ -4962,63 +4848,64 @@
     }
   }
 
-  function updateTextContent(vnode) {
+  function updateTextContent(vnode, renderer) {
     var elm = vnode.elm,
         text = vnode.text;
+    var setText = renderer.setText;
 
     if (process.env.NODE_ENV !== 'production') {
       unlockDomMutation();
     }
 
-    setText$1(elm, text);
+    setText(elm, text);
 
     if (process.env.NODE_ENV !== 'production') {
       lockDomMutation();
     }
   }
 
-  function insertNode(node, parent, anchor) {
+  function insertNode(node, parent, anchor, renderer) {
     if (process.env.NODE_ENV !== 'production') {
       unlockDomMutation();
     }
 
-    insert$1(node, parent, anchor);
+    renderer.insert(node, parent, anchor);
 
     if (process.env.NODE_ENV !== 'production') {
       lockDomMutation();
     }
   }
 
-  function removeNode(node, parent) {
+  function removeNode(node, parent, renderer) {
     if (process.env.NODE_ENV !== 'production') {
       unlockDomMutation();
     }
 
-    remove$1(node, parent);
+    renderer.remove(node, parent);
 
     if (process.env.NODE_ENV !== 'production') {
       lockDomMutation();
     }
   }
 
-  function patchElementPropsAndAttrs$1(oldVnode, vnode) {
+  function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     if (isNull(oldVnode)) {
-      applyEventListeners(vnode);
-      applyStaticClassAttribute(vnode);
-      applyStaticStyleAttribute(vnode);
+      applyEventListeners(vnode, renderer);
+      applyStaticClassAttribute(vnode, renderer);
+      applyStaticStyleAttribute(vnode, renderer);
     } // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
     // value is set before type=radio.
 
 
-    patchClassAttribute(oldVnode, vnode);
-    patchStyleAttribute(oldVnode, vnode);
-    patchAttributes(oldVnode, vnode);
-    patchProps(oldVnode, vnode);
+    patchClassAttribute(oldVnode, vnode, renderer);
+    patchStyleAttribute(oldVnode, vnode, renderer);
+    patchAttributes(oldVnode, vnode, renderer);
+    patchProps(oldVnode, vnode, renderer);
   }
 
-  function fallbackElmHook(elm, vnode) {
+  function fallbackElmHook(elm, vnode, renderer) {
     var owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
 
     if (owner.shadowMode === 1
     /* Synthetic */
@@ -5085,7 +4972,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`.
@@ -5098,7 +4985,7 @@
         mode = vnode.mode,
         ctor = vnode.ctor,
         owner = vnode.owner;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
 
     if (owner.shadowMode === 1
     /* Synthetic */
@@ -5111,7 +4998,7 @@
       }
     }
 
-    vm = createVM(elm, ctor, {
+    vm = createVM(elm, ctor, renderer, {
       mode: mode,
       owner: owner,
       tagName: sel
@@ -5130,8 +5017,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;
@@ -5157,8 +5044,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);
@@ -5208,7 +5095,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;
@@ -5234,23 +5121,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 {
@@ -5262,7 +5149,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];
@@ -5270,9 +5157,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`
@@ -5285,7 +5172,7 @@
 
 
               oldCh[idxInOld] = undefined;
-              insertNode(elmToMove.elm, parent, oldStartVnode.elm);
+              insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
             }
           }
 
@@ -5298,35 +5185,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
@@ -5334,22 +5221,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;
         }
       }
@@ -5367,6 +5254,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
 
 
@@ -5856,6 +5757,7 @@
     co: co,
     dc: dc,
     ti: ti,
+    st: st,
     gid: gid,
     fid: fid,
     shc: shc
@@ -5884,7 +5786,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
@@ -5903,11 +5809,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.
@@ -5920,12 +5826,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.
@@ -5940,8 +5846,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));
@@ -6046,31 +5952,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);
       }
     }
 
@@ -6248,6 +6156,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) {
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(isFunction$1(html), "evaluateTemplate() second argument must be an imported template instead of ".concat(toString$1(html))); // in dev-mode, we support hot swapping of templates, which means that
@@ -6304,7 +6297,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 (process.env.NODE_ENV !== 'production') {
@@ -6320,10 +6313,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 () {
@@ -6709,7 +6702,7 @@
     return ancestor;
   }
 
-  function createVM(elm, ctor, options) {
+  function createVM(elm, ctor, renderer, options) {
     var mode = options.mode,
         owner = options.owner,
         tagName = options.tagName,
@@ -6742,7 +6735,7 @@
         hasTokenInClass: undefined,
         hasTokenInAttribute: undefined,
         hasScopedStyles: undefined,
-        styleVNode: null,
+        styleVNodes: null,
         tplCache: EmptyObject,
         wiredConnecting: EmptyArray,
         wiredDisconnecting: EmptyArray
@@ -6756,9 +6749,10 @@
       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);
 
     if (process.env.NODE_ENV !== 'production') {
@@ -6783,11 +6777,13 @@
     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 */
       ) {
@@ -6796,7 +6792,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) {
@@ -6887,7 +6883,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;
 
@@ -6902,7 +6899,7 @@
           , vm);
         }, function () {
           // job
-          patchChildren(oldCh, newCh, renderRoot);
+          patchChildren(oldCh, newCh, renderRoot, renderer);
         }, function () {
           // post
           logOperationEnd(2
@@ -6924,9 +6921,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;
     }
 
@@ -7144,13 +7142,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);
       }
     }
 
@@ -7160,7 +7159,9 @@
   }
 
   function scheduleRehydration(vm) {
-    if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
+    var ssr = vm.renderer.ssr;
+
+    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -7347,7 +7348,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
@@ -7367,7 +7369,7 @@
           ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
         }
       });
-      dispatchEvent$1(elm, contextRegistrationEvent);
+      dispatchEvent(elm, contextRegistrationEvent);
     });
   }
 
@@ -7631,95 +7633,123 @@
   function hydrateVM(vm) {
     var children = renderComponent(vm);
     vm.children = children;
-    var parentNode = vm.renderRoot;
-    hydrateChildren(getFirstChild$1(parentNode), children, parentNode, vm);
+    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);
     }
 
     if (process.env.NODE_ENV !== 'production') {
-      var nodeValue = getProperty$1(node, 'nodeValue');
+      var _getProperty = renderer.getProperty;
+
+      var nodeValue = _getProperty(node, 'nodeValue');
 
       if (nodeValue !== vnode.text && !(nodeValue === "\u200D" && vnode.text === '')) {
         logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
       }
     }
 
-    setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    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);
     }
 
     if (process.env.NODE_ENV !== 'production') {
-      var nodeValue = getProperty$1(node, 'nodeValue');
+      var _getProperty2 = renderer.getProperty;
+
+      var nodeValue = _getProperty2(node, 'nodeValue');
 
       if (nodeValue !== vnode.text) {
         logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
       }
     }
 
-    setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    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 */
@@ -7729,42 +7759,44 @@
       // 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')
           });
         } else {
           if (process.env.NODE_ENV !== 'production') {
-            logWarn("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), vnode.owner);
+            logWarn("Mismatch hydrating element <".concat(_getProperty3(elm, 'tagName').toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), owner);
           }
         }
       }
     }
 
-    patchElementPropsAndAttrs(vnode);
+    patchElementPropsAndAttrs(vnode, renderer);
 
     if (!isDomManual) {
-      hydrateChildren(getFirstChild$1(elm), vnode.children, elm, vnode.owner);
+      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,
@@ -7773,7 +7805,7 @@
     vnode.elm = elm;
     vnode.vm = vm;
     allocateChildren(vnode, vm);
-    patchElementPropsAndAttrs(vnode); // Insert hook section:
+    patchElementPropsAndAttrs(vnode, renderer); // Insert hook section:
 
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(vm.state === 0
@@ -7786,9 +7818,10 @@
     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, vm);
+
+      hydrateChildren(_getFirstChild2(elm), vnode.children, elm, vm);
     }
 
     hydrateVM(vm);
@@ -7799,13 +7832,14 @@
     var hasWarned = false;
     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;
@@ -7817,7 +7851,7 @@
             }
           }
 
-          mount(childVnode, parentNode, anchor);
+          mount(childVnode, parentNode, renderer, anchor);
           anchor = childVnode.elm;
         }
       }
@@ -7830,38 +7864,40 @@
         if (!hasWarned) {
           logError("Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.", owner);
         }
-      }
+      } // nextSibling is mostly harmless, and since we don't have
+      // a good reference to what element to act upon, we instead
+      // rely on the vm's associated renderer for navigating to the
+      // next node in the list to be hydrated.
+
+
+      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;
-
-    if (!isUndefined$1(msg)) {
-      if (process.env.NODE_ENV !== 'production') {
-        logError(msg, vnode.owner);
-      }
-    }
-
-    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) {
       if (process.env.NODE_ENV !== 'production') {
         logError('Hydration mismatch: incorrect node type received', vnode.owner);
       }
@@ -7872,22 +7908,24 @@
     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()) {
       if (process.env.NODE_ENV !== 'production') {
-        logError("Hydration mismatch: expecting element with tag \"".concat(vnode.sel.toLowerCase(), "\" but found \"").concat(getProperty$1(elm, 'tagName').toLowerCase(), "\"."), vnode.owner);
+        logError("Hydration mismatch: expecting element with tag \"".concat(vnode.sel.toLowerCase(), "\" but found \"").concat(getProperty(elm, 'tagName').toLowerCase(), "\"."), vnode.owner);
       }
 
       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.
@@ -7898,11 +7936,15 @@
           attrName = _Object$entries$_i[0],
           attrValue = _Object$entries$_i[1];
 
-      var elmAttrValue = getAttribute$1(elm, attrName);
+      var owner = vnode.owner;
+      var _getAttribute = renderer.getAttribute;
+
+      var elmAttrValue = _getAttribute(elm, attrName);
 
       if (String(attrValue) !== elmAttrValue) {
         if (process.env.NODE_ENV !== 'production') {
-          logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
+          var _getProperty4 = renderer.getProperty;
+          logError("Mismatch hydrating element <".concat(_getProperty4(elm, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), owner);
         }
 
         nodesAreCompatible = false;
@@ -7912,20 +7954,22 @@
     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;
     var vnodeClassName;
 
-    if (!isUndefined$1(className) && String(className) !== getProperty$1(elm, 'className')) {
+    if (!isUndefined$1(className) && String(className) !== getProperty(elm, 'className')) {
       // className is used when class is bound to an expr.
       nodesAreCompatible = false;
       vnodeClassName = className;
     } else if (!isUndefined$1(classMap)) {
       // classMap is used when class is set to static value.
-      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) {
@@ -7945,18 +7989,19 @@
 
     if (!nodesAreCompatible) {
       if (process.env.NODE_ENV !== 'production') {
-        logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(getProperty$1(elm, 'className'), "\""), vnode.owner);
+        logError("Mismatch hydrating element <".concat(getProperty(elm, 'tagName').toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(getProperty(elm, 'className'), "\""), vnode.owner);
       }
     }
 
     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 vnodeStyle;
     var nodesAreCompatible = true;
 
@@ -7994,12 +8039,67 @@
 
     if (!nodesAreCompatible) {
       if (process.env.NODE_ENV !== 'production') {
-        logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
+        var _getProperty5 = renderer.getProperty;
+        logError("Mismatch hydrating element <".concat(_getProperty5(elm, 'tagName').toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
       }
     }
 
     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')) {
+      if (process.env.NODE_ENV !== 'production') {
+        logError("Hydration mismatch: expecting element with tag \"".concat(getProperty(client, 'tagName').toLowerCase(), "\" but found \"").concat(getProperty(ssr, 'tagName').toLowerCase(), "\"."), vnode.owner);
+      }
+
+      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.
@@ -8069,7 +8169,7 @@
         _step3;
 
     try {
-      var _loop3 = function _loop3() {
+      var _loop2 = function _loop2() {
         var prop = _step3.value;
         var originalArrayMethod = getOriginalArrayMethod(prop);
 
@@ -8081,7 +8181,7 @@
       };
 
       for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        _loop3();
+        _loop2();
       }
     } catch (err) {
       _iterator3.e(err);
@@ -8102,7 +8202,7 @@
           _step4;
 
       try {
-        var _loop4 = function _loop4() {
+        var _loop3 = function _loop3() {
           var prop = _step4.value;
           var value = tmpl[prop];
           defineProperty(tmpl, prop, {
@@ -8122,7 +8222,7 @@
         };
 
         for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          _loop4();
+          _loop3();
         }
       } catch (err) {
         _iterator4.e(err);
@@ -8172,7 +8272,7 @@
 
     return ctor;
   }
-  /* version: 2.14.1 */
+  /* version: 2.16.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8351,7 +8451,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,
@@ -8427,9 +8527,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);
   }
@@ -8572,75 +8685,49 @@
   }
 
   var HTMLElementExported = HTMLElementConstructor;
-  /*
-   * Copyright (c) 2020, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-
-  setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElement);
-  setAttachShadow(attachShadow);
-  setCreateComment(createComment);
-  setCreateElement(createElement$1);
-  setCreateText(createText);
-  setDefineCustomElement(defineCustomElement);
-  setDispatchEvent(dispatchEvent);
-  setGetAttribute(getAttribute);
-  setGetBoundingClientRect(getBoundingClientRect);
-  setGetChildNodes(getChildNodes);
-  setGetChildren(getChildren);
-  setGetClassList(getClassList);
-  setGetCustomElement(getCustomElement);
-  setGetElementsByClassName(getElementsByClassName);
-  setGetElementsByTagName(getElementsByTagName);
-  setGetFirstChild(getFirstChild);
-  setGetFirstElementChild(getFirstElementChild);
-  setGetLastChild(getLastChild);
-  setGetLastElementChild(getLastElementChild);
-  setGetProperty(getProperty);
-  setHTMLElement(HTMLElementExported);
-  setInsert(insert);
-  setIsConnected(isConnected);
-  setIsNativeShadowDefined(isNativeShadowDefined);
-  setIsSyntheticShadowDefined(isSyntheticShadowDefined);
-  setNextSibling(nextSibling);
-  setQuerySelector(querySelector);
-  setQuerySelectorAll(querySelectorAll);
-  setRemove(remove);
-  setRemoveAttribute(removeAttribute);
-  setRemoveEventListener(removeEventListener);
-  setSetAttribute(setAttribute);
-  setSetCSSStyleProperty(setCSSStyleProperty);
-  setSetProperty(setProperty);
-  setSetText(setText);
-  setSsr(ssr);
-  setAddEventListener(addEventListener);
-  setInsertStylesheet(insertStylesheet);
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  // @ts-ignore
-
-  if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
-    window.addEventListener('test-dummy-flag', function () {
-      var hasFlag = false;
-
-      if (runtimeFlags.DUMMY_TEST_FLAG) {
-        hasFlag = true;
-      }
-
-      window.dispatchEvent(new CustomEvent('has-dummy-flag', {
-        detail: {
-          package: '@lwc/engine-dom',
-          hasFlag: hasFlag
-        }
-      }));
-    });
-  }
+  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.
@@ -8648,7 +8735,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;
@@ -8666,7 +8752,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(),
@@ -8786,7 +8872,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
@@ -8898,7 +8984,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
 
     /**
@@ -8909,7 +8995,7 @@
      */
 
     var element = new UpgradableConstructor(function (elm) {
-      createVM(elm, Ctor, {
+      createVM(elm, Ctor, renderer, {
         tagName: sel,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
         owner: null
@@ -9006,7 +9092,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.14.1 */
+  /* version: 2.16.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -9020,11 +9106,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;