lwc 2.6.2 → 2.7.3

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

@@ -21,7 +21,7 @@ var LWC = (function (exports) {
 
   function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
   function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -348,7 +348,7 @@ var LWC = (function (exports) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.6.2 */
+  /** version: 2.7.3 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -460,7 +460,6 @@ var LWC = (function (exports) {
     ENABLE_NODE_LIST_PATCH: null,
     ENABLE_HTML_COLLECTIONS_PATCH: null,
     ENABLE_NODE_PATCH: null,
-    ENABLE_MIXED_SHADOW_MODE: null,
     ENABLE_WIRE_SYNC_EMIT: null
   };
 
@@ -527,7 +526,7 @@ var LWC = (function (exports) {
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.6.2 */
+  /** version: 2.7.3 */
 
   /* proxy-compat-disable */
 
@@ -615,609 +614,377 @@ var LWC = (function (exports) {
     }
 
     return styleMap;
-  }
-  /*
-   * Copyright (c) 2019, 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
-   */
+  } //
+  // Primitives
+  //
 
 
-  var TargetToReactiveRecordMap = new WeakMap();
+  var ssr$1;
 
-  function getReactiveRecord(target) {
-    var reactiveRecord = TargetToReactiveRecordMap.get(target);
+  function setSsr(ssrImpl) {
+    ssr$1 = ssrImpl;
+  }
 
-    if (isUndefined$1(reactiveRecord)) {
-      var newRecord = create(null);
-      reactiveRecord = newRecord;
-      TargetToReactiveRecordMap.set(target, newRecord);
-    }
+  var isNativeShadowDefined$1;
 
-    return reactiveRecord;
+  function setIsNativeShadowDefined(isNativeShadowDefinedImpl) {
+    isNativeShadowDefined$1 = isNativeShadowDefinedImpl;
   }
 
-  var currentReactiveObserver = null;
+  var isSyntheticShadowDefined$1;
 
-  function valueMutated(target, key) {
-    var reactiveRecord = TargetToReactiveRecordMap.get(target);
+  function setIsSyntheticShadowDefined(isSyntheticShadowDefinedImpl) {
+    isSyntheticShadowDefined$1 = isSyntheticShadowDefinedImpl;
+  }
 
-    if (!isUndefined$1(reactiveRecord)) {
-      var reactiveObservers = reactiveRecord[key];
+  var HTMLElementExported$1;
 
-      if (!isUndefined$1(reactiveObservers)) {
-        for (var _i4 = 0, _len2 = reactiveObservers.length; _i4 < _len2; _i4 += 1) {
-          var ro = reactiveObservers[_i4];
-          ro.notify();
-        }
-      }
-    }
+  function setHTMLElement(HTMLElementImpl) {
+    HTMLElementExported$1 = HTMLElementImpl;
   }
 
-  function valueObserved(target, key) {
-    // We should determine if an active Observing Record is present to track mutations.
-    if (currentReactiveObserver === null) {
-      return;
-    }
+  var isHydrating$1;
 
-    var ro = currentReactiveObserver;
-    var reactiveRecord = getReactiveRecord(target);
-    var reactiveObservers = reactiveRecord[key];
+  function setIsHydrating$1(isHydratingImpl) {
+    isHydrating$1 = isHydratingImpl;
+  }
 
-    if (isUndefined$1(reactiveObservers)) {
-      reactiveObservers = [];
-      reactiveRecord[key] = reactiveObservers;
-    } else if (reactiveObservers[0] === ro) {
-      return; // perf optimization considering that most subscriptions will come from the same record
-    }
+  var insert$1;
 
-    if (ArrayIndexOf.call(reactiveObservers, ro) === -1) {
-      ro.link(reactiveObservers);
-    }
+  function setInsert(insertImpl) {
+    insert$1 = insertImpl;
   }
 
-  var ReactiveObserver = /*#__PURE__*/function () {
-    function ReactiveObserver(callback) {
-      _classCallCheck(this, ReactiveObserver);
-
-      this.listeners = [];
-      this.callback = callback;
-    }
+  var remove$1;
 
-    _createClass(ReactiveObserver, [{
-      key: "observe",
-      value: function observe(job) {
-        var inceptionReactiveRecord = currentReactiveObserver;
-        currentReactiveObserver = this;
-        var error;
+  function setRemove(removeImpl) {
+    remove$1 = removeImpl;
+  }
 
-        try {
-          job();
-        } catch (e) {
-          error = Object(e);
-        } finally {
-          currentReactiveObserver = inceptionReactiveRecord;
+  var createElement$2;
 
-          if (error !== undefined) {
-            throw error; // eslint-disable-line no-unsafe-finally
-          }
-        }
-      }
-      /**
-       * This method is responsible for disconnecting the Reactive Observer
-       * from any Reactive Record that has a reference to it, to prevent future
-       * notifications about previously recorded access.
-       */
+  function setCreateElement(createElementImpl) {
+    createElement$2 = createElementImpl;
+  }
 
-    }, {
-      key: "reset",
-      value: function reset() {
-        var listeners = this.listeners;
-        var len = listeners.length;
+  var createText$1;
 
-        if (len > 0) {
-          for (var _i5 = 0; _i5 < len; _i5 += 1) {
-            var set = listeners[_i5];
-            var pos = ArrayIndexOf.call(listeners[_i5], this);
-            ArraySplice.call(set, pos, 1);
-          }
+  function setCreateText(createTextImpl) {
+    createText$1 = createTextImpl;
+  }
 
-          listeners.length = 0;
-        }
-      } // friend methods
+  var createComment$1;
 
-    }, {
-      key: "notify",
-      value: function notify() {
-        this.callback.call(undefined, this);
-      }
-    }, {
-      key: "link",
-      value: function link(reactiveObservers) {
-        ArrayPush$1.call(reactiveObservers, this); // we keep track of observing records where the observing record was added to so we can do some clean up later on
+  function setCreateComment(createCommentImpl) {
+    createComment$1 = createCommentImpl;
+  }
 
-        ArrayPush$1.call(this.listeners, reactiveObservers);
-      }
-    }]);
+  var nextSibling$1;
 
-    return ReactiveObserver;
-  }();
-  /*
-   * 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
-   */
+  function setNextSibling(nextSiblingImpl) {
+    nextSibling$1 = nextSiblingImpl;
+  }
 
+  var attachShadow$1;
 
-  function componentValueMutated(vm, key) {
-    valueMutated(vm.component, key);
+  function setAttachShadow(attachShadowImpl) {
+    attachShadow$1 = attachShadowImpl;
   }
 
-  function componentValueObserved(vm, key) {
-    valueObserved(vm.component, key);
+  var getProperty$1;
+
+  function setGetProperty(getPropertyImpl) {
+    getProperty$1 = getPropertyImpl;
   }
-  /*
-   * 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
-   */
 
+  var setProperty$1;
 
-  function getComponentTag(vm) {
-    return "<".concat(StringToLowerCase.call(vm.tagName), ">");
-  } // TODO [#1695]: Unify getComponentStack and getErrorComponentStack
+  function setSetProperty(setPropertyImpl) {
+    setProperty$1 = setPropertyImpl;
+  }
 
+  var setText$1;
 
-  function getComponentStack(vm) {
-    var stack = [];
-    var prefix = '';
+  function setSetText(setTextImpl) {
+    setText$1 = setTextImpl;
+  }
 
-    while (!isNull(vm.owner)) {
-      ArrayPush$1.call(stack, prefix + getComponentTag(vm));
-      vm = vm.owner;
-      prefix += '\t';
-    }
+  var getAttribute$1;
 
-    return ArrayJoin.call(stack, '\n');
+  function setGetAttribute(getAttributeImpl) {
+    getAttribute$1 = getAttributeImpl;
   }
 
-  function getErrorComponentStack(vm) {
-    var wcStack = [];
-    var currentVm = vm;
+  var setAttribute$1;
 
-    while (!isNull(currentVm)) {
-      ArrayPush$1.call(wcStack, getComponentTag(currentVm));
-      currentVm = currentVm.owner;
-    }
-
-    return wcStack.reverse().join('\n\t');
+  function setSetAttribute(setAttributeImpl) {
+    setAttribute$1 = setAttributeImpl;
   }
-  /*
-   * 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
-   */
 
+  var removeAttribute$1;
 
-  function log(method, message, vm) {
-    var msg = "[LWC ".concat(method, "]: ").concat(message);
+  function setRemoveAttribute(removeAttributeImpl) {
+    removeAttribute$1 = removeAttributeImpl;
+  }
 
-    if (!isUndefined$1(vm)) {
-      msg = "".concat(msg, "\n").concat(getComponentStack(vm));
-    }
+  var addEventListener$1;
 
-    if (process.env.NODE_ENV === 'test') {
-      /* eslint-disable-next-line no-console */
-      console[method](msg);
-      return;
-    }
-
-    try {
-      throw new Error(msg);
-    } catch (e) {
-      /* eslint-disable-next-line no-console */
-      console[method](e);
-    }
+  function setAddEventListener(addEventListenerImpl) {
+    addEventListener$1 = addEventListenerImpl;
   }
 
-  function logError(message, vm) {
-    log('error', message, vm);
-  }
+  var removeEventListener$1;
 
-  function logWarn(message, vm) {
-    log('warn', message, vm);
+  function setRemoveEventListener(removeEventListenerImpl) {
+    removeEventListener$1 = removeEventListenerImpl;
   }
-  /*
-   * 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
-   */
 
+  var dispatchEvent$1;
 
-  function handleEvent(event, vnode) {
-    var type = event.type;
-    var on = vnode.data.on;
-    var handler = on && on[type]; // call event handler if exists
-
-    if (handler) {
-      handler.call(undefined, event);
-    }
+  function setDispatchEvent(dispatchEventImpl) {
+    dispatchEvent$1 = dispatchEventImpl;
   }
 
-  function createListener() {
-    return function handler(event) {
-      handleEvent(event, handler.vnode);
-    };
-  }
+  var getClassList$1;
 
-  function updateAllEventListeners(oldVnode, vnode) {
-    if (isUndefined$1(oldVnode.listener)) {
-      createAllEventListeners(vnode);
-    } else {
-      vnode.listener = oldVnode.listener;
-      vnode.listener.vnode = vnode;
-    }
+  function setGetClassList(getClassListImpl) {
+    getClassList$1 = getClassListImpl;
   }
 
-  function createAllEventListeners(vnode) {
-    var elm = vnode.elm,
-        on = vnode.data.on,
-        renderer = vnode.owner.renderer;
+  var setCSSStyleProperty$1;
 
-    if (isUndefined$1(on)) {
-      return;
-    }
+  function setSetCSSStyleProperty(setCSSStylePropertyImpl) {
+    setCSSStyleProperty$1 = setCSSStylePropertyImpl;
+  }
 
-    var listener = vnode.listener = createListener();
-    listener.vnode = vnode;
-    var name;
+  var getBoundingClientRect$1;
 
-    for (name in on) {
-      renderer.addEventListener(elm, name, listener);
-    }
+  function setGetBoundingClientRect(getBoundingClientRectImpl) {
+    getBoundingClientRect$1 = getBoundingClientRectImpl;
   }
 
-  var modEvents = {
-    update: updateAllEventListeners,
-    create: createAllEventListeners
-  };
-  /*
-   * 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
-   */
+  var querySelector$1;
 
-  var defaultDefHTMLPropertyNames = ['accessKey', 'dir', 'draggable', 'hidden', 'id', 'lang', 'spellcheck', 'tabIndex', 'title'];
+  function setQuerySelector(querySelectorImpl) {
+    querySelector$1 = querySelectorImpl;
+  }
 
-  function offsetPropertyErrorMessage(name) {
-    return "Using the `".concat(name, "` property is an anti-pattern because it rounds the value to an integer. Instead, use the `getBoundingClientRect` method to obtain fractional values for the size of an element and its position relative to the viewport.");
-  } // Global HTML Attributes & Properties
-  // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+  var querySelectorAll$1;
 
+  function setQuerySelectorAll(querySelectorAllImpl) {
+    querySelectorAll$1 = querySelectorAllImpl;
+  }
 
-  var globalHTMLProperties = assign(create(null), {
-    accessKey: {
-      attribute: 'accesskey'
-    },
-    accessKeyLabel: {
-      readOnly: true
-    },
-    className: {
-      attribute: 'class',
-      error: 'Using the `className` property is an anti-pattern because of slow runtime behavior and potential conflicts with classes provided by the owner element. Use the `classList` API instead.'
-    },
-    contentEditable: {
-      attribute: 'contenteditable'
-    },
-    dataset: {
-      readOnly: true,
-      error: "Using the `dataset` property is an anti-pattern because it can't be statically analyzed. Expose each property individually using the `@api` decorator instead."
-    },
-    dir: {
-      attribute: 'dir'
-    },
-    draggable: {
-      attribute: 'draggable'
-    },
-    dropzone: {
-      attribute: 'dropzone',
-      readOnly: true
-    },
-    hidden: {
-      attribute: 'hidden'
-    },
-    id: {
-      attribute: 'id'
-    },
-    inputMode: {
-      attribute: 'inputmode'
-    },
-    lang: {
-      attribute: 'lang'
-    },
-    slot: {
-      attribute: 'slot',
-      error: 'Using the `slot` property is an anti-pattern.'
-    },
-    spellcheck: {
-      attribute: 'spellcheck'
-    },
-    style: {
-      attribute: 'style'
-    },
-    tabIndex: {
-      attribute: 'tabindex'
-    },
-    title: {
-      attribute: 'title'
-    },
-    translate: {
-      attribute: 'translate'
-    },
-    // additional "global attributes" that are not present in the link above.
-    isContentEditable: {
-      readOnly: true
-    },
-    offsetHeight: {
-      readOnly: true,
-      error: offsetPropertyErrorMessage('offsetHeight')
-    },
-    offsetLeft: {
-      readOnly: true,
-      error: offsetPropertyErrorMessage('offsetLeft')
-    },
-    offsetParent: {
-      readOnly: true
-    },
-    offsetTop: {
-      readOnly: true,
-      error: offsetPropertyErrorMessage('offsetTop')
-    },
-    offsetWidth: {
-      readOnly: true,
-      error: offsetPropertyErrorMessage('offsetWidth')
-    },
-    role: {
-      attribute: 'role'
-    }
-  });
-  var controlledElement = null;
-  var controlledAttributeName;
+  var getElementsByTagName$1;
 
-  function isAttributeLocked(elm, attrName) {
-    return elm !== controlledElement || attrName !== controlledAttributeName;
+  function setGetElementsByTagName(getElementsByTagNameImpl) {
+    getElementsByTagName$1 = getElementsByTagNameImpl;
   }
 
-  function lockAttribute(_elm, _key) {
-    controlledElement = null;
-    controlledAttributeName = undefined;
-  }
+  var getElementsByClassName$1;
 
-  function unlockAttribute(elm, key) {
-    controlledElement = elm;
-    controlledAttributeName = key;
+  function setGetElementsByClassName(getElementsByClassNameImpl) {
+    getElementsByClassName$1 = getElementsByClassNameImpl;
   }
-  /*
-   * 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
-   */
 
+  var getChildren$1;
 
-  var xlinkNS = 'http://www.w3.org/1999/xlink';
-  var xmlNS = 'http://www.w3.org/XML/1998/namespace';
-  var ColonCharCode = 58;
+  function setGetChildren(getChildrenImpl) {
+    getChildren$1 = getChildrenImpl;
+  }
 
-  function updateAttrs(oldVnode, vnode) {
-    var attrs = vnode.data.attrs,
-        renderer = vnode.owner.renderer;
+  var getChildNodes$1;
 
-    if (isUndefined$1(attrs)) {
-      return;
-    }
+  function setGetChildNodes(getChildNodesImpl) {
+    getChildNodes$1 = getChildNodesImpl;
+  }
 
-    var oldAttrs = oldVnode.data.attrs;
+  var getFirstChild$1;
 
-    if (oldAttrs === attrs) {
-      return;
-    }
+  function setGetFirstChild(getFirstChildImpl) {
+    getFirstChild$1 = getFirstChildImpl;
+  }
 
-    if (process.env.NODE_ENV !== 'production') {
-      assert.invariant(isUndefined$1(oldAttrs) || keys(oldAttrs).join(',') === keys(attrs).join(','), "vnode.data.attrs cannot change shape.");
-    }
+  var getFirstElementChild$1;
 
-    var elm = vnode.elm;
-    var setAttribute = renderer.setAttribute,
-        removeAttribute = renderer.removeAttribute;
-    var key;
-    oldAttrs = isUndefined$1(oldAttrs) ? EmptyObject : oldAttrs; // update modified attributes, add new attributes
-    // this routine is only useful for data-* attributes in all kind of elements
-    // and aria-* in standard elements (custom elements will use props for these)
-
-    for (key in attrs) {
-      var cur = attrs[key];
-      var old = oldAttrs[key];
+  function setGetFirstElementChild(getFirstElementChildImpl) {
+    getFirstElementChild$1 = getFirstElementChildImpl;
+  }
 
-      if (old !== cur) {
-        unlockAttribute(elm, key);
+  var getLastChild$1;
 
-        if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
-          // Assume xml namespace
-          setAttribute(elm, key, cur, xmlNS);
-        } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
-          // Assume xlink namespace
-          setAttribute(elm, key, cur, xlinkNS);
-        } else if (isNull(cur)) {
-          removeAttribute(elm, key);
-        } else {
-          setAttribute(elm, key, cur);
-        }
+  function setGetLastChild(getLastChildImpl) {
+    getLastChild$1 = getLastChildImpl;
+  }
 
-        lockAttribute();
-      }
-    }
+  var getLastElementChild$1;
+
+  function setGetLastElementChild(getLastElementChildImpl) {
+    getLastElementChild$1 = getLastElementChildImpl;
   }
 
-  var emptyVNode$3 = {
-    data: {}
-  };
-  var modAttrs = {
-    create: function create(vnode) {
-      return updateAttrs(emptyVNode$3, vnode);
-    },
-    update: updateAttrs
-  };
-  /*
-   * 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
-   */
+  var isConnected$1;
 
-  function isLiveBindingProp(sel, key) {
-    // For properties with live bindings, we read values from the DOM element
-    // instead of relying on internally tracked values.
-    return sel === 'input' && (key === 'value' || key === 'checked');
+  function setIsConnected(isConnectedImpl) {
+    isConnected$1 = isConnectedImpl;
   }
 
-  function update(oldVnode, vnode) {
-    var props = vnode.data.props;
+  var insertGlobalStylesheet$1;
 
-    if (isUndefined$1(props)) {
-      return;
-    }
+  function setInsertGlobalStylesheet(insertGlobalStylesheetImpl) {
+    insertGlobalStylesheet$1 = insertGlobalStylesheetImpl;
+  }
 
-    var oldProps = oldVnode.data.props;
+  var insertStylesheet$1;
 
-    if (oldProps === props) {
-      return;
-    }
+  function setInsertStylesheet(insertStylesheetImpl) {
+    insertStylesheet$1 = insertStylesheetImpl;
+  }
 
-    if (process.env.NODE_ENV !== 'production') {
-      assert.invariant(isUndefined$1(oldProps) || keys(oldProps).join(',') === keys(props).join(','), 'vnode.data.props cannot change shape.');
-    }
+  var assertInstanceOfHTMLElement$1;
 
-    var isFirstPatch = isUndefined$1(oldProps);
-    var elm = vnode.elm,
-        sel = vnode.sel,
-        renderer = vnode.owner.renderer;
+  function setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElementImpl) {
+    assertInstanceOfHTMLElement$1 = assertInstanceOfHTMLElementImpl;
+  }
 
-    for (var key in props) {
-      var cur = props[key]; // if it is the first time this element is patched, or the current value is different to the previous value...
+  var defineCustomElement$1;
 
-      if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? renderer.getProperty(elm, key) : oldProps[key])) {
-        renderer.setProperty(elm, key, cur);
-      }
-    }
+  function setDefineCustomElement(defineCustomElementImpl) {
+    defineCustomElement$1 = defineCustomElementImpl;
   }
 
-  var emptyVNode$2 = {
-    data: {}
-  };
-  var modProps = {
-    create: function create(vnode) {
-      return update(emptyVNode$2, vnode);
-    },
-    update: update
-  };
+  var getCustomElement$1;
+
+  function setGetCustomElement(getCustomElementImpl) {
+    getCustomElement$1 = getCustomElementImpl;
+  }
   /*
-   * Copyright (c) 2018, salesforce.com, inc.
+   * Copyright (c) 2019, 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
    */
 
-  var classNameToClassMap = create(null);
-
-  function getMapFromClassName(className) {
-    // Intentionally using == to match undefined and null values from computed style attribute
-    if (className == null) {
-      return EmptyObject;
-    } // computed class names must be string
 
+  var TargetToReactiveRecordMap = new WeakMap();
 
-    className = isString(className) ? className : className + '';
-    var map = classNameToClassMap[className];
+  function getReactiveRecord(target) {
+    var reactiveRecord = TargetToReactiveRecordMap.get(target);
 
-    if (map) {
-      return map;
+    if (isUndefined$1(reactiveRecord)) {
+      var newRecord = create(null);
+      reactiveRecord = newRecord;
+      TargetToReactiveRecordMap.set(target, newRecord);
     }
 
-    map = create(null);
-    var start = 0;
-    var o;
-    var len = className.length;
+    return reactiveRecord;
+  }
 
-    for (o = 0; o < len; o++) {
-      if (StringCharCodeAt.call(className, o) === SPACE_CHAR) {
-        if (o > start) {
-          map[StringSlice.call(className, start, o)] = true;
-        }
+  var currentReactiveObserver = null;
 
-        start = o + 1;
+  function valueMutated(target, key) {
+    var reactiveRecord = TargetToReactiveRecordMap.get(target);
+
+    if (!isUndefined$1(reactiveRecord)) {
+      var reactiveObservers = reactiveRecord[key];
+
+      if (!isUndefined$1(reactiveObservers)) {
+        for (var _i4 = 0, _len2 = reactiveObservers.length; _i4 < _len2; _i4 += 1) {
+          var ro = reactiveObservers[_i4];
+          ro.notify();
+        }
       }
     }
+  }
 
-    if (o > start) {
-      map[StringSlice.call(className, start, o)] = true;
+  function valueObserved(target, key) {
+    // We should determine if an active Observing Record is present to track mutations.
+    if (currentReactiveObserver === null) {
+      return;
     }
 
-    classNameToClassMap[className] = map;
+    var ro = currentReactiveObserver;
+    var reactiveRecord = getReactiveRecord(target);
+    var reactiveObservers = reactiveRecord[key];
 
-    if (process.env.NODE_ENV !== 'production') {
-      // just to make sure that this object never changes as part of the diffing algo
-      freeze(map);
+    if (isUndefined$1(reactiveObservers)) {
+      reactiveObservers = [];
+      reactiveRecord[key] = reactiveObservers;
+    } else if (reactiveObservers[0] === ro) {
+      return; // perf optimization considering that most subscriptions will come from the same record
     }
 
-    return map;
+    if (ArrayIndexOf.call(reactiveObservers, ro) === -1) {
+      ro.link(reactiveObservers);
+    }
   }
 
-  function updateClassAttribute(oldVnode, vnode) {
-    var elm = vnode.elm,
-        newClass = vnode.data.className,
-        renderer = vnode.owner.renderer;
-    var oldClass = oldVnode.data.className;
+  var ReactiveObserver = /*#__PURE__*/function () {
+    function ReactiveObserver(callback) {
+      _classCallCheck(this, ReactiveObserver);
+
+      this.listeners = [];
+      this.callback = callback;
+    }
+
+    _createClass(ReactiveObserver, [{
+      key: "observe",
+      value: function observe(job) {
+        var inceptionReactiveRecord = currentReactiveObserver;
+        currentReactiveObserver = this;
+        var error;
+
+        try {
+          job();
+        } catch (e) {
+          error = Object(e);
+        } finally {
+          currentReactiveObserver = inceptionReactiveRecord;
+
+          if (error !== undefined) {
+            throw error; // eslint-disable-line no-unsafe-finally
+          }
+        }
+      }
+      /**
+       * This method is responsible for disconnecting the Reactive Observer
+       * from any Reactive Record that has a reference to it, to prevent future
+       * notifications about previously recorded access.
+       */
 
-    if (oldClass === newClass) {
-      return;
-    }
+    }, {
+      key: "reset",
+      value: function reset() {
+        var listeners = this.listeners;
+        var len = listeners.length;
 
-    var classList = renderer.getClassList(elm);
-    var newClassMap = getMapFromClassName(newClass);
-    var oldClassMap = getMapFromClassName(oldClass);
-    var name;
+        if (len > 0) {
+          for (var _i5 = 0; _i5 < len; _i5 += 1) {
+            var set = listeners[_i5];
+            var pos = ArrayIndexOf.call(listeners[_i5], this);
+            ArraySplice.call(set, pos, 1);
+          }
 
-    for (name in oldClassMap) {
-      // remove only if it is not in the new class collection and it is not set from within the instance
-      if (isUndefined$1(newClassMap[name])) {
-        classList.remove(name);
+          listeners.length = 0;
+        }
+      } // friend methods
+
+    }, {
+      key: "notify",
+      value: function notify() {
+        this.callback.call(undefined, this);
       }
-    }
+    }, {
+      key: "link",
+      value: function link(reactiveObservers) {
+        ArrayPush$1.call(reactiveObservers, this); // we keep track of observing records where the observing record was added to so we can do some clean up later on
 
-    for (name in newClassMap) {
-      if (isUndefined$1(oldClassMap[name])) {
-        classList.add(name);
+        ArrayPush$1.call(this.listeners, reactiveObservers);
       }
-    }
-  }
+    }]);
 
-  var emptyVNode$1 = {
-    data: {}
-  };
-  var modComputedClassName = {
-    create: function create(vnode) {
-      return updateClassAttribute(emptyVNode$1, vnode);
-    },
-    update: updateClassAttribute
-  };
+    return ReactiveObserver;
+  }();
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1225,92 +992,87 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-  function updateStyleAttribute(oldVnode, vnode) {
-    var elm = vnode.elm,
-        newStyle = vnode.data.style,
-        renderer = vnode.owner.renderer;
-    var setAttribute = renderer.setAttribute,
-        removeAttribute = renderer.removeAttribute;
-
-    if (oldVnode.data.style === newStyle) {
-      return;
-    }
 
-    if (!isString(newStyle) || newStyle === '') {
-      removeAttribute(elm, 'style');
-    } else {
-      setAttribute(elm, 'style', newStyle);
-    }
+  function componentValueMutated(vm, key) {
+    valueMutated(vm.component, key);
   }
 
-  var emptyVNode = {
-    data: {}
-  };
-  var modComputedStyle = {
-    create: function create(vnode) {
-      return updateStyleAttribute(emptyVNode, vnode);
-    },
-    update: updateStyleAttribute
-  };
+  function componentValueObserved(vm, key) {
+    valueObserved(vm.component, key);
+  }
   /*
    * 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
    */
-  // The compiler takes care of transforming the inline classnames into an object. It's faster to set the
-  // different classnames properties individually instead of via a string.
 
-  function createClassAttribute(vnode) {
-    var elm = vnode.elm,
-        classMap = vnode.data.classMap,
-        renderer = vnode.owner.renderer;
 
-    if (isUndefined$1(classMap)) {
-      return;
-    }
+  function getComponentTag(vm) {
+    return "<".concat(StringToLowerCase.call(vm.tagName), ">");
+  } // TODO [#1695]: Unify getComponentStack and getErrorComponentStack
 
-    var classList = renderer.getClassList(elm);
 
-    for (var name in classMap) {
-      classList.add(name);
+  function getComponentStack(vm) {
+    var stack = [];
+    var prefix = '';
+
+    while (!isNull(vm.owner)) {
+      ArrayPush$1.call(stack, prefix + getComponentTag(vm));
+      vm = vm.owner;
+      prefix += '\t';
     }
+
+    return ArrayJoin.call(stack, '\n');
   }
 
-  var modStaticClassName = {
-    create: createClassAttribute
-  };
+  function getErrorComponentStack(vm) {
+    var wcStack = [];
+    var currentVm = vm;
+
+    while (!isNull(currentVm)) {
+      ArrayPush$1.call(wcStack, getComponentTag(currentVm));
+      currentVm = currentVm.owner;
+    }
+
+    return wcStack.reverse().join('\n\t');
+  }
   /*
    * 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
    */
-  // The compiler takes care of transforming the inline style into an object. It's faster to set the
-  // different style properties individually instead of via a string.
 
-  function createStyleAttribute(vnode) {
-    var elm = vnode.elm,
-        styleDecls = vnode.data.styleDecls,
-        renderer = vnode.owner.renderer;
 
-    if (isUndefined$1(styleDecls)) {
-      return;
+  function log(method, message, vm) {
+    var msg = "[LWC ".concat(method, "]: ").concat(message);
+
+    if (!isUndefined$1(vm)) {
+      msg = "".concat(msg, "\n").concat(getComponentStack(vm));
     }
 
-    for (var _i6 = 0; _i6 < styleDecls.length; _i6++) {
-      var _styleDecls$_i = _slicedToArray(styleDecls[_i6], 3),
-          prop = _styleDecls$_i[0],
-          value = _styleDecls$_i[1],
-          important = _styleDecls$_i[2];
+    if (process.env.NODE_ENV === 'test') {
+      /* eslint-disable-next-line no-console */
+      console[method](msg);
+      return;
+    }
 
-      renderer.setCSSStyleProperty(elm, prop, value, important);
+    try {
+      throw new Error(msg);
+    } catch (e) {
+      /* eslint-disable-next-line no-console */
+      console[method](e);
     }
   }
 
-  var modStaticStyle = {
-    create: createStyleAttribute
-  };
+  function logError(message, vm) {
+    log('error', message, vm);
+  }
+
+  function logWarn(message, vm) {
+    log('warn', message, vm);
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1318,14 +1080,6 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-  /**
-  @license
-  Copyright (c) 2015 Simon Friis Vindum.
-  This code may only be used under the MIT License found at
-  https://github.com/snabbdom/snabbdom/blob/master/LICENSE
-  Code distributed by Snabbdom as part of the Snabbdom project at
-  https://github.com/snabbdom/snabbdom/
-  */
 
   function isUndef(s) {
     return s === undefined;
@@ -1414,7 +1168,7 @@ var LWC = (function (exports) {
       } else if (sameVnode(oldStartVnode, newEndVnode)) {
         // Vnode moved right
         patchVnode(oldStartVnode, newEndVnode);
-        newEndVnode.hook.move(oldStartVnode, parentElm, oldEndVnode.owner.renderer.nextSibling(oldEndVnode.elm));
+        newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling$1(oldEndVnode.elm));
         oldStartVnode = oldCh[++oldStartIdx];
         newEndVnode = newCh[--newEndIdx];
       } else if (sameVnode(oldEndVnode, newStartVnode)) {
@@ -1459,12 +1213,12 @@ 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 _i7 = newEndIdx;
+        var _i6 = newEndIdx;
         var n;
 
         do {
-          n = newCh[++_i7];
-        } while (!isVNode(n) && _i7 < newChEnd);
+          n = newCh[++_i6];
+        } while (!isVNode(n) && _i6 < newChEnd);
 
         before = isVNode(n) ? n.elm : null;
         addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
@@ -1495,9 +1249,9 @@ var LWC = (function (exports) {
 
     var referenceElm = null;
 
-    for (var _i8 = newChLength - 1; _i8 >= 0; _i8 -= 1) {
-      var vnode = newCh[_i8];
-      var oldVNode = oldCh[_i8];
+    for (var _i7 = newChLength - 1; _i7 >= 0; _i7 -= 1) {
+      var vnode = newCh[_i7];
+      var oldVNode = oldCh[_i7];
 
       if (vnode !== oldVNode) {
         if (isVNode(oldVNode)) {
@@ -1534,6 +1288,125 @@ var LWC = (function (exports) {
    */
 
 
+  var defaultDefHTMLPropertyNames = ['accessKey', 'dir', 'draggable', 'hidden', 'id', 'lang', 'spellcheck', 'tabIndex', 'title'];
+
+  function offsetPropertyErrorMessage(name) {
+    return "Using the `".concat(name, "` property is an anti-pattern because it rounds the value to an integer. Instead, use the `getBoundingClientRect` method to obtain fractional values for the size of an element and its position relative to the viewport.");
+  } // Global HTML Attributes & Properties
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+
+
+  var globalHTMLProperties = assign(create(null), {
+    accessKey: {
+      attribute: 'accesskey'
+    },
+    accessKeyLabel: {
+      readOnly: true
+    },
+    className: {
+      attribute: 'class',
+      error: 'Using the `className` property is an anti-pattern because of slow runtime behavior and potential conflicts with classes provided by the owner element. Use the `classList` API instead.'
+    },
+    contentEditable: {
+      attribute: 'contenteditable'
+    },
+    dataset: {
+      readOnly: true,
+      error: "Using the `dataset` property is an anti-pattern because it can't be statically analyzed. Expose each property individually using the `@api` decorator instead."
+    },
+    dir: {
+      attribute: 'dir'
+    },
+    draggable: {
+      attribute: 'draggable'
+    },
+    dropzone: {
+      attribute: 'dropzone',
+      readOnly: true
+    },
+    hidden: {
+      attribute: 'hidden'
+    },
+    id: {
+      attribute: 'id'
+    },
+    inputMode: {
+      attribute: 'inputmode'
+    },
+    lang: {
+      attribute: 'lang'
+    },
+    slot: {
+      attribute: 'slot',
+      error: 'Using the `slot` property is an anti-pattern.'
+    },
+    spellcheck: {
+      attribute: 'spellcheck'
+    },
+    style: {
+      attribute: 'style'
+    },
+    tabIndex: {
+      attribute: 'tabindex'
+    },
+    title: {
+      attribute: 'title'
+    },
+    translate: {
+      attribute: 'translate'
+    },
+    // additional "global attributes" that are not present in the link above.
+    isContentEditable: {
+      readOnly: true
+    },
+    offsetHeight: {
+      readOnly: true,
+      error: offsetPropertyErrorMessage('offsetHeight')
+    },
+    offsetLeft: {
+      readOnly: true,
+      error: offsetPropertyErrorMessage('offsetLeft')
+    },
+    offsetParent: {
+      readOnly: true
+    },
+    offsetTop: {
+      readOnly: true,
+      error: offsetPropertyErrorMessage('offsetTop')
+    },
+    offsetWidth: {
+      readOnly: true,
+      error: offsetPropertyErrorMessage('offsetWidth')
+    },
+    role: {
+      attribute: 'role'
+    }
+  });
+  var controlledElement = null;
+  var controlledAttributeName;
+
+  function isAttributeLocked(elm, attrName) {
+    return elm !== controlledElement || attrName !== controlledAttributeName;
+  }
+
+  function lockAttribute(_elm, _key) {
+    controlledElement = null;
+    controlledAttributeName = undefined;
+  }
+
+  function unlockAttribute(elm, key) {
+    controlledElement = elm;
+    controlledAttributeName = key;
+  }
+  /*
+   * 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
+   */
+
+
   function generateDataDescriptor(options) {
     return assign({
       configurable: true,
@@ -1861,7 +1734,7 @@ var LWC = (function (exports) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
   }
   /*
-   * Copyright (c) 2020, salesforce.com, inc.
+   * 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
@@ -2797,21 +2670,18 @@ var LWC = (function (exports) {
 
 
   var LightningElement = function LightningElement() {
-    var _a; // This should be as performant as possible, while any initialization should be done lazily
-
-
+    // This should be as performant as possible, while any initialization should be done lazily
     if (isNull(vmBeingConstructed)) {
       throw new ReferenceError('Illegal constructor');
     }
 
     var vm = vmBeingConstructed;
     var def = vm.def,
-        elm = vm.elm,
-        renderer = vm.renderer;
+        elm = vm.elm;
     var bridge = def.bridge;
 
     if (process.env.NODE_ENV !== 'production') {
-      (_a = renderer.assertInstanceOfHTMLElement) === null || _a === void 0 ? void 0 : _a.call(renderer, vm.elm, "Component creation requires a DOM element to be associated to ".concat(vm, "."));
+      assertInstanceOfHTMLElement$1(vm.elm, "Component creation requires a DOM element to be associated to ".concat(vm, "."));
     }
 
     var component = this;
@@ -2840,7 +2710,7 @@ var LWC = (function (exports) {
     if (vm.renderMode === 1
     /* Shadow */
     ) {
-      attachShadow(vm);
+      doAttachShadow(vm);
     } // Adding extra guard rails in DEV mode.
 
 
@@ -2852,15 +2722,14 @@ var LWC = (function (exports) {
     return this;
   };
 
-  function attachShadow(vm) {
-    var _renderer$attachShado;
+  function doAttachShadow(vm) {
+    var _attachShadow$;
 
     var elm = vm.elm,
         mode = vm.mode,
-        renderer = vm.renderer,
         shadowMode = vm.shadowMode,
         ctor = vm.def.ctor;
-    var cmpRoot = renderer.attachShadow(elm, (_renderer$attachShado = {}, _defineProperty(_renderer$attachShado, KEY__SYNTHETIC_MODE, shadowMode === 1), _defineProperty(_renderer$attachShado, "delegatesFocus", Boolean(ctor.delegatesFocus)), _defineProperty(_renderer$attachShado, "mode", mode), _renderer$attachShado));
+    var cmpRoot = attachShadow$1(elm, (_attachShadow$ = {}, _defineProperty(_attachShadow$, KEY__SYNTHETIC_MODE, shadowMode === 1), _defineProperty(_attachShadow$, "delegatesFocus", Boolean(ctor.delegatesFocus)), _defineProperty(_attachShadow$, "mode", mode), _attachShadow$));
     vm.cmpRoot = cmpRoot;
     associateVM(cmpRoot, vm);
 
@@ -2880,15 +2749,13 @@ var LWC = (function (exports) {
     constructor: LightningElement,
     dispatchEvent: function dispatchEvent(event) {
       var _getAssociatedVM = getAssociatedVM(this),
-          elm = _getAssociatedVM.elm,
-          dispatchEvent = _getAssociatedVM.renderer.dispatchEvent;
+          elm = _getAssociatedVM.elm;
 
-      return dispatchEvent(elm, event);
+      return dispatchEvent$1(elm, event);
     },
     addEventListener: function addEventListener(type, listener, options) {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm,
-          addEventListener = vm.renderer.addEventListener;
+      var elm = vm.elm;
 
       if (process.env.NODE_ENV !== 'production') {
         var _vmBeingRendered2 = getVMBeingRendered();
@@ -2899,111 +2766,99 @@ var LWC = (function (exports) {
       }
 
       var wrappedListener = getWrappedComponentsListener(vm, listener);
-      addEventListener(elm, type, wrappedListener, options);
+      addEventListener$1(elm, type, wrappedListener, options);
     },
     removeEventListener: function removeEventListener(type, listener, options) {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm,
-          removeEventListener = vm.renderer.removeEventListener;
+      var elm = vm.elm;
       var wrappedListener = getWrappedComponentsListener(vm, listener);
-      removeEventListener(elm, type, wrappedListener, options);
+      removeEventListener$1(elm, type, wrappedListener, options);
     },
     hasAttribute: function hasAttribute(name) {
       var _getAssociatedVM2 = getAssociatedVM(this),
-          elm = _getAssociatedVM2.elm,
-          getAttribute = _getAssociatedVM2.renderer.getAttribute;
+          elm = _getAssociatedVM2.elm;
 
-      return !isNull(getAttribute(elm, name));
+      return !isNull(getAttribute$1(elm, name));
     },
     hasAttributeNS: function hasAttributeNS(namespace, name) {
       var _getAssociatedVM3 = getAssociatedVM(this),
-          elm = _getAssociatedVM3.elm,
-          getAttribute = _getAssociatedVM3.renderer.getAttribute;
+          elm = _getAssociatedVM3.elm;
 
-      return !isNull(getAttribute(elm, name, namespace));
+      return !isNull(getAttribute$1(elm, name, namespace));
     },
     removeAttribute: function removeAttribute(name) {
       var _getAssociatedVM4 = getAssociatedVM(this),
-          elm = _getAssociatedVM4.elm,
-          removeAttribute = _getAssociatedVM4.renderer.removeAttribute;
+          elm = _getAssociatedVM4.elm;
 
       unlockAttribute(elm, name);
-      removeAttribute(elm, name);
+      removeAttribute$1(elm, name);
       lockAttribute();
     },
     removeAttributeNS: function removeAttributeNS(namespace, name) {
       var _getAssociatedVM5 = getAssociatedVM(this),
-          elm = _getAssociatedVM5.elm,
-          removeAttribute = _getAssociatedVM5.renderer.removeAttribute;
+          elm = _getAssociatedVM5.elm;
 
       unlockAttribute(elm, name);
-      removeAttribute(elm, name, namespace);
+      removeAttribute$1(elm, name, namespace);
       lockAttribute();
     },
     getAttribute: function getAttribute(name) {
       var _getAssociatedVM6 = getAssociatedVM(this),
-          elm = _getAssociatedVM6.elm,
-          getAttribute = _getAssociatedVM6.renderer.getAttribute;
+          elm = _getAssociatedVM6.elm;
 
-      return getAttribute(elm, name);
+      return getAttribute$1(elm, name);
     },
     getAttributeNS: function getAttributeNS(namespace, name) {
       var _getAssociatedVM7 = getAssociatedVM(this),
-          elm = _getAssociatedVM7.elm,
-          getAttribute = _getAssociatedVM7.renderer.getAttribute;
+          elm = _getAssociatedVM7.elm;
 
-      return getAttribute(elm, name, namespace);
+      return getAttribute$1(elm, name, namespace);
     },
     setAttribute: function setAttribute(name, value) {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm,
-          setAttribute = vm.renderer.setAttribute;
+      var elm = vm.elm;
 
       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(elm, name, value);
+      setAttribute$1(elm, name, value);
       lockAttribute();
     },
     setAttributeNS: function setAttributeNS(namespace, name, value) {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm,
-          setAttribute = vm.renderer.setAttribute;
+      var elm = vm.elm;
 
       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(elm, name, value, namespace);
+      setAttribute$1(elm, name, value, namespace);
       lockAttribute();
     },
     getBoundingClientRect: function getBoundingClientRect() {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm,
-          getBoundingClientRect = vm.renderer.getBoundingClientRect;
+      var elm = vm.elm;
 
       if (process.env.NODE_ENV !== 'production') {
         warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect()');
       }
 
-      return getBoundingClientRect(elm);
+      return getBoundingClientRect$1(elm);
     },
 
     get isConnected() {
       var _getAssociatedVM8 = getAssociatedVM(this),
-          elm = _getAssociatedVM8.elm,
-          isConnected = _getAssociatedVM8.renderer.isConnected;
+          elm = _getAssociatedVM8.elm;
 
-      return isConnected(elm);
+      return isConnected$1(elm);
     },
 
     get classList() {
       var vm = getAssociatedVM(this);
-      var elm = vm.elm,
-          getClassList = vm.renderer.getClassList;
+      var elm = vm.elm;
 
       if (process.env.NODE_ENV !== 'production') {
         // TODO [#1290]: this still fails in dev but works in production, eventually, we should
@@ -3011,7 +2866,7 @@ var LWC = (function (exports) {
         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(elm);
+      return getClassList$1(elm);
     },
 
     get template() {
@@ -3043,50 +2898,88 @@ var LWC = (function (exports) {
       return "[object ".concat(vm.def.name, "]");
     }
   };
-  var queryAndChildGetterDescriptors = create(null);
-  var childGetters = [['children', 'getChildren'], ['childNodes', 'getChildNodes'], ['firstChild', 'getFirstChild'], ['firstElementChild', 'getFirstElementChild'], ['lastChild', 'getLastChild'], ['lastElementChild', 'getLastElementChild']]; // Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
+  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 _loop = function _loop() {
-    var _childGetters$_i = _slicedToArray(_childGetters[_i9], 2),
-        elementProp = _childGetters$_i[0],
-        rendererMethod = _childGetters$_i[1];
+  var childGetters = ['children', 'childNodes', 'firstChild', 'firstElementChild', 'lastChild', 'lastElementChild'];
+
+  function getChildGetter(methodName) {
+    switch (methodName) {
+      case 'children':
+        return getChildren$1;
 
-    queryAndChildGetterDescriptors[elementProp] = {
+      case 'childNodes':
+        return getChildNodes$1;
+
+      case 'firstChild':
+        return getFirstChild$1;
+
+      case 'firstElementChild':
+        return getFirstElementChild$1;
+
+      case 'lastChild':
+        return getLastChild$1;
+
+      case 'lastElementChild':
+        return getLastElementChild$1;
+    }
+  } // Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
+
+
+  var _loop = function _loop() {
+    var childGetter = _childGetters[_i8];
+    queryAndChildGetterDescriptors[childGetter] = {
       get: function get() {
         var vm = getAssociatedVM(this);
-        var elm = vm.elm,
-            renderer = vm.renderer;
+        var elm = vm.elm;
 
         if (process.env.NODE_ENV !== 'production') {
-          warnIfInvokedDuringConstruction(vm, elementProp);
+          warnIfInvokedDuringConstruction(vm, childGetter);
         }
 
-        return renderer[rendererMethod](elm);
+        return getChildGetter(childGetter)(elm);
       },
       configurable: true,
       enumerable: true
     };
   };
 
-  for (var _i9 = 0, _childGetters = childGetters; _i9 < _childGetters.length; _i9++) {
+  for (var _i8 = 0, _childGetters = childGetters; _i8 < _childGetters.length; _i8++) {
     _loop();
   }
 
-  var queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll']; // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
+  var queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll'];
+
+  function getQueryMethod(methodName) {
+    switch (methodName) {
+      case 'getElementsByClassName':
+        return getElementsByClassName$1;
+
+      case 'getElementsByTagName':
+        return getElementsByTagName$1;
+
+      case 'querySelector':
+        return querySelector$1;
+
+      case 'querySelectorAll':
+        return querySelectorAll$1;
+    }
+  } // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
+
 
   var _loop2 = function _loop2() {
-    var queryMethod = _queryMethods[_i10];
+    var queryMethod = _queryMethods[_i9];
     queryAndChildGetterDescriptors[queryMethod] = {
       value: function value(arg) {
         var vm = getAssociatedVM(this);
-        var elm = vm.elm,
-            renderer = vm.renderer;
+        var elm = vm.elm;
 
         if (process.env.NODE_ENV !== 'production') {
           warnIfInvokedDuringConstruction(vm, "".concat(queryMethod, "()"));
         }
 
-        return renderer[queryMethod](elm, arg);
+        return getQueryMethod(queryMethod)(elm, arg);
       },
       configurable: true,
       enumerable: true,
@@ -3094,7 +2987,7 @@ var LWC = (function (exports) {
     };
   };
 
-  for (var _i10 = 0, _queryMethods = queryMethods; _i10 < _queryMethods.length; _i10++) {
+  for (var _i9 = 0, _queryMethods = queryMethods; _i9 < _queryMethods.length; _i9++) {
     _loop2();
   }
 
@@ -3617,8 +3510,8 @@ var LWC = (function (exports) {
     }
 
     if (!isUndefined$1(fields)) {
-      for (var _i11 = 0, n = fields.length; _i11 < n; _i11++) {
-        var _fieldName2 = fields[_i11];
+      for (var _i10 = 0, n = fields.length; _i10 < n; _i10++) {
+        var _fieldName2 = fields[_i10];
         descriptor = getOwnPropertyDescriptor$1(proto, _fieldName2);
 
         if (process.env.NODE_ENV !== 'production') {
@@ -3839,8 +3732,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 _i12 = 0, _len3 = props.length; _i12 < _len3; _i12 += 1) {
-      var _propName2 = props[_i12];
+    for (var _i11 = 0, _len3 = props.length; _i11 < _len3; _i11 += 1) {
+      var _propName2 = props[_i11];
       attributeToPropMap[htmlPropertyToAttribute(_propName2)] = _propName2;
       descriptors[_propName2] = {
         get: createGetter(_propName2),
@@ -3851,8 +3744,8 @@ var LWC = (function (exports) {
     } // expose public methods as props on the new Element Bridge
 
 
-    for (var _i13 = 0, _len4 = methods.length; _i13 < _len4; _i13 += 1) {
-      var methodName = methods[_i13];
+    for (var _i12 = 0, _len4 = methods.length; _i12 < _len4; _i12 += 1) {
+      var methodName = methods[_i12];
       descriptors[methodName] = {
         value: createMethodCaller(methodName),
         writable: true,
@@ -4256,10 +4149,6 @@ var LWC = (function (exports) {
 
       assert.isTrue(Ctor.constructor, "Missing ".concat(ctorName, ".constructor, ").concat(ctorName, " should have a \"constructor\" property."));
 
-      if (!runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
-        assert.isFalse('shadowSupportMode' in Ctor, "".concat(ctorName || 'Anonymous class', " is an invalid LWC component. The shadowSupportMode static property is not available in this environment."));
-      }
-
       if (!isUndefined$1(ctorShadowSupportMode)) {
         assert.invariant(ctorShadowSupportMode === "any"
         /* Any */
@@ -4480,6 +4369,271 @@ var LWC = (function (exports) {
    */
 
 
+  var xlinkNS = 'http://www.w3.org/1999/xlink';
+  var xmlNS = 'http://www.w3.org/XML/1998/namespace';
+  var ColonCharCode = 58;
+
+  function patchAttributes(oldVnode, vnode) {
+    var attrs = vnode.data.attrs;
+
+    if (isUndefined$1(attrs)) {
+      return;
+    }
+
+    var oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
+
+    if (oldAttrs === attrs) {
+      return;
+    }
+
+    var elm = vnode.elm;
+
+    for (var key in attrs) {
+      var cur = attrs[key];
+      var old = oldAttrs[key];
+
+      if (old !== cur) {
+        unlockAttribute(elm, key);
+
+        if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
+          // Assume xml namespace
+          setAttribute$1(elm, key, cur, xmlNS);
+        } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
+          // Assume xlink namespace
+          setAttribute$1(elm, key, cur, xlinkNS);
+        } else if (isNull(cur) || isUndefined$1(cur)) {
+          removeAttribute$1(elm, key);
+        } else {
+          setAttribute$1(elm, key, cur);
+        }
+
+        lockAttribute();
+      }
+    }
+  }
+  /*
+   * 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
+   */
+
+
+  function isLiveBindingProp(sel, key) {
+    // For properties with live bindings, we read values from the DOM element
+    // instead of relying on internally tracked values.
+    return sel === 'input' && (key === 'value' || key === 'checked');
+  }
+
+  function patchProps(oldVnode, vnode) {
+    var props = vnode.data.props;
+
+    if (isUndefined$1(props)) {
+      return;
+    }
+
+    var oldProps = isNull(oldVnode) ? EmptyObject : oldVnode.data.props;
+
+    if (oldProps === props) {
+      return;
+    }
+
+    var isFirstPatch = isNull(oldVnode);
+    var elm = vnode.elm,
+        sel = vnode.sel;
+
+    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);
+      }
+    }
+  }
+  /*
+   * 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
+   */
+
+
+  var classNameToClassMap = create(null);
+
+  function getMapFromClassName(className) {
+    // Intentionally using == to match undefined and null values from computed style attribute
+    if (className == null) {
+      return EmptyObject;
+    } // computed class names must be string
+
+
+    className = isString(className) ? className : className + '';
+    var map = classNameToClassMap[className];
+
+    if (map) {
+      return map;
+    }
+
+    map = create(null);
+    var start = 0;
+    var o;
+    var len = className.length;
+
+    for (o = 0; o < len; o++) {
+      if (StringCharCodeAt.call(className, o) === SPACE_CHAR) {
+        if (o > start) {
+          map[StringSlice.call(className, start, o)] = true;
+        }
+
+        start = o + 1;
+      }
+    }
+
+    if (o > start) {
+      map[StringSlice.call(className, start, o)] = true;
+    }
+
+    classNameToClassMap[className] = map;
+
+    if (process.env.NODE_ENV !== 'production') {
+      // just to make sure that this object never changes as part of the diffing algo
+      freeze(map);
+    }
+
+    return map;
+  }
+
+  function patchClassAttribute(oldVnode, vnode) {
+    var elm = vnode.elm,
+        newClass = vnode.data.className;
+    var oldClass = isNull(oldVnode) ? undefined : oldVnode.data.className;
+
+    if (oldClass === newClass) {
+      return;
+    }
+
+    var classList = getClassList$1(elm);
+    var newClassMap = getMapFromClassName(newClass);
+    var oldClassMap = getMapFromClassName(oldClass);
+    var name;
+
+    for (name in oldClassMap) {
+      // remove only if it is not in the new class collection and it is not set from within the instance
+      if (isUndefined$1(newClassMap[name])) {
+        classList.remove(name);
+      }
+    }
+
+    for (name in newClassMap) {
+      if (isUndefined$1(oldClassMap[name])) {
+        classList.add(name);
+      }
+    }
+  }
+  /*
+   * 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
+   */
+
+
+  function patchStyleAttribute(oldVnode, vnode) {
+    var elm = vnode.elm,
+        newStyle = vnode.data.style;
+    var oldStyle = isNull(oldVnode) ? undefined : oldVnode.data.style;
+
+    if (oldStyle === newStyle) {
+      return;
+    }
+
+    if (!isString(newStyle) || newStyle === '') {
+      removeAttribute$1(elm, 'style');
+    } else {
+      setAttribute$1(elm, 'style', newStyle);
+    }
+  }
+  /*
+   * 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
+   */
+
+
+  function applyEventListeners(vnode) {
+    var elm = vnode.elm,
+        on = vnode.data.on;
+
+    if (isUndefined$1(on)) {
+      return;
+    }
+
+    for (var name in on) {
+      var handler = on[name];
+      addEventListener$1(elm, name, handler);
+    }
+  }
+  /*
+   * 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
+   */
+  // The compiler takes care of transforming the inline classnames into an object. It's faster to set the
+  // different classnames properties individually instead of via a string.
+
+
+  function applyStaticClassAttribute(vnode) {
+    var elm = vnode.elm,
+        classMap = vnode.data.classMap;
+
+    if (isUndefined$1(classMap)) {
+      return;
+    }
+
+    var classList = getClassList$1(elm);
+
+    for (var name in classMap) {
+      classList.add(name);
+    }
+  }
+  /*
+   * 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
+   */
+  // The compiler takes care of transforming the inline style into an object. It's faster to set the
+  // different style properties individually instead of via a string.
+
+
+  function applyStaticStyleAttribute(vnode) {
+    var elm = vnode.elm,
+        styleDecls = vnode.data.styleDecls;
+
+    if (isUndefined$1(styleDecls)) {
+      return;
+    }
+
+    for (var _i13 = 0; _i13 < styleDecls.length; _i13++) {
+      var _styleDecls$_i = _slicedToArray(styleDecls[_i13], 3),
+          prop = _styleDecls$_i[0],
+          value = _styleDecls$_i[1],
+          important = _styleDecls$_i[2];
+
+      setCSSStyleProperty$1(elm, prop, value, important);
+    }
+  }
+  /*
+   * 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
+   */
+
+
   function observeElementChildNodes(elm) {
     elm.$domManual$ = true;
   }
@@ -4495,21 +4649,20 @@ var LWC = (function (exports) {
     var token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
 
     if (!isUndefined$1(token) && context.hasScopedStyles) {
-      owner.renderer.getClassList(elm).add(token);
+      getClassList$1(elm).add(token);
     }
   }
 
   function updateNodeHook(oldVnode, vnode) {
     var elm = vnode.elm,
-        text = vnode.text,
-        renderer = vnode.owner.renderer;
+        text = vnode.text;
 
     if (oldVnode.text !== text) {
       if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
       }
 
-      renderer.setText(elm, text);
+      setText$1(elm, text);
 
       if (process.env.NODE_ENV !== 'production') {
         lockDomMutation();
@@ -4518,13 +4671,11 @@ var LWC = (function (exports) {
   }
 
   function insertNodeHook(vnode, parentNode, referenceNode) {
-    var renderer = vnode.owner.renderer;
-
     if (process.env.NODE_ENV !== 'production') {
       unlockDomMutation();
     }
 
-    renderer.insert(vnode.elm, parentNode, referenceNode);
+    insert$1(vnode.elm, parentNode, referenceNode);
 
     if (process.env.NODE_ENV !== 'production') {
       lockDomMutation();
@@ -4532,41 +4683,35 @@ var LWC = (function (exports) {
   }
 
   function removeNodeHook(vnode, parentNode) {
-    var renderer = vnode.owner.renderer;
-
     if (process.env.NODE_ENV !== 'production') {
       unlockDomMutation();
     }
 
-    renderer.remove(vnode.elm, parentNode);
+    remove$1(vnode.elm, parentNode);
 
     if (process.env.NODE_ENV !== 'production') {
       lockDomMutation();
     }
   }
 
-  function createElmHook(vnode) {
-    modEvents.create(vnode); // Attrs need to be applied to element before props
-    // IE11 will wipe out value on radio inputs if value
-    // is set before type=radio.
+  function patchElementPropsAndAttrs(oldVnode, vnode) {
+    if (isNull(oldVnode)) {
+      applyEventListeners(vnode);
+      applyStaticClassAttribute(vnode);
+      applyStaticStyleAttribute(vnode);
+    } // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
+    // value is set before type=radio.
+
 
-    modAttrs.create(vnode);
-    modProps.create(vnode);
-    modStaticClassName.create(vnode);
-    modStaticStyle.create(vnode);
-    modComputedClassName.create(vnode);
-    modComputedStyle.create(vnode);
+    patchClassAttribute(oldVnode, vnode);
+    patchStyleAttribute(oldVnode, vnode);
+    patchAttributes(oldVnode, vnode);
+    patchProps(oldVnode, vnode);
   }
 
   function hydrateElmHook(vnode) {
-    modEvents.create(vnode); // Attrs are already on the element.
-    // modAttrs.create(vnode);
-
-    modProps.create(vnode); // Already set.
-    // modStaticClassName.create(vnode);
-    // modStaticStyle.create(vnode);
-    // modComputedClassName.create(vnode);
-    // modComputedStyle.create(vnode);
+    applyEventListeners(vnode);
+    patchProps(null, vnode);
   }
 
   function fallbackElmHook(elm, vnode) {
@@ -4603,27 +4748,14 @@ var LWC = (function (exports) {
         isPortal: isPortal,
         isLight: isLight
       });
-    }
-  }
-
-  function updateElmHook(oldVnode, vnode) {
-    // Attrs need to be applied to element before props
-    // IE11 will wipe out value on radio inputs if value
-    // is set before type=radio.
-    modAttrs.update(oldVnode, vnode);
-    modProps.update(oldVnode, vnode);
-    modComputedClassName.update(oldVnode, vnode);
-    modComputedStyle.update(oldVnode, vnode);
+    }
   }
 
-  function updateChildrenHook(oldVnode, vnode) {
-    var elm = vnode.elm,
-        children = vnode.children;
-
-    if (hasDynamicChildren(children)) {
-      updateDynamicChildren(elm, oldVnode.children, children);
+  function patchChildren(parent, oldCh, newCh) {
+    if (hasDynamicChildren(newCh)) {
+      updateDynamicChildren(parent, oldCh, newCh);
     } else {
-      updateStaticChildren(elm, oldVnode.children, children);
+      updateStaticChildren(parent, oldCh, newCh);
     }
   }
 
@@ -4684,8 +4816,7 @@ var LWC = (function (exports) {
     createVM(elm, def, {
       mode: mode,
       owner: owner,
-      tagName: sel,
-      renderer: owner.renderer
+      tagName: sel
     });
 
     if (process.env.NODE_ENV !== 'production') {
@@ -4693,19 +4824,6 @@ var LWC = (function (exports) {
     }
   }
 
-  function createCustomElmHook(vnode) {
-    modEvents.create(vnode); // Attrs need to be applied to element before props
-    // IE11 will wipe out value on radio inputs if value
-    // is set before type=radio.
-
-    modAttrs.create(vnode);
-    modProps.create(vnode);
-    modStaticClassName.create(vnode);
-    modStaticStyle.create(vnode);
-    modComputedClassName.create(vnode);
-    modComputedStyle.create(vnode);
-  }
-
   function createChildrenHook(vnode) {
     var elm = vnode.elm,
         children = vnode.children;
@@ -4727,8 +4845,7 @@ var LWC = (function (exports) {
 
   function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
     var _vnode$data$attrs = vnode.data.attrs,
-        attrs = _vnode$data$attrs === void 0 ? {} : _vnode$data$attrs,
-        renderer = vnode.owner.renderer;
+        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.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
 
@@ -4737,7 +4854,7 @@ var LWC = (function (exports) {
           attrName = _Object$entries$_i[0],
           attrValue = _Object$entries$_i[1];
 
-      var elmAttrValue = renderer.getAttribute(elm, attrName);
+      var elmAttrValue = getAttribute$1(elm, attrName);
 
       if (String(attrValue) !== elmAttrValue) {
         logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
@@ -4751,8 +4868,7 @@ var LWC = (function (exports) {
   function vnodesAndElementHaveCompatibleClass(vnode, elm) {
     var _vnode$data = vnode.data,
         className = _vnode$data.className,
-        classMap = _vnode$data.classMap,
-        renderer = vnode.owner.renderer;
+        classMap = _vnode$data.classMap;
     var nodesAreCompatible = true;
     var vnodeClassName;
 
@@ -4762,7 +4878,7 @@ var LWC = (function (exports) {
       vnodeClassName = className;
     } else if (!isUndefined$1(classMap)) {
       // classMap is used when class is set to static value.
-      var classList = renderer.getClassList(elm);
+      var classList = getClassList$1(elm);
       var computedClassName = ''; // all classes from the vnode should be in the element.classList
 
       for (var name in classMap) {
@@ -4790,9 +4906,8 @@ var LWC = (function (exports) {
   function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
     var _vnode$data2 = vnode.data,
         style = _vnode$data2.style,
-        styleDecls = _vnode$data2.styleDecls,
-        renderer = vnode.owner.renderer;
-    var elmStyle = renderer.getAttribute(elm, 'style') || '';
+        styleDecls = _vnode$data2.styleDecls;
+    var elmStyle = getAttribute$1(elm, 'style') || '';
     var vnodeStyle;
     var nodesAreCompatible = true;
 
@@ -4888,16 +5003,6 @@ var LWC = (function (exports) {
     }
   }
 
-  function updateCustomElmHook(oldVnode, vnode) {
-    // Attrs need to be applied to element before props
-    // IE11 will wipe out value on radio inputs if value
-    // is set before type=radio.
-    modAttrs.update(oldVnode, vnode);
-    modProps.update(oldVnode, vnode);
-    modComputedClassName.update(oldVnode, vnode);
-    modComputedStyle.update(oldVnode, vnode);
-  }
-
   function removeElmHook(vnode) {
     // this method only needs to search on child vnodes from template
     // to trigger the remove hook just in case some of those children
@@ -4912,6 +5017,62 @@ var LWC = (function (exports) {
         ch.hook.remove(ch, elm);
       }
     }
+  }
+
+  function allocateInSlot(vm, children) {
+    var oldSlots = vm.cmpSlots;
+    var cmpSlots = vm.cmpSlots = create(null);
+
+    for (var _i16 = 0, _len6 = children.length; _i16 < _len6; _i16 += 1) {
+      var vnode = children[_i16];
+
+      if (isNull(vnode)) {
+        continue;
+      }
+
+      var data = vnode.data;
+      var slotName = data.attrs && data.attrs.slot || '';
+      var vnodes = cmpSlots[slotName] = cmpSlots[slotName] || []; // re-keying the vnodes is necessary to avoid conflicts with default content for the slot
+      // which might have similar keys. Each vnode will always have a key that
+      // starts with a numeric character from compiler. In this case, we add a unique
+      // notation for slotted vnodes keys, e.g.: `@foo:1:1`
+
+      if (!isUndefined$1(vnode.key)) {
+        vnode.key = "@".concat(slotName, ":").concat(vnode.key);
+      }
+
+      ArrayPush$1.call(vnodes, vnode);
+    }
+
+    if (isFalse(vm.isDirty)) {
+      // We need to determine if the old allocation is really different from the new one
+      // and mark the vm as dirty
+      var oldKeys = keys(oldSlots);
+
+      if (oldKeys.length !== keys(cmpSlots).length) {
+        markComponentAsDirty(vm);
+        return;
+      }
+
+      for (var _i17 = 0, _len7 = oldKeys.length; _i17 < _len7; _i17 += 1) {
+        var key = oldKeys[_i17];
+
+        if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
+          markComponentAsDirty(vm);
+          return;
+        }
+
+        var oldVNodes = oldSlots[key];
+        var _vnodes = cmpSlots[key];
+
+        for (var j = 0, a = cmpSlots[key].length; j < a; j += 1) {
+          if (oldVNodes[j] !== _vnodes[j]) {
+            markComponentAsDirty(vm);
+            return;
+          }
+        }
+      }
+    }
   } // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
 
 
@@ -4933,12 +5094,12 @@ var LWC = (function (exports) {
    */
 
 
-  function getUpgradableConstructor(tagName, renderer) {
+  function getUpgradableConstructor(tagName) {
     // 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 = renderer.getCustomElement(tagName);
+    var CE = getCustomElement$1(tagName);
 
     if (!isUndefined$1(CE)) {
       return CE;
@@ -4949,8 +5110,8 @@ var LWC = (function (exports) {
      */
 
 
-    CE = /*#__PURE__*/function (_renderer$HTMLElement) {
-      _inherits(LWCUpgradableElement, _renderer$HTMLElement);
+    CE = /*#__PURE__*/function (_HTMLElementExported$) {
+      _inherits(LWCUpgradableElement, _HTMLElementExported$);
 
       var _super5 = _createSuper(LWCUpgradableElement);
 
@@ -4969,9 +5130,9 @@ var LWC = (function (exports) {
       }
 
       return _createClass(LWCUpgradableElement);
-    }(renderer.HTMLElement);
+    }(HTMLElementExported$1);
 
-    renderer.defineCustomElement(tagName, CE);
+    defineCustomElement$1(tagName, CE);
     return CE;
   }
   /*
@@ -4987,8 +5148,7 @@ var LWC = (function (exports) {
   var TextHook = {
     create: function create(vnode) {
       var owner = vnode.owner;
-      var renderer = owner.renderer;
-      var elm = renderer.createText(vnode.text);
+      var elm = createText$1(vnode.text);
       linkNodeToShadow(elm, owner);
       vnode.elm = elm;
     },
@@ -5020,8 +5180,7 @@ var LWC = (function (exports) {
     create: function create(vnode) {
       var owner = vnode.owner,
           text = vnode.text;
-      var renderer = owner.renderer;
-      var elm = renderer.createComment(text);
+      var elm = createComment$1(text);
       linkNodeToShadow(elm, owner);
       vnode.elm = elm;
     },
@@ -5059,17 +5218,16 @@ var LWC = (function (exports) {
       var sel = vnode.sel,
           owner = vnode.owner,
           svg = vnode.data.svg;
-      var renderer = owner.renderer;
       var namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-      var elm = renderer.createElement(sel, namespace);
+      var elm = createElement$2(sel, namespace);
       linkNodeToShadow(elm, owner);
       fallbackElmHook(elm, vnode);
       vnode.elm = elm;
-      createElmHook(vnode);
+      patchElementPropsAndAttrs(null, vnode);
     },
     update: function update(oldVnode, vnode) {
-      updateElmHook(oldVnode, vnode);
-      updateChildrenHook(oldVnode, vnode);
+      patchElementPropsAndAttrs(oldVnode, vnode);
+      patchChildren(vnode.elm, oldVnode.children, vnode.children);
     },
     insert: function insert(vnode, parentNode, referenceNode) {
       insertNodeHook(vnode, parentNode, referenceNode);
@@ -5115,8 +5273,7 @@ var LWC = (function (exports) {
     create: function create(vnode) {
       var sel = vnode.sel,
           owner = vnode.owner;
-      var renderer = owner.renderer;
-      var UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+      var UpgradableConstructor = getUpgradableConstructor(sel);
       /**
        * 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
@@ -5138,10 +5295,10 @@ var LWC = (function (exports) {
         throw new TypeError("Incorrect Component Constructor");
       }
 
-      createCustomElmHook(vnode);
+      patchElementPropsAndAttrs(null, vnode);
     },
     update: function update(oldVnode, vnode) {
-      updateCustomElmHook(oldVnode, vnode);
+      patchElementPropsAndAttrs(oldVnode, vnode);
       var vm = getAssociatedVMIfPresent(vnode.elm);
 
       if (vm) {
@@ -5152,7 +5309,7 @@ var LWC = (function (exports) {
       // will happen, but in native, it does allocate the light dom
 
 
-      updateChildrenHook(oldVnode, vnode);
+      patchChildren(vnode.elm, oldVnode.children, vnode.children);
 
       if (vm) {
         if (process.env.NODE_ENV !== 'production') {
@@ -5207,8 +5364,7 @@ var LWC = (function (exports) {
       createVM(elm, def, {
         mode: mode,
         owner: owner,
-        tagName: sel,
-        renderer: owner.renderer
+        tagName: sel
       });
       vnode.elm = elm;
       var vm = getAssociatedVM(elm);
@@ -5236,11 +5392,10 @@ var LWC = (function (exports) {
   };
 
   function linkNodeToShadow(elm, owner) {
-    var renderer = owner.renderer,
-        renderMode = owner.renderMode,
+    var renderMode = owner.renderMode,
         shadowMode = owner.shadowMode; // TODO [#1164]: this should eventually be done by the polyfill directly
 
-    if (renderer.isSyntheticShadowDefined) {
+    if (isSyntheticShadowDefined$1) {
       if (shadowMode === 1
       /* Synthetic */
       || renderMode === 0
@@ -5761,7 +5916,6 @@ var LWC = (function (exports) {
   function updateStylesheetToken(vm, template) {
     var elm = vm.elm,
         context = vm.context,
-        renderer = vm.renderer,
         renderMode = vm.renderMode,
         shadowMode = vm.shadowMode;
     var newStylesheets = template.stylesheets,
@@ -5781,11 +5935,11 @@ var LWC = (function (exports) {
         oldHasTokenInAttribute = context.hasTokenInAttribute;
 
     if (oldHasTokenInClass) {
-      renderer.getClassList(elm).remove(makeHostToken(oldToken));
+      getClassList$1(elm).remove(makeHostToken(oldToken));
     }
 
     if (oldHasTokenInAttribute) {
-      renderer.removeAttribute(elm, makeHostToken(oldToken));
+      removeAttribute$1(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.
 
@@ -5797,12 +5951,12 @@ var LWC = (function (exports) {
 
     if (!isUndefined$1(newToken)) {
       if (hasScopedStyles) {
-        renderer.getClassList(elm).add(makeHostToken(newToken));
+        getClassList$1(elm).add(makeHostToken(newToken));
         newHasTokenInClass = true;
       }
 
       if (isSyntheticShadow) {
-        renderer.setAttribute(elm, makeHostToken(newToken), '');
+        setAttribute$1(elm, makeHostToken(newToken), '');
         newHasTokenInAttribute = true;
       }
     } // Update the styling tokens present on the context object.
@@ -5817,8 +5971,8 @@ var LWC = (function (exports) {
     var content = [];
     var root;
 
-    for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
-      var stylesheet = stylesheets[_i16];
+    for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
+      var stylesheet = stylesheets[_i18];
 
       if (isArray$1(stylesheet)) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
@@ -5920,8 +6074,7 @@ var LWC = (function (exports) {
   }
 
   function createStylesheet(vm, stylesheets) {
-    var renderer = vm.renderer,
-        renderMode = vm.renderMode,
+    var renderMode = vm.renderMode,
         shadowMode = vm.shadowMode;
 
     if (renderMode === 1
@@ -5929,10 +6082,10 @@ var LWC = (function (exports) {
     && shadowMode === 1
     /* Synthetic */
     ) {
-      for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
-        renderer.insertGlobalStylesheet(stylesheets[_i17]);
+      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
+        insertGlobalStylesheet$1(stylesheets[_i19]);
       }
-    } else if (renderer.ssr || renderer.isHydrating()) {
+    } else if (ssr$1 || isHydrating$1()) {
       // 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.
@@ -5944,12 +6097,12 @@ var LWC = (function (exports) {
       var root = getNearestNativeShadowComponent(vm);
       var isGlobal = isNull(root);
 
-      for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
+      for (var _i20 = 0; _i20 < stylesheets.length; _i20++) {
         if (isGlobal) {
-          renderer.insertGlobalStylesheet(stylesheets[_i18]);
+          insertGlobalStylesheet$1(stylesheets[_i20]);
         } else {
           // local level
-          renderer.insertStylesheet(stylesheets[_i18], root.cmpRoot);
+          insertStylesheet$1(stylesheets[_i20], root.cmpRoot);
         }
       }
     }
@@ -6226,8 +6379,8 @@ var LWC = (function (exports) {
     var stylesheets = template.stylesheets;
 
     if (!isUndefined$1(stylesheets)) {
-      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
-        if (isTrue(stylesheets[_i19][KEY__SCOPED_CSS])) {
+      for (var _i21 = 0; _i21 < stylesheets.length; _i21++) {
+        if (isTrue(stylesheets[_i21][KEY__SCOPED_CSS])) {
           return true;
         }
       }
@@ -6457,8 +6610,8 @@ var LWC = (function (exports) {
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
 
-    for (var _i20 = 0; _i20 < hooks.length; ++_i20) {
-      var hookName = hooks[_i20];
+    for (var _i22 = 0; _i22 < hooks.length; ++_i22) {
+      var hookName = hooks[_i22];
 
       if (hookName in service) {
         var l = Services[hookName];
@@ -6481,8 +6634,8 @@ var LWC = (function (exports) {
         def = vm.def,
         context = vm.context;
 
-    for (var _i21 = 0, _len6 = cbs.length; _i21 < _len6; ++_i21) {
-      cbs[_i21].call(undefined, component, {}, def, context);
+    for (var _i23 = 0, _len8 = cbs.length; _i23 < _len8; ++_i23) {
+      cbs[_i23].call(undefined, component, {}, def, context);
     }
   }
   /*
@@ -6611,7 +6764,6 @@ var LWC = (function (exports) {
   function createVM(elm, def, options) {
     var mode = options.mode,
         owner = options.owner,
-        renderer = options.renderer,
         tagName = options.tagName;
     var vm = {
       elm: elm,
@@ -6625,7 +6777,6 @@ var LWC = (function (exports) {
       tagName: tagName,
       mode: mode,
       owner: owner,
-      renderer: renderer,
       children: EmptyArray,
       aChildren: EmptyArray,
       velements: EmptyArray,
@@ -6679,13 +6830,10 @@ var LWC = (function (exports) {
   }
 
   function computeShadowMode(vm) {
-    var def = vm.def,
-        renderer = vm.renderer;
-    var isNativeShadowDefined = renderer.isNativeShadowDefined,
-        isSyntheticShadowDefined = renderer.isSyntheticShadowDefined;
+    var def = vm.def;
     var shadowMode;
 
-    if (isSyntheticShadowDefined) {
+    if (isSyntheticShadowDefined$1) {
       if (def.renderMode === 0
       /* Light */
       ) {
@@ -6694,7 +6842,7 @@ var LWC = (function (exports) {
         shadowMode = 0
         /* Native */
         ;
-      } else if (isNativeShadowDefined) {
+      } else if (isNativeShadowDefined$1) {
         if (def.shadowSupportMode === "any"
         /* Any */
         ) {
@@ -6800,7 +6948,6 @@ var LWC = (function (exports) {
       // patch function mutates vnodes by adding the element reference,
       // however, if patching fails it contains partial changes.
       if (oldCh !== newCh) {
-        var fn = hasDynamicChildren(newCh) ? updateDynamicChildren : updateStaticChildren;
         runWithBoundaryProtection(vm, vm, function () {
           // pre
           logOperationStart(2
@@ -6808,8 +6955,8 @@ var LWC = (function (exports) {
           , vm);
         }, function () {
           // job
-          var elementToRenderTo = getRenderRoot(vm);
-          fn(elementToRenderTo, oldCh, newCh);
+          var renderRoot = getRenderRoot(vm);
+          patchChildren(renderRoot, oldCh, newCh);
         }, function () {
           // post
           logOperationEnd(2
@@ -6831,10 +6978,9 @@ var LWC = (function (exports) {
   }
 
   function runRenderedCallback(vm) {
-    var renderer = vm.renderer,
-        renderedCallback = vm.def.renderedCallback;
+    var renderedCallback = vm.def.renderedCallback;
 
-    if (isTrue(renderer.ssr)) {
+    if (isTrue(ssr$1)) {
       return;
     }
 
@@ -6871,19 +7017,19 @@ var LWC = (function (exports) {
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i22 = 0, _len7 = vms.length; _i22 < _len7; _i22 += 1) {
-      var vm = vms[_i22];
+    for (var _i24 = 0, _len9 = vms.length; _i24 < _len9; _i24 += 1) {
+      var vm = vms[_i24];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i22 + 1 < _len7) {
+        if (_i24 + 1 < _len9) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
 
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i22 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i24 + 1));
         } // we need to end the measure before throwing.
 
 
@@ -6987,8 +7133,8 @@ var LWC = (function (exports) {
     var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
 
-    for (var _i23 = vCustomElementCollection.length - 1; _i23 >= 0; _i23 -= 1) {
-      var elm = vCustomElementCollection[_i23].elm; // There are two cases where the element could be undefined:
+    for (var _i25 = vCustomElementCollection.length - 1; _i25 >= 0; _i25 -= 1) {
+      var elm = vCustomElementCollection[_i25].elm; // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
       //   is not properly initialized, and therefore is should be ignored.
@@ -7022,8 +7168,8 @@ var LWC = (function (exports) {
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i24 = 0, _len8 = vnodes.length; _i24 < _len8; _i24 += 1) {
-      var vnode = vnodes[_i24];
+    for (var _i26 = 0, _len10 = vnodes.length; _i26 < _len10; _i26 += 1) {
+      var vnode = vnodes[_i26];
 
       if (!isNull(vnode) && isArray$1(vnode.children) && !isUndefined$1(vnode.elm)) {
         // vnode is a VElement with children
@@ -7043,15 +7189,14 @@ var LWC = (function (exports) {
 
 
   function resetComponentRoot(vm) {
-    var children = vm.children,
-        renderer = vm.renderer;
+    var children = vm.children;
     var rootNode = getRenderRoot(vm);
 
-    for (var _i25 = 0, _len9 = children.length; _i25 < _len9; _i25++) {
-      var child = children[_i25];
+    for (var _i27 = 0, _len11 = children.length; _i27 < _len11; _i27++) {
+      var child = children[_i27];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
-        renderer.remove(child.elm, rootNode);
+        remove$1(child.elm, rootNode);
       }
     }
 
@@ -7061,7 +7206,7 @@ var LWC = (function (exports) {
   }
 
   function scheduleRehydration(vm) {
-    if (isTrue(vm.renderer.ssr) || isTrue(vm.isScheduled)) {
+    if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -7084,65 +7229,6 @@ var LWC = (function (exports) {
 
       currentVm = currentVm.owner;
     }
-  } // slow path routine
-  // NOTE: we should probably more this routine to the synthetic shadow folder
-  // and get the allocation to be cached by in the elm instead of in the VM
-
-
-  function allocateInSlot(vm, children) {
-    var oldSlots = vm.cmpSlots;
-    var cmpSlots = vm.cmpSlots = create(null);
-
-    for (var _i26 = 0, _len10 = children.length; _i26 < _len10; _i26 += 1) {
-      var vnode = children[_i26];
-
-      if (isNull(vnode)) {
-        continue;
-      }
-
-      var data = vnode.data;
-      var slotName = data.attrs && data.attrs.slot || '';
-      var vnodes = cmpSlots[slotName] = cmpSlots[slotName] || []; // re-keying the vnodes is necessary to avoid conflicts with default content for the slot
-      // which might have similar keys. Each vnode will always have a key that
-      // starts with a numeric character from compiler. In this case, we add a unique
-      // notation for slotted vnodes keys, e.g.: `@foo:1:1`
-
-      if (!isUndefined$1(vnode.key)) {
-        vnode.key = "@".concat(slotName, ":").concat(vnode.key);
-      }
-
-      ArrayPush$1.call(vnodes, vnode);
-    }
-
-    if (isFalse(vm.isDirty)) {
-      // We need to determine if the old allocation is really different from the new one
-      // and mark the vm as dirty
-      var oldKeys = keys(oldSlots);
-
-      if (oldKeys.length !== keys(cmpSlots).length) {
-        markComponentAsDirty(vm);
-        return;
-      }
-
-      for (var _i27 = 0, _len11 = oldKeys.length; _i27 < _len11; _i27 += 1) {
-        var key = oldKeys[_i27];
-
-        if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
-          markComponentAsDirty(vm);
-          return;
-        }
-
-        var oldVNodes = oldSlots[key];
-        var _vnodes = cmpSlots[key];
-
-        for (var j = 0, a = cmpSlots[key].length; j < a; j += 1) {
-          if (oldVNodes[j] !== _vnodes[j]) {
-            markComponentAsDirty(vm);
-            return;
-          }
-        }
-      }
-    }
   }
 
   function runWithBoundaryProtection(vm, owner, pre, job, post) {
@@ -7311,7 +7397,6 @@ var LWC = (function (exports) {
     }
 
     var elm = vm.elm,
-        renderer = vm.renderer,
         _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
@@ -7334,7 +7419,7 @@ var LWC = (function (exports) {
           ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
         }
       });
-      renderer.dispatchEvent(elm, contextRegistrationEvent);
+      dispatchEvent$1(elm, contextRegistrationEvent);
     });
   }
 
@@ -7588,7 +7673,7 @@ var LWC = (function (exports) {
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.6.2 */
+  /* version: 2.7.3 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7618,7 +7703,9 @@ var LWC = (function (exports) {
   var styleElements = create(null);
   var styleSheets = create(null);
   var nodesToStyleSheets = new WeakMap();
-  var getCustomElement, defineCustomElement, HTMLElementConstructor;
+  var getCustomElement;
+  var defineCustomElement;
+  var HTMLElementConstructor;
 
   function isCustomElementRegistryAvailable() {
     if (typeof customElements === 'undefined') {
@@ -7743,152 +7830,231 @@ var LWC = (function (exports) {
     HTMLElementConstructor.prototype = HTMLElement.prototype;
   }
 
-  var _isHydrating = false;
+  var hydrating = false;
 
-  function setIsHydrating(v) {
-    _isHydrating = v;
+  function setIsHydrating(value) {
+    hydrating = value;
   }
 
-  var renderer = {
-    ssr: false,
-    isHydrating: function isHydrating() {
-      return _isHydrating;
-    },
-    isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
-    isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
-    createElement: function createElement(tagName, namespace) {
-      return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
-    },
-    createText: function createText(content) {
-      return document.createTextNode(content);
-    },
-    createComment: function createComment(content) {
-      return document.createComment(content);
-    },
-    insert: function insert(node, parent, anchor) {
-      parent.insertBefore(node, anchor);
-    },
-    remove: function remove(node, parent) {
-      parent.removeChild(node);
-    },
-    nextSibling: function nextSibling(node) {
-      return node.nextSibling;
-    },
-    attachShadow: function attachShadow(element, options) {
-      if (_isHydrating) {
-        return element.shadowRoot;
-      }
+  var ssr = false;
 
-      return element.attachShadow(options);
-    },
-    setText: function setText(node, content) {
-      node.nodeValue = content;
-    },
-    getProperty: function getProperty(node, key) {
-      return node[key];
-    },
-    setProperty: function setProperty(node, key, value) {
-      if (process.env.NODE_ENV !== 'production') {
-        if (node instanceof Element && !(key in node)) {
-          // TODO [#1297]: Move this validation to the compiler
-          assert.fail("Unknown public property \"".concat(key, "\" of element <").concat(node.tagName, ">. This is likely a typo on the corresponding attribute \"").concat(htmlPropertyToAttribute(key), "\"."));
-        }
-      }
+  function isHydrating() {
+    return hydrating;
+  }
 
-      node[key] = value;
-    },
-    getAttribute: function getAttribute(element, name, namespace) {
-      return isUndefined$1(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
-    },
-    setAttribute: function setAttribute(element, name, value, namespace) {
-      return isUndefined$1(namespace) ? element.setAttribute(name, value) : element.setAttributeNS(namespace, name, value);
-    },
-    removeAttribute: function removeAttribute(element, name, namespace) {
-      if (isUndefined$1(namespace)) {
-        element.removeAttribute(name);
-      } else {
-        element.removeAttributeNS(namespace, name);
-      }
-    },
-    addEventListener: function addEventListener(target, type, callback, options) {
-      target.addEventListener(type, callback, options);
-    },
-    removeEventListener: function removeEventListener(target, type, callback, options) {
-      target.removeEventListener(type, callback, options);
-    },
-    dispatchEvent: function dispatchEvent(target, event) {
-      return target.dispatchEvent(event);
-    },
-    getClassList: function getClassList(element) {
-      return element.classList;
-    },
-    setCSSStyleProperty: function setCSSStyleProperty(element, name, value, important) {
-      // TODO [#0]: How to avoid this type casting? Shall we use a different type interface to
-      // represent elements in the engine?
-      element.style.setProperty(name, value, important ? 'important' : '');
-    },
-    getBoundingClientRect: function getBoundingClientRect(element) {
-      return element.getBoundingClientRect();
-    },
-    querySelector: function querySelector(element, selectors) {
-      return element.querySelector(selectors);
-    },
-    querySelectorAll: function querySelectorAll(element, selectors) {
-      return element.querySelectorAll(selectors);
-    },
-    getElementsByTagName: function getElementsByTagName(element, tagNameOrWildCard) {
-      return element.getElementsByTagName(tagNameOrWildCard);
-    },
-    getElementsByClassName: function getElementsByClassName(element, names) {
-      return element.getElementsByClassName(names);
-    },
-    getChildren: function getChildren(element) {
-      return element.children;
-    },
-    getChildNodes: function getChildNodes(element) {
-      return element.childNodes;
-    },
-    getFirstChild: function getFirstChild(element) {
-      return element.firstChild;
-    },
-    getFirstElementChild: function getFirstElementChild(element) {
-      return element.firstElementChild;
-    },
-    getLastChild: function getLastChild(element) {
-      return element.lastChild;
-    },
-    getLastElementChild: function getLastElementChild(element) {
-      return element.lastElementChild;
-    },
-    isConnected: function isConnected(node) {
-      return node.isConnected;
-    },
-    insertGlobalStylesheet: function insertGlobalStylesheet(content) {
-      if (!isUndefined$1(globalStylesheets[content])) {
-        return;
-      }
+  var isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
+  var isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
 
-      globalStylesheets[content] = true;
-      var elm = document.createElement('style');
-      elm.type = 'text/css';
-      elm.textContent = content;
-      globalStylesheetsParentElement.appendChild(elm);
-    },
-    insertStylesheet: function insertStylesheet(content, target) {
-      if (supportsConstructableStyleSheets) {
-        insertConstructableStyleSheet(content, target);
-      } else {
-        // Fall back to <style> element
-        insertStyleElement(content, target);
+  function createElement$1(tagName, namespace) {
+    return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
+  }
+
+  function createText(content) {
+    return document.createTextNode(content);
+  }
+
+  function createComment(content) {
+    return document.createComment(content);
+  }
+
+  function insert(node, parent, anchor) {
+    parent.insertBefore(node, anchor);
+  }
+
+  function remove(node, parent) {
+    parent.removeChild(node);
+  }
+
+  function nextSibling(node) {
+    return node.nextSibling;
+  }
+
+  function attachShadow(element, options) {
+    if (hydrating) {
+      return element.shadowRoot;
+    }
+
+    return element.attachShadow(options);
+  }
+
+  function setText(node, content) {
+    node.nodeValue = content;
+  }
+
+  function getProperty(node, key) {
+    return node[key];
+  }
+
+  function setProperty(node, key, value) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (node instanceof Element && !(key in node)) {
+        // TODO [#1297]: Move this validation to the compiler
+        assert.fail("Unknown public property \"".concat(key, "\" of element <").concat(node.tagName, ">. This is likely a typo on the corresponding attribute \"").concat(htmlPropertyToAttribute(key), "\"."));
       }
-    },
-    assertInstanceOfHTMLElement: function assertInstanceOfHTMLElement(elm, msg) {
-      assert.invariant(elm instanceof HTMLElement, msg);
-    },
-    defineCustomElement: defineCustomElement,
-    getCustomElement: getCustomElement,
-    HTMLElement: HTMLElementConstructor
-  };
+    }
+
+    node[key] = value;
+  }
+
+  function getAttribute(element, name, namespace) {
+    return isUndefined$1(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
+  }
+
+  function setAttribute(element, name, value, namespace) {
+    return isUndefined$1(namespace) ? element.setAttribute(name, value) : element.setAttributeNS(namespace, name, value);
+  }
+
+  function removeAttribute(element, name, namespace) {
+    if (isUndefined$1(namespace)) {
+      element.removeAttribute(name);
+    } else {
+      element.removeAttributeNS(namespace, name);
+    }
+  }
+
+  function addEventListener(target, type, callback, options) {
+    target.addEventListener(type, callback, options);
+  }
+
+  function removeEventListener(target, type, callback, options) {
+    target.removeEventListener(type, callback, options);
+  }
+
+  function dispatchEvent(target, event) {
+    return target.dispatchEvent(event);
+  }
+
+  function getClassList(element) {
+    return element.classList;
+  }
+
+  function setCSSStyleProperty(element, name, value, important) {
+    // TODO [#0]: How to avoid this type casting? Shall we use a different type interface to
+    // represent elements in the engine?
+    element.style.setProperty(name, value, important ? 'important' : '');
+  }
+
+  function getBoundingClientRect(element) {
+    return element.getBoundingClientRect();
+  }
+
+  function querySelector(element, selectors) {
+    return element.querySelector(selectors);
+  }
+
+  function querySelectorAll(element, selectors) {
+    return element.querySelectorAll(selectors);
+  }
+
+  function getElementsByTagName(element, tagNameOrWildCard) {
+    return element.getElementsByTagName(tagNameOrWildCard);
+  }
+
+  function getElementsByClassName(element, names) {
+    return element.getElementsByClassName(names);
+  }
+
+  function getChildren(element) {
+    return element.children;
+  }
+
+  function getChildNodes(element) {
+    return element.childNodes;
+  }
+
+  function getFirstChild(element) {
+    return element.firstChild;
+  }
+
+  function getFirstElementChild(element) {
+    return element.firstElementChild;
+  }
+
+  function getLastChild(element) {
+    return element.lastChild;
+  }
+
+  function getLastElementChild(element) {
+    return element.lastElementChild;
+  }
+
+  function isConnected(node) {
+    return node.isConnected;
+  }
+
+  function insertGlobalStylesheet(content) {
+    if (!isUndefined$1(globalStylesheets[content])) {
+      return;
+    }
+
+    globalStylesheets[content] = true;
+    var elm = document.createElement('style');
+    elm.type = 'text/css';
+    elm.textContent = content;
+    globalStylesheetsParentElement.appendChild(elm);
+  }
+
+  function insertStylesheet(content, target) {
+    if (supportsConstructableStyleSheets) {
+      insertConstructableStyleSheet(content, target);
+    } else {
+      // Fall back to <style> element
+      insertStyleElement(content, target);
+    }
+  }
+
+  function assertInstanceOfHTMLElement(elm, msg) {
+    assert.invariant(elm instanceof HTMLElement, msg);
+  }
+
+  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);
+  setInsertGlobalStylesheet(insertGlobalStylesheet);
+  setInsertStylesheet(insertStylesheet);
+  setIsConnected(isConnected);
+  setIsHydrating$1(isHydrating);
+  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);
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -7970,7 +8136,7 @@ var LWC = (function (exports) {
       throw new TypeError("\"createElement\" function expects an \"is\" option with a valid component constructor.");
     }
 
-    var UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+    var UpgradableConstructor = getUpgradableConstructor(sel);
     var wasComponentUpgraded = false; // the custom element from the registry is expecting an upgrade callback
 
     /**
@@ -7985,8 +8151,7 @@ var LWC = (function (exports) {
       createVM(elm, def, {
         tagName: sel,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
-        owner: null,
-        renderer: renderer
+        owner: null
       });
       ConnectingSlot.set(elm, connectRootElement);
       DisconnectingSlot.set(elm, disconnectRootElement);
@@ -8011,6 +8176,10 @@ var LWC = (function (exports) {
   function hydrateComponent(element, Ctor) {
     var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
+    if (!(element instanceof Element)) {
+      throw new TypeError("\"hydrateComponent\" expects a valid DOM element as the first parameter but instead received ".concat(element, "."));
+    }
+
     if (!isFunction$1(Ctor)) {
       throw new TypeError("\"hydrateComponent\" expects a valid component constructor as the second parameter but instead received ".concat(Ctor, "."));
     }
@@ -8028,7 +8197,6 @@ var LWC = (function (exports) {
       createVM(element, def, {
         mode: 'open',
         owner: null,
-        renderer: renderer,
         tagName: element.tagName.toLowerCase()
       });
 
@@ -8115,8 +8283,7 @@ var LWC = (function (exports) {
         createVM(_assertThisInitialized(_this6), def, {
           mode: 'open',
           owner: null,
-          tagName: _this6.tagName,
-          renderer: renderer
+          tagName: _this6.tagName
         });
         return _this6;
       }
@@ -8189,7 +8356,7 @@ var LWC = (function (exports) {
       return false;
     }
 
-    if (renderer.isSyntheticShadowDefined) {
+    if (isSyntheticShadowDefined) {
       // TODO [#1252]: old behavior that is still used by some pieces of the platform,
       // specifically, nodes inserted manually on places where `lwc:dom="manual"` directive is not
       // used, will be considered global elements.
@@ -8241,7 +8408,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.6.2 */
+  /* version: 2.7.3 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;