lwc 2.5.10 → 2.6.3

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

@@ -299,7 +299,7 @@ function htmlPropertyToAttribute(propName) {
   CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
   return attributeName;
 }
-/** version: 2.5.10 */
+/** version: 2.6.3 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -413,8 +413,6 @@ const features = {
   ENABLE_NODE_LIST_PATCH: null,
   ENABLE_HTML_COLLECTIONS_PATCH: null,
   ENABLE_NODE_PATCH: null,
-  ENABLE_NON_COMPOSED_EVENTS_LEAKAGE: null,
-  ENABLE_MIXED_SHADOW_MODE: null,
   ENABLE_WIRE_SYNC_EMIT: null
 };
 
@@ -479,7 +477,7 @@ function setFeatureFlagForTest(name, value) {
     setFeatureFlag(name, value);
   }
 }
-/** version: 2.5.10 */
+/** version: 2.6.3 */
 
 /* proxy-compat-disable */
 
@@ -553,6 +551,249 @@ function parseStyleText(cssText) {
   }
 
   return styleMap;
+} //
+// Primitives
+//
+
+
+let ssr$1;
+
+function setSsr(ssrImpl) {
+  ssr$1 = ssrImpl;
+}
+
+let isNativeShadowDefined$1;
+
+function setIsNativeShadowDefined(isNativeShadowDefinedImpl) {
+  isNativeShadowDefined$1 = isNativeShadowDefinedImpl;
+}
+
+let isSyntheticShadowDefined$1;
+
+function setIsSyntheticShadowDefined(isSyntheticShadowDefinedImpl) {
+  isSyntheticShadowDefined$1 = isSyntheticShadowDefinedImpl;
+}
+
+let HTMLElementExported$1;
+
+function setHTMLElement(HTMLElementImpl) {
+  HTMLElementExported$1 = HTMLElementImpl;
+}
+
+let isHydrating$1;
+
+function setIsHydrating$1(isHydratingImpl) {
+  isHydrating$1 = isHydratingImpl;
+}
+
+let insert$1;
+
+function setInsert(insertImpl) {
+  insert$1 = insertImpl;
+}
+
+let remove$1;
+
+function setRemove(removeImpl) {
+  remove$1 = removeImpl;
+}
+
+let createElement$2;
+
+function setCreateElement(createElementImpl) {
+  createElement$2 = createElementImpl;
+}
+
+let createText$1;
+
+function setCreateText(createTextImpl) {
+  createText$1 = createTextImpl;
+}
+
+let createComment$1;
+
+function setCreateComment(createCommentImpl) {
+  createComment$1 = createCommentImpl;
+}
+
+let nextSibling$1;
+
+function setNextSibling(nextSiblingImpl) {
+  nextSibling$1 = nextSiblingImpl;
+}
+
+let attachShadow$1;
+
+function setAttachShadow(attachShadowImpl) {
+  attachShadow$1 = attachShadowImpl;
+}
+
+let getProperty$1;
+
+function setGetProperty(getPropertyImpl) {
+  getProperty$1 = getPropertyImpl;
+}
+
+let setProperty$1;
+
+function setSetProperty(setPropertyImpl) {
+  setProperty$1 = setPropertyImpl;
+}
+
+let setText$1;
+
+function setSetText(setTextImpl) {
+  setText$1 = setTextImpl;
+}
+
+let getAttribute$1;
+
+function setGetAttribute(getAttributeImpl) {
+  getAttribute$1 = getAttributeImpl;
+}
+
+let setAttribute$1;
+
+function setSetAttribute(setAttributeImpl) {
+  setAttribute$1 = setAttributeImpl;
+}
+
+let removeAttribute$1;
+
+function setRemoveAttribute(removeAttributeImpl) {
+  removeAttribute$1 = removeAttributeImpl;
+}
+
+let addEventListener$1;
+
+function setAddEventListener(addEventListenerImpl) {
+  addEventListener$1 = addEventListenerImpl;
+}
+
+let removeEventListener$1;
+
+function setRemoveEventListener(removeEventListenerImpl) {
+  removeEventListener$1 = removeEventListenerImpl;
+}
+
+let dispatchEvent$1;
+
+function setDispatchEvent(dispatchEventImpl) {
+  dispatchEvent$1 = dispatchEventImpl;
+}
+
+let getClassList$1;
+
+function setGetClassList(getClassListImpl) {
+  getClassList$1 = getClassListImpl;
+}
+
+let setCSSStyleProperty$1;
+
+function setSetCSSStyleProperty(setCSSStylePropertyImpl) {
+  setCSSStyleProperty$1 = setCSSStylePropertyImpl;
+}
+
+let getBoundingClientRect$1;
+
+function setGetBoundingClientRect(getBoundingClientRectImpl) {
+  getBoundingClientRect$1 = getBoundingClientRectImpl;
+}
+
+let querySelector$1;
+
+function setQuerySelector(querySelectorImpl) {
+  querySelector$1 = querySelectorImpl;
+}
+
+let querySelectorAll$1;
+
+function setQuerySelectorAll(querySelectorAllImpl) {
+  querySelectorAll$1 = querySelectorAllImpl;
+}
+
+let getElementsByTagName$1;
+
+function setGetElementsByTagName(getElementsByTagNameImpl) {
+  getElementsByTagName$1 = getElementsByTagNameImpl;
+}
+
+let getElementsByClassName$1;
+
+function setGetElementsByClassName(getElementsByClassNameImpl) {
+  getElementsByClassName$1 = getElementsByClassNameImpl;
+}
+
+let getChildren$1;
+
+function setGetChildren(getChildrenImpl) {
+  getChildren$1 = getChildrenImpl;
+}
+
+let getChildNodes$1;
+
+function setGetChildNodes(getChildNodesImpl) {
+  getChildNodes$1 = getChildNodesImpl;
+}
+
+let getFirstChild$1;
+
+function setGetFirstChild(getFirstChildImpl) {
+  getFirstChild$1 = getFirstChildImpl;
+}
+
+let getFirstElementChild$1;
+
+function setGetFirstElementChild(getFirstElementChildImpl) {
+  getFirstElementChild$1 = getFirstElementChildImpl;
+}
+
+let getLastChild$1;
+
+function setGetLastChild(getLastChildImpl) {
+  getLastChild$1 = getLastChildImpl;
+}
+
+let getLastElementChild$1;
+
+function setGetLastElementChild(getLastElementChildImpl) {
+  getLastElementChild$1 = getLastElementChildImpl;
+}
+
+let isConnected$1;
+
+function setIsConnected(isConnectedImpl) {
+  isConnected$1 = isConnectedImpl;
+}
+
+let insertGlobalStylesheet$1;
+
+function setInsertGlobalStylesheet(insertGlobalStylesheetImpl) {
+  insertGlobalStylesheet$1 = insertGlobalStylesheetImpl;
+}
+
+let insertStylesheet$1;
+
+function setInsertStylesheet(insertStylesheetImpl) {
+  insertStylesheet$1 = insertStylesheetImpl;
+}
+
+let assertInstanceOfHTMLElement$1;
+
+function setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElementImpl) {
+  assertInstanceOfHTMLElement$1 = assertInstanceOfHTMLElementImpl;
+}
+
+let defineCustomElement$1;
+
+function setDefineCustomElement(defineCustomElementImpl) {
+  defineCustomElement$1 = defineCustomElementImpl;
+}
+
+let getCustomElement$1;
+
+function setGetCustomElement(getCustomElementImpl) {
+  getCustomElement$1 = getCustomElementImpl;
 }
 /*
  * Copyright (c) 2019, salesforce.com, inc.
@@ -806,9 +1047,6 @@ function createAllEventListeners(vnode) {
     elm,
     data: {
       on
-    },
-    owner: {
-      renderer
     }
   } = vnode;
 
@@ -821,7 +1059,7 @@ function createAllEventListeners(vnode) {
   let name;
 
   for (name in on) {
-    renderer.addEventListener(elm, name, listener);
+    addEventListener$1(elm, name, listener);
   }
 }
 
@@ -963,9 +1201,6 @@ function updateAttrs(oldVnode, vnode) {
   const {
     data: {
       attrs
-    },
-    owner: {
-      renderer
     }
   } = vnode;
 
@@ -988,10 +1223,6 @@ function updateAttrs(oldVnode, vnode) {
   }
 
   const elm = vnode.elm;
-  const {
-    setAttribute,
-    removeAttribute
-  } = renderer;
   let 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
@@ -1006,14 +1237,14 @@ function updateAttrs(oldVnode, vnode) {
 
       if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
         // Assume xml namespace
-        setAttribute(elm, key, cur, xmlNS);
+        setAttribute$1(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);
+        setAttribute$1(elm, key, cur, xlinkNS);
+      } else if (isNull(cur) || isUndefined$1(cur)) {
+        removeAttribute$1(elm, key);
       } else {
-        setAttribute(elm, key, cur);
+        setAttribute$1(elm, key, cur);
       }
 
       lockAttribute();
@@ -1061,17 +1292,14 @@ function update(oldVnode, vnode) {
   const isFirstPatch = isUndefined$1(oldProps);
   const {
     elm,
-    sel,
-    owner: {
-      renderer
-    }
+    sel
   } = vnode;
 
   for (const key in props) {
     const cur = props[key]; // if it is the first time this element is patched, or the current value is different to the previous value...
 
-    if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? renderer.getProperty(elm, key) : oldProps[key])) {
-      renderer.setProperty(elm, key, cur);
+    if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty$1(elm, key) : oldProps[key])) {
+      setProperty$1(elm, key, cur);
     }
   }
 }
@@ -1140,9 +1368,6 @@ function updateClassAttribute(oldVnode, vnode) {
     elm,
     data: {
       className: newClass
-    },
-    owner: {
-      renderer
     }
   } = vnode;
   const {
@@ -1155,7 +1380,7 @@ function updateClassAttribute(oldVnode, vnode) {
     return;
   }
 
-  const classList = renderer.getClassList(elm);
+  const classList = getClassList$1(elm);
   const newClassMap = getMapFromClassName(newClass);
   const oldClassMap = getMapFromClassName(oldClass);
   let name;
@@ -1193,24 +1418,17 @@ function updateStyleAttribute(oldVnode, vnode) {
     elm,
     data: {
       style: newStyle
-    },
-    owner: {
-      renderer
     }
   } = vnode;
-  const {
-    setAttribute,
-    removeAttribute
-  } = renderer;
 
   if (oldVnode.data.style === newStyle) {
     return;
   }
 
   if (!isString(newStyle) || newStyle === '') {
-    removeAttribute(elm, 'style');
+    removeAttribute$1(elm, 'style');
   } else {
-    setAttribute(elm, 'style', newStyle);
+    setAttribute$1(elm, 'style', newStyle);
   }
 }
 
@@ -1235,9 +1453,6 @@ function createClassAttribute(vnode) {
     elm,
     data: {
       classMap
-    },
-    owner: {
-      renderer
     }
   } = vnode;
 
@@ -1245,7 +1460,7 @@ function createClassAttribute(vnode) {
     return;
   }
 
-  const classList = renderer.getClassList(elm);
+  const classList = getClassList$1(elm);
 
   for (const name in classMap) {
     classList.add(name);
@@ -1269,9 +1484,6 @@ function createStyleAttribute(vnode) {
     elm,
     data: {
       styleDecls
-    },
-    owner: {
-      renderer
     }
   } = vnode;
 
@@ -1281,7 +1493,7 @@ function createStyleAttribute(vnode) {
 
   for (let i = 0; i < styleDecls.length; i++) {
     const [prop, value, important] = styleDecls[i];
-    renderer.setCSSStyleProperty(elm, prop, value, important);
+    setCSSStyleProperty$1(elm, prop, value, important);
   }
 }
 
@@ -1295,15 +1507,6 @@ var modStaticStyle = {
  * 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;
 }
@@ -1391,7 +1594,7 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
     } 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)) {
@@ -1873,7 +2076,7 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
   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
@@ -1926,6 +2129,7 @@ const {
   isArray
 } = Array;
 const {
+  prototype: ObjectDotPrototype,
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
@@ -2575,8 +2779,6 @@ if (process.env.NODE_ENV !== 'production') {
   init();
 }
 
-const ObjectDotPrototype = Object.prototype;
-
 function defaultValueIsObservable(value) {
   // intentionally checking for null
   if (value === null) {
@@ -2604,99 +2806,85 @@ const defaultValueMutated = (obj, key) => {
   /* do nothing */
 };
 
-const defaultValueDistortion = value => value;
-
 function createShadowTarget(value) {
   return isArray(value) ? [] : {};
 }
 
-class ReactiveMembrane {
-  constructor(options) {
-    this.valueDistortion = defaultValueDistortion;
-    this.valueMutated = defaultValueMutated;
-    this.valueObserved = defaultValueObserved;
-    this.valueIsObservable = defaultValueIsObservable;
+class ObservableMembrane {
+  constructor(options = {}) {
     this.readOnlyObjectGraph = new WeakMap();
     this.reactiveObjectGraph = new WeakMap();
-
-    if (!isUndefined(options)) {
-      const {
-        valueDistortion,
-        valueMutated,
-        valueObserved,
-        valueIsObservable,
-        tagPropertyKey
-      } = options;
-      this.valueDistortion = isFunction(valueDistortion) ? valueDistortion : defaultValueDistortion;
-      this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
-      this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
-      this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
-      this.tagPropertyKey = tagPropertyKey;
-    }
+    const {
+      valueMutated,
+      valueObserved,
+      valueIsObservable,
+      tagPropertyKey
+    } = options;
+    this.valueMutated = isFunction(valueMutated) ? valueMutated : defaultValueMutated;
+    this.valueObserved = isFunction(valueObserved) ? valueObserved : defaultValueObserved;
+    this.valueIsObservable = isFunction(valueIsObservable) ? valueIsObservable : defaultValueIsObservable;
+    this.tagPropertyKey = tagPropertyKey;
   }
 
   getProxy(value) {
     const unwrappedValue = unwrap$1(value);
-    const distorted = this.valueDistortion(unwrappedValue);
 
-    if (this.valueIsObservable(distorted)) {
-      if (this.readOnlyObjectGraph.get(distorted) === value) {
-        // when trying to extract the writable version of a readonly
-        // we return the readonly.
+    if (this.valueIsObservable(unwrappedValue)) {
+      // When trying to extract the writable version of a readonly we return the readonly.
+      if (this.readOnlyObjectGraph.get(unwrappedValue) === value) {
         return value;
       }
 
-      return this.getReactiveHandler(unwrappedValue, distorted);
+      return this.getReactiveHandler(unwrappedValue);
     }
 
-    return distorted;
+    return unwrappedValue;
   }
 
   getReadOnlyProxy(value) {
     value = unwrap$1(value);
-    const distorted = this.valueDistortion(value);
 
-    if (this.valueIsObservable(distorted)) {
-      return this.getReadOnlyHandler(value, distorted);
+    if (this.valueIsObservable(value)) {
+      return this.getReadOnlyHandler(value);
     }
 
-    return distorted;
+    return value;
   }
 
   unwrapProxy(p) {
     return unwrap$1(p);
   }
 
-  getReactiveHandler(value, distortedValue) {
-    let proxy = this.reactiveObjectGraph.get(distortedValue);
+  getReactiveHandler(value) {
+    let proxy = this.reactiveObjectGraph.get(value);
 
     if (isUndefined(proxy)) {
       // caching the proxy after the first time it is accessed
-      const handler = new ReactiveProxyHandler(this, distortedValue);
-      proxy = new Proxy(createShadowTarget(distortedValue), handler);
+      const handler = new ReactiveProxyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
       registerProxy(proxy, value);
-      this.reactiveObjectGraph.set(distortedValue, proxy);
+      this.reactiveObjectGraph.set(value, proxy);
     }
 
     return proxy;
   }
 
-  getReadOnlyHandler(value, distortedValue) {
-    let proxy = this.readOnlyObjectGraph.get(distortedValue);
+  getReadOnlyHandler(value) {
+    let proxy = this.readOnlyObjectGraph.get(value);
 
     if (isUndefined(proxy)) {
       // caching the proxy after the first time it is accessed
-      const handler = new ReadOnlyHandler(this, distortedValue);
-      proxy = new Proxy(createShadowTarget(distortedValue), handler);
+      const handler = new ReadOnlyHandler(this, value);
+      proxy = new Proxy(createShadowTarget(value), handler);
       registerProxy(proxy, value);
-      this.readOnlyObjectGraph.set(distortedValue, proxy);
+      this.readOnlyObjectGraph.set(value, proxy);
     }
 
     return proxy;
   }
 
 }
-/** version: 1.1.5 */
+/** version: 2.0.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2707,15 +2895,9 @@ class ReactiveMembrane {
 
 
 const lockerLivePropertyKey = Symbol.for('@@lockerLiveValue');
-
-function valueDistortion(value) {
-  return value;
-}
-
-const reactiveMembrane = new ReactiveMembrane({
+const reactiveMembrane = new ObservableMembrane({
   valueObserved,
   valueMutated,
-  valueDistortion,
   tagPropertyKey: lockerLivePropertyKey
 });
 /**
@@ -2724,16 +2906,9 @@ const reactiveMembrane = new ReactiveMembrane({
  * change or being removed.
  */
 
-const unwrap = function (value) {
-  const unwrapped = reactiveMembrane.unwrapProxy(value);
-
-  if (unwrapped !== value) {
-    // if value is a proxy, unwrap to access original value and apply distortion
-    return valueDistortion(unwrapped);
-  }
-
-  return value;
-};
+function unwrap(value) {
+  return reactiveMembrane.unwrapProxy(value);
+}
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -2821,9 +2996,7 @@ function createBridgeToElementDescriptor(propName, descriptor) {
 
 
 const LightningElement = function () {
-  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');
   }
@@ -2831,15 +3004,14 @@ const LightningElement = function () {
   const vm = vmBeingConstructed;
   const {
     def,
-    elm,
-    renderer
+    elm
   } = vm;
   const {
     bridge
   } = def;
 
   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 ${vm}.`);
+    assertInstanceOfHTMLElement$1(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
   }
 
   const component = this;
@@ -2869,7 +3041,7 @@ const LightningElement = function () {
   if (vm.renderMode === 1
   /* Shadow */
   ) {
-    attachShadow(vm);
+    doAttachShadow(vm);
   } // Adding extra guard rails in DEV mode.
 
 
@@ -2881,17 +3053,16 @@ const LightningElement = function () {
   return this;
 };
 
-function attachShadow(vm) {
+function doAttachShadow(vm) {
   const {
     elm,
     mode,
-    renderer,
     shadowMode,
     def: {
       ctor
     }
   } = vm;
-  const cmpRoot = renderer.attachShadow(elm, {
+  const cmpRoot = attachShadow$1(elm, {
     [KEY__SYNTHETIC_MODE]: shadowMode === 1
     /* Synthetic */
     ,
@@ -2918,21 +3089,15 @@ LightningElement.prototype = {
 
   dispatchEvent(event) {
     const {
-      elm,
-      renderer: {
-        dispatchEvent
-      }
+      elm
     } = getAssociatedVM(this);
-    return dispatchEvent(elm, event);
+    return dispatchEvent$1(elm, event);
   },
 
   addEventListener(type, listener, options) {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        addEventListener
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -2943,92 +3108,68 @@ LightningElement.prototype = {
     }
 
     const wrappedListener = getWrappedComponentsListener(vm, listener);
-    addEventListener(elm, type, wrappedListener, options);
+    addEventListener$1(elm, type, wrappedListener, options);
   },
 
   removeEventListener(type, listener, options) {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        removeEventListener
-      }
+      elm
     } = vm;
     const wrappedListener = getWrappedComponentsListener(vm, listener);
-    removeEventListener(elm, type, wrappedListener, options);
+    removeEventListener$1(elm, type, wrappedListener, options);
   },
 
   hasAttribute(name) {
     const {
-      elm,
-      renderer: {
-        getAttribute
-      }
+      elm
     } = getAssociatedVM(this);
-    return !isNull(getAttribute(elm, name));
+    return !isNull(getAttribute$1(elm, name));
   },
 
   hasAttributeNS(namespace, name) {
     const {
-      elm,
-      renderer: {
-        getAttribute
-      }
+      elm
     } = getAssociatedVM(this);
-    return !isNull(getAttribute(elm, name, namespace));
+    return !isNull(getAttribute$1(elm, name, namespace));
   },
 
   removeAttribute(name) {
     const {
-      elm,
-      renderer: {
-        removeAttribute
-      }
+      elm
     } = getAssociatedVM(this);
     unlockAttribute(elm, name);
-    removeAttribute(elm, name);
+    removeAttribute$1(elm, name);
     lockAttribute();
   },
 
   removeAttributeNS(namespace, name) {
     const {
-      elm,
-      renderer: {
-        removeAttribute
-      }
+      elm
     } = getAssociatedVM(this);
     unlockAttribute(elm, name);
-    removeAttribute(elm, name, namespace);
+    removeAttribute$1(elm, name, namespace);
     lockAttribute();
   },
 
   getAttribute(name) {
     const {
-      elm,
-      renderer: {
-        getAttribute
-      }
+      elm
     } = getAssociatedVM(this);
-    return getAttribute(elm, name);
+    return getAttribute$1(elm, name);
   },
 
   getAttributeNS(namespace, name) {
     const {
-      elm,
-      renderer: {
-        getAttribute
-      }
+      elm
     } = getAssociatedVM(this);
-    return getAttribute(elm, name, namespace);
+    return getAttribute$1(elm, name, namespace);
   },
 
   setAttribute(name, value) {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        setAttribute
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -3036,17 +3177,14 @@ LightningElement.prototype = {
     }
 
     unlockAttribute(elm, name);
-    setAttribute(elm, name, value);
+    setAttribute$1(elm, name, value);
     lockAttribute();
   },
 
   setAttributeNS(namespace, name, value) {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        setAttribute
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -3054,43 +3192,34 @@ LightningElement.prototype = {
     }
 
     unlockAttribute(elm, name);
-    setAttribute(elm, name, value, namespace);
+    setAttribute$1(elm, name, value, namespace);
     lockAttribute();
   },
 
   getBoundingClientRect() {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        getBoundingClientRect
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
       warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect()');
     }
 
-    return getBoundingClientRect(elm);
+    return getBoundingClientRect$1(elm);
   },
 
   get isConnected() {
     const {
-      elm,
-      renderer: {
-        isConnected
-      }
+      elm
     } = getAssociatedVM(this);
-    return isConnected(elm);
+    return isConnected$1(elm);
   },
 
   get classList() {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        getClassList
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -3099,7 +3228,7 @@ LightningElement.prototype = {
       assert.isFalse(isBeingConstructed(vm), `Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
     }
 
-    return getClassList(elm);
+    return getClassList$1(elm);
   },
 
   get template() {
@@ -3133,23 +3262,48 @@ LightningElement.prototype = {
   }
 
 };
-const queryAndChildGetterDescriptors = create(null);
-const 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
+const queryAndChildGetterDescriptors = create(null); // The reason we don't just call `import * as renderer from '../renderer'` here is that the bundle size
+// is smaller if we reference each function individually. Otherwise Rollup will create one big frozen
+// object representing the renderer, with a lot of methods we don't actually need.
+
+const childGetters = ['children', 'childNodes', 'firstChild', 'firstElementChild', 'lastChild', 'lastElementChild'];
+
+function getChildGetter(methodName) {
+  switch (methodName) {
+    case 'children':
+      return getChildren$1;
+
+    case 'childNodes':
+      return getChildNodes$1;
+
+    case 'firstChild':
+      return getFirstChild$1;
+
+    case 'firstElementChild':
+      return getFirstElementChild$1;
+
+    case 'lastChild':
+      return getLastChild$1;
+
+    case 'lastElementChild':
+      return getLastElementChild$1;
+  }
+} // Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
+
 
-for (const [elementProp, rendererMethod] of childGetters) {
-  queryAndChildGetterDescriptors[elementProp] = {
+for (const childGetter of childGetters) {
+  queryAndChildGetterDescriptors[childGetter] = {
     get() {
       const vm = getAssociatedVM(this);
       const {
-        elm,
-        renderer
+        elm
       } = vm;
 
       if (process.env.NODE_ENV !== 'production') {
-        warnIfInvokedDuringConstruction(vm, elementProp);
+        warnIfInvokedDuringConstruction(vm, childGetter);
       }
 
-      return renderer[rendererMethod](elm);
+      return getChildGetter(childGetter)(elm);
     },
 
     configurable: true,
@@ -3157,22 +3311,38 @@ for (const [elementProp, rendererMethod] of childGetters) {
   };
 }
 
-const queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll']; // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
+const queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll'];
+
+function getQueryMethod(methodName) {
+  switch (methodName) {
+    case 'getElementsByClassName':
+      return getElementsByClassName$1;
+
+    case 'getElementsByTagName':
+      return getElementsByTagName$1;
+
+    case 'querySelector':
+      return querySelector$1;
+
+    case 'querySelectorAll':
+      return querySelectorAll$1;
+  }
+} // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
+
 
 for (const queryMethod of queryMethods) {
   queryAndChildGetterDescriptors[queryMethod] = {
     value(arg) {
       const vm = getAssociatedVM(this);
       const {
-        elm,
-        renderer
+        elm
       } = vm;
 
       if (process.env.NODE_ENV !== 'production') {
         warnIfInvokedDuringConstruction(vm, `${queryMethod}()`);
       }
 
-      return renderer[queryMethod](elm, arg);
+      return getQueryMethod(queryMethod)(elm, arg);
     },
 
     configurable: true,
@@ -4328,10 +4498,6 @@ function createComponentDef(Ctor) {
 
     assert.isTrue(Ctor.constructor, `Missing ${ctorName}.constructor, ${ctorName} should have a "constructor" property.`);
 
-    if (!runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
-      assert.isFalse('shadowSupportMode' in Ctor, `${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 */
@@ -4575,17 +4741,14 @@ function setScopeTokenClassIfNecessary(elm, owner) {
   const 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) {
   const {
     elm,
-    text,
-    owner: {
-      renderer
-    }
+    text
   } = vnode;
 
   if (oldVnode.text !== text) {
@@ -4593,7 +4756,7 @@ function updateNodeHook(oldVnode, vnode) {
       unlockDomMutation();
     }
 
-    renderer.setText(elm, text);
+    setText$1(elm, text);
 
     if (process.env.NODE_ENV !== 'production') {
       lockDomMutation();
@@ -4602,15 +4765,11 @@ function updateNodeHook(oldVnode, vnode) {
 }
 
 function insertNodeHook(vnode, parentNode, referenceNode) {
-  const {
-    renderer
-  } = vnode.owner;
-
   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();
@@ -4618,15 +4777,11 @@ function insertNodeHook(vnode, parentNode, referenceNode) {
 }
 
 function removeNodeHook(vnode, parentNode) {
-  const {
-    renderer
-  } = vnode.owner;
-
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
 
-  renderer.remove(vnode.elm, parentNode);
+  remove$1(vnode.elm, parentNode);
 
   if (process.env.NODE_ENV !== 'production') {
     lockDomMutation();
@@ -4718,13 +4873,15 @@ function updateElmHook(oldVnode, vnode) {
 
 function updateChildrenHook(oldVnode, vnode) {
   const {
-    children,
-    owner
+    elm,
+    children
   } = vnode;
-  const fn = hasDynamicChildren(children) ? updateDynamicChildren : updateStaticChildren;
-  runWithBoundaryProtection(owner, owner.owner, noop, () => {
-    fn(vnode.elm, oldVnode.children, children);
-  }, noop);
+
+  if (hasDynamicChildren(children)) {
+    updateDynamicChildren(elm, oldVnode.children, children);
+  } else {
+    updateStaticChildren(elm, oldVnode.children, children);
+  }
 }
 
 function allocateChildrenHook(vnode, vm) {
@@ -4790,8 +4947,7 @@ function createViewModelHook(elm, vnode) {
   createVM(elm, def, {
     mode,
     owner,
-    tagName: sel,
-    renderer: owner.renderer
+    tagName: sel
   });
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4837,16 +4993,13 @@ function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
   const {
     data: {
       attrs = {}
-    },
-    owner: {
-      renderer
     }
   } = vnode;
   let nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
   // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
 
   for (const [attrName, attrValue] of Object.entries(attrs)) {
-    const elmAttrValue = renderer.getAttribute(elm, attrName);
+    const elmAttrValue = getAttribute$1(elm, attrName);
 
     if (String(attrValue) !== elmAttrValue) {
       logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
@@ -4862,9 +5015,6 @@ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
     data: {
       className,
       classMap
-    },
-    owner: {
-      renderer
     }
   } = vnode;
   let nodesAreCompatible = true;
@@ -4876,7 +5026,7 @@ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
     vnodeClassName = className;
   } else if (!isUndefined$1(classMap)) {
     // classMap is used when class is set to static value.
-    const classList = renderer.getClassList(elm);
+    const classList = getClassList$1(elm);
     let computedClassName = ''; // all classes from the vnode should be in the element.classList
 
     for (const name in classMap) {
@@ -4906,12 +5056,9 @@ function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
     data: {
       style,
       styleDecls
-    },
-    owner: {
-      renderer
     }
   } = vnode;
-  const elmStyle = renderer.getAttribute(elm, 'style') || '';
+  const elmStyle = getAttribute$1(elm, 'style') || '';
   let vnodeStyle;
   let nodesAreCompatible = true;
 
@@ -5048,12 +5195,12 @@ function hasDynamicChildren(children) {
  */
 
 
-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();
-  let CE = renderer.getCustomElement(tagName);
+  let CE = getCustomElement$1(tagName);
 
   if (!isUndefined$1(CE)) {
     return CE;
@@ -5064,7 +5211,7 @@ function getUpgradableConstructor(tagName, renderer) {
    */
 
 
-  CE = class LWCUpgradableElement extends renderer.HTMLElement {
+  CE = class LWCUpgradableElement extends HTMLElementExported$1 {
     constructor(upgradeCallback) {
       super();
 
@@ -5074,7 +5221,7 @@ function getUpgradableConstructor(tagName, renderer) {
     }
 
   };
-  renderer.defineCustomElement(tagName, CE);
+  defineCustomElement$1(tagName, CE);
   return CE;
 }
 /*
@@ -5092,10 +5239,7 @@ const TextHook = {
     const {
       owner
     } = vnode;
-    const {
-      renderer
-    } = owner;
-    const elm = renderer.createText(vnode.text);
+    const elm = createText$1(vnode.text);
     linkNodeToShadow(elm, owner);
     vnode.elm = elm;
   },
@@ -5129,10 +5273,7 @@ const CommentHook = {
       owner,
       text
     } = vnode;
-    const {
-      renderer
-    } = owner;
-    const elm = renderer.createComment(text);
+    const elm = createComment$1(text);
     linkNodeToShadow(elm, owner);
     vnode.elm = elm;
   },
@@ -5174,11 +5315,8 @@ const ElementHook = {
         svg
       }
     } = vnode;
-    const {
-      renderer
-    } = owner;
     const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = renderer.createElement(sel, namespace);
+    const elm = createElement$2(sel, namespace);
     linkNodeToShadow(elm, owner);
     fallbackElmHook(elm, vnode);
     vnode.elm = elm;
@@ -5238,10 +5376,7 @@ const CustomElementHook = {
       sel,
       owner
     } = vnode;
-    const {
-      renderer
-    } = owner;
-    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+    const 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
@@ -5334,8 +5469,7 @@ const CustomElementHook = {
     createVM(elm, def, {
       mode,
       owner,
-      tagName: sel,
-      renderer: owner.renderer
+      tagName: sel
     });
     vnode.elm = elm;
     const vm = getAssociatedVM(elm);
@@ -5364,12 +5498,11 @@ const CustomElementHook = {
 
 function linkNodeToShadow(elm, owner) {
   const {
-    renderer,
     renderMode,
     shadowMode
   } = owner; // TODO [#1164]: this should eventually be done by the polyfill directly
 
-  if (renderer.isSyntheticShadowDefined) {
+  if (isSyntheticShadowDefined$1) {
     if (shadowMode === 1
     /* Synthetic */
     || renderMode === 0
@@ -5901,7 +6034,6 @@ function updateStylesheetToken(vm, template) {
   const {
     elm,
     context,
-    renderer,
     renderMode,
     shadowMode
   } = vm;
@@ -5928,11 +6060,11 @@ function updateStylesheetToken(vm, template) {
   } = context;
 
   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.
 
@@ -5944,12 +6076,12 @@ function updateStylesheetToken(vm, template) {
 
   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.
@@ -5962,6 +6094,7 @@ function updateStylesheetToken(vm, template) {
 
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
   const content = [];
+  let root;
 
   for (let i = 0; i < stylesheets.length; i++) {
     let stylesheet = stylesheets[i];
@@ -5974,23 +6107,46 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
         // the component instance might be attempting to use an old version of
         // the stylesheet, while internally, we have a replacement for it.
         stylesheet = getStyleOrSwappedStyle(stylesheet);
-      } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
-      // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+      }
 
+      const isScopedCss = stylesheet[KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+
+      const scopeToken = isScopedCss || vm.shadowMode === 1
+      /* Synthetic */
+      && vm.renderMode === 1
+      /* Shadow */
+      ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+      // native shadow DOM. Synthetic shadow DOM never uses `:host`.
 
-      const isScopedCss = stylesheet[KEY__SCOPED_CSS];
       const useActualHostSelector = vm.renderMode === 0
       /* Light */
       ? !isScopedCss : vm.shadowMode === 0
       /* Native */
-      ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+      ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+      // we use an attribute selector on the host to simulate :dir().
 
-      const scopeToken = isScopedCss || vm.shadowMode === 1
-      /* Synthetic */
-      && vm.renderMode === 1
+      let useNativeDirPseudoclass;
+
+      if (vm.renderMode === 1
       /* Shadow */
-      ? stylesheetToken : undefined;
-      ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
+      ) {
+        useNativeDirPseudoclass = vm.shadowMode === 0
+        /* Native */
+        ;
+      } else {
+        // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
+        // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+        if (isUndefined$1(root)) {
+          // Only calculate the root once as necessary
+          root = getNearestShadowComponent(vm);
+        }
+
+        useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
+        /* Native */
+        ;
+      }
+
+      ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
     }
   }
 
@@ -6014,14 +6170,12 @@ function getStylesheetsContent(vm, template) {
 // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
 
 
-function getNearestNativeShadowComponent(vm) {
+function getNearestShadowComponent(vm) {
   let owner = vm;
 
   while (!isNull(owner)) {
     if (owner.renderMode === 1
     /* Shadow */
-    && owner.shadowMode === 0
-    /* Native */
     ) {
       return owner;
     }
@@ -6032,9 +6186,22 @@ function getNearestNativeShadowComponent(vm) {
   return owner;
 }
 
+function getNearestNativeShadowComponent(vm) {
+  const owner = getNearestShadowComponent(vm);
+
+  if (!isNull(owner) && owner.shadowMode === 1
+  /* Synthetic */
+  ) {
+    // Synthetic-within-native is impossible. So if the nearest shadow component is
+    // synthetic, we know we won't find a native component if we go any further.
+    return null;
+  }
+
+  return owner;
+}
+
 function createStylesheet(vm, stylesheets) {
   const {
-    renderer,
     renderMode,
     shadowMode
   } = vm;
@@ -6045,9 +6212,9 @@ function createStylesheet(vm, stylesheets) {
   /* Synthetic */
   ) {
     for (let i = 0; i < stylesheets.length; i++) {
-      renderer.insertGlobalStylesheet(stylesheets[i]);
+      insertGlobalStylesheet$1(stylesheets[i]);
     }
-  } 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.
@@ -6061,10 +6228,10 @@ function createStylesheet(vm, stylesheets) {
 
     for (let i = 0; i < stylesheets.length; i++) {
       if (isGlobal) {
-        renderer.insertGlobalStylesheet(stylesheets[i]);
+        insertGlobalStylesheet$1(stylesheets[i]);
       } else {
         // local level
-        renderer.insertStylesheet(stylesheets[i], root.cmpRoot);
+        insertStylesheet$1(stylesheets[i], root.cmpRoot);
       }
     }
   }
@@ -6149,7 +6316,7 @@ function logOperationStart(opId, vm) {
   if (isProfilerEnabled) {
     currentDispatcher(opId, 0
     /* Start */
-    , vm.tagName, vm.idx);
+    , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
   }
 }
 
@@ -6163,7 +6330,7 @@ function logOperationEnd(opId, vm) {
   if (isProfilerEnabled) {
     currentDispatcher(opId, 1
     /* Stop */
-    , vm.tagName, vm.idx);
+    , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
   }
 }
 
@@ -6177,7 +6344,7 @@ function logGlobalOperationStart(opId, vm) {
   if (isProfilerEnabled) {
     currentDispatcher(opId, 0
     /* Start */
-    , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx);
+    , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx, vm === null || vm === void 0 ? void 0 : vm.renderMode, vm === null || vm === void 0 ? void 0 : vm.shadowMode);
   }
 }
 
@@ -6191,7 +6358,7 @@ function logGlobalOperationEnd(opId, vm) {
   if (isProfilerEnabled) {
     currentDispatcher(opId, 1
     /* Stop */
-    , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx);
+    , vm === null || vm === void 0 ? void 0 : vm.tagName, vm === null || vm === void 0 ? void 0 : vm.idx, vm === null || vm === void 0 ? void 0 : vm.renderMode, vm === null || vm === void 0 ? void 0 : vm.shadowMode);
   }
 }
 /*
@@ -6756,7 +6923,6 @@ function createVM(elm, def, options) {
   const {
     mode,
     owner,
-    renderer,
     tagName
   } = options;
   const vm = {
@@ -6771,7 +6937,6 @@ function createVM(elm, def, options) {
     tagName,
     mode,
     owner,
-    renderer,
     children: EmptyArray,
     aChildren: EmptyArray,
     velements: EmptyArray,
@@ -6826,16 +6991,11 @@ function createVM(elm, def, options) {
 
 function computeShadowMode(vm) {
   const {
-    def,
-    renderer
+    def
   } = vm;
-  const {
-    isNativeShadowDefined,
-    isSyntheticShadowDefined
-  } = renderer;
   let shadowMode;
 
-  if (isSyntheticShadowDefined) {
+  if (isSyntheticShadowDefined$1) {
     if (def.renderMode === 0
     /* Light */
     ) {
@@ -6844,7 +7004,7 @@ function computeShadowMode(vm) {
       shadowMode = 0
       /* Native */
       ;
-    } else if (isNativeShadowDefined) {
+    } else if (isNativeShadowDefined$1) {
       if (def.shadowSupportMode === "any"
       /* Any */
       ) {
@@ -6984,13 +7144,12 @@ function patchShadowRoot(vm, newCh) {
 
 function runRenderedCallback(vm) {
   const {
-    renderer,
     def: {
       renderedCallback
     }
   } = vm;
 
-  if (isTrue(renderer.ssr)) {
+  if (isTrue(ssr$1)) {
     return;
   }
 
@@ -7216,8 +7375,7 @@ function recursivelyDisconnectChildren(vnodes) {
 
 function resetComponentRoot(vm) {
   const {
-    children,
-    renderer
+    children
   } = vm;
   const rootNode = getRenderRoot(vm);
 
@@ -7225,7 +7383,7 @@ function resetComponentRoot(vm) {
     const child = children[i];
 
     if (!isNull(child) && !isUndefined$1(child.elm)) {
-      renderer.remove(child.elm, rootNode);
+      remove$1(child.elm, rootNode);
     }
   }
 
@@ -7235,7 +7393,7 @@ function resetComponentRoot(vm) {
 }
 
 function scheduleRehydration(vm) {
-  if (isTrue(vm.renderer.ssr) || isTrue(vm.isScheduled)) {
+  if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
     return;
   }
 
@@ -7480,7 +7638,6 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
 
   const {
     elm,
-    renderer,
     context: {
       wiredConnecting,
       wiredDisconnecting
@@ -7507,7 +7664,7 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
       }
 
     });
-    renderer.dispatchEvent(elm, contextRegistrationEvent);
+    dispatchEvent$1(elm, contextRegistrationEvent);
   });
 }
 
@@ -7772,7 +7929,7 @@ function setHooks(hooks) {
   hooksAreSet = true;
   setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
 }
-/* version: 2.5.10 */
+/* version: 2.6.3 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7801,7 +7958,9 @@ const supportsConstructableStyleSheets = isFunction$1(CSSStyleSheet.prototype.re
 const styleElements = create(null);
 const styleSheets = create(null);
 const nodesToStyleSheets = new WeakMap();
-let getCustomElement, defineCustomElement, HTMLElementConstructor;
+let getCustomElement;
+let defineCustomElement;
+let HTMLElementConstructor;
 
 function isCustomElementRegistryAvailable() {
   if (typeof customElements === 'undefined') {
@@ -7916,188 +8075,231 @@ if (isCustomElementRegistryAvailable()) {
   HTMLElementConstructor.prototype = HTMLElement.prototype;
 }
 
-let isHydrating = false;
+let hydrating = false;
 
-function setIsHydrating(v) {
-  isHydrating = v;
+function setIsHydrating(value) {
+  hydrating = value;
 }
 
-const renderer = {
-  ssr: false,
+const ssr = false;
 
-  isHydrating() {
-    return isHydrating;
-  },
+function isHydrating() {
+  return hydrating;
+}
 
-  isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
-  isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
+const isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
+const isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
 
-  createElement(tagName, namespace) {
-    return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
-  },
+function createElement$1(tagName, namespace) {
+  return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
+}
 
-  createText(content) {
-    return document.createTextNode(content);
-  },
+function createText(content) {
+  return document.createTextNode(content);
+}
 
-  createComment(content) {
-    return document.createComment(content);
-  },
+function createComment(content) {
+  return document.createComment(content);
+}
 
-  insert(node, parent, anchor) {
-    parent.insertBefore(node, anchor);
-  },
+function insert(node, parent, anchor) {
+  parent.insertBefore(node, anchor);
+}
 
-  remove(node, parent) {
-    parent.removeChild(node);
-  },
+function remove(node, parent) {
+  parent.removeChild(node);
+}
 
-  nextSibling(node) {
-    return node.nextSibling;
-  },
+function nextSibling(node) {
+  return node.nextSibling;
+}
 
-  attachShadow(element, options) {
-    if (isHydrating) {
-      return element.shadowRoot;
-    }
+function attachShadow(element, options) {
+  if (hydrating) {
+    return element.shadowRoot;
+  }
 
-    return element.attachShadow(options);
-  },
+  return element.attachShadow(options);
+}
 
-  setText(node, content) {
-    node.nodeValue = content;
-  },
+function setText(node, content) {
+  node.nodeValue = content;
+}
 
-  getProperty(node, key) {
-    return node[key];
-  },
+function getProperty(node, key) {
+  return node[key];
+}
 
-  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 "${key}" of element <${node.tagName}>. This is likely a typo on the corresponding attribute "${htmlPropertyToAttribute(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 "${key}" of element <${node.tagName}>. This is likely a typo on the corresponding attribute "${htmlPropertyToAttribute(key)}".`);
     }
+  }
 
-    node[key] = value;
-  },
+  node[key] = value;
+}
 
-  getAttribute(element, name, namespace) {
-    return isUndefined$1(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
-  },
+function getAttribute(element, name, namespace) {
+  return isUndefined$1(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
+}
 
-  setAttribute(element, name, value, namespace) {
-    return isUndefined$1(namespace) ? element.setAttribute(name, value) : element.setAttributeNS(namespace, name, value);
-  },
+function setAttribute(element, name, value, namespace) {
+  return isUndefined$1(namespace) ? element.setAttribute(name, value) : element.setAttributeNS(namespace, name, value);
+}
 
-  removeAttribute(element, name, namespace) {
-    if (isUndefined$1(namespace)) {
-      element.removeAttribute(name);
-    } else {
-      element.removeAttributeNS(namespace, name);
-    }
-  },
+function removeAttribute(element, name, namespace) {
+  if (isUndefined$1(namespace)) {
+    element.removeAttribute(name);
+  } else {
+    element.removeAttributeNS(namespace, name);
+  }
+}
 
-  addEventListener(target, type, callback, options) {
-    target.addEventListener(type, callback, options);
-  },
+function addEventListener(target, type, callback, options) {
+  target.addEventListener(type, callback, options);
+}
 
-  removeEventListener(target, type, callback, options) {
-    target.removeEventListener(type, callback, options);
-  },
+function removeEventListener(target, type, callback, options) {
+  target.removeEventListener(type, callback, options);
+}
 
-  dispatchEvent(target, event) {
-    return target.dispatchEvent(event);
-  },
+function dispatchEvent(target, event) {
+  return target.dispatchEvent(event);
+}
 
-  getClassList(element) {
-    return element.classList;
-  },
+function getClassList(element) {
+  return element.classList;
+}
 
-  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 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(element) {
-    return element.getBoundingClientRect();
-  },
+function getBoundingClientRect(element) {
+  return element.getBoundingClientRect();
+}
 
-  querySelector(element, selectors) {
-    return element.querySelector(selectors);
-  },
+function querySelector(element, selectors) {
+  return element.querySelector(selectors);
+}
 
-  querySelectorAll(element, selectors) {
-    return element.querySelectorAll(selectors);
-  },
+function querySelectorAll(element, selectors) {
+  return element.querySelectorAll(selectors);
+}
 
-  getElementsByTagName(element, tagNameOrWildCard) {
-    return element.getElementsByTagName(tagNameOrWildCard);
-  },
+function getElementsByTagName(element, tagNameOrWildCard) {
+  return element.getElementsByTagName(tagNameOrWildCard);
+}
 
-  getElementsByClassName(element, names) {
-    return element.getElementsByClassName(names);
-  },
+function getElementsByClassName(element, names) {
+  return element.getElementsByClassName(names);
+}
 
-  getChildren(element) {
-    return element.children;
-  },
+function getChildren(element) {
+  return element.children;
+}
 
-  getChildNodes(element) {
-    return element.childNodes;
-  },
+function getChildNodes(element) {
+  return element.childNodes;
+}
 
-  getFirstChild(element) {
-    return element.firstChild;
-  },
+function getFirstChild(element) {
+  return element.firstChild;
+}
 
-  getFirstElementChild(element) {
-    return element.firstElementChild;
-  },
+function getFirstElementChild(element) {
+  return element.firstElementChild;
+}
 
-  getLastChild(element) {
-    return element.lastChild;
-  },
+function getLastChild(element) {
+  return element.lastChild;
+}
 
-  getLastElementChild(element) {
-    return element.lastElementChild;
-  },
+function getLastElementChild(element) {
+  return element.lastElementChild;
+}
 
-  isConnected(node) {
-    return node.isConnected;
-  },
+function isConnected(node) {
+  return node.isConnected;
+}
 
-  insertGlobalStylesheet(content) {
-    if (!isUndefined$1(globalStylesheets[content])) {
-      return;
-    }
+function insertGlobalStylesheet(content) {
+  if (!isUndefined$1(globalStylesheets[content])) {
+    return;
+  }
 
-    globalStylesheets[content] = true;
-    const elm = document.createElement('style');
-    elm.type = 'text/css';
-    elm.textContent = content;
-    globalStylesheetsParentElement.appendChild(elm);
-  },
+  globalStylesheets[content] = true;
+  const elm = document.createElement('style');
+  elm.type = 'text/css';
+  elm.textContent = content;
+  globalStylesheetsParentElement.appendChild(elm);
+}
 
-  insertStylesheet(content, target) {
-    if (supportsConstructableStyleSheets) {
-      insertConstructableStyleSheet(content, target);
-    } else {
-      // Fall back to <style> element
-      insertStyleElement(content, target);
-    }
-  },
+function insertStylesheet(content, target) {
+  if (supportsConstructableStyleSheets) {
+    insertConstructableStyleSheet(content, target);
+  } else {
+    // Fall back to <style> element
+    insertStyleElement(content, target);
+  }
+}
 
-  assertInstanceOfHTMLElement(elm, msg) {
-    assert.invariant(elm instanceof HTMLElement, msg);
-  },
+function assertInstanceOfHTMLElement(elm, msg) {
+  assert.invariant(elm instanceof HTMLElement, msg);
+}
 
-  defineCustomElement,
-  getCustomElement,
-  HTMLElement: HTMLElementConstructor
-};
+const HTMLElementExported = HTMLElementConstructor;
+/*
+ * Copyright (c) 2020, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElement);
+setAttachShadow(attachShadow);
+setCreateComment(createComment);
+setCreateElement(createElement$1);
+setCreateText(createText);
+setDefineCustomElement(defineCustomElement);
+setDispatchEvent(dispatchEvent);
+setGetAttribute(getAttribute);
+setGetBoundingClientRect(getBoundingClientRect);
+setGetChildNodes(getChildNodes);
+setGetChildren(getChildren);
+setGetClassList(getClassList);
+setGetCustomElement(getCustomElement);
+setGetElementsByClassName(getElementsByClassName);
+setGetElementsByTagName(getElementsByTagName);
+setGetFirstChild(getFirstChild);
+setGetFirstElementChild(getFirstElementChild);
+setGetLastChild(getLastChild);
+setGetLastElementChild(getLastElementChild);
+setGetProperty(getProperty);
+setHTMLElement(HTMLElementExported);
+setInsert(insert);
+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.
@@ -8180,7 +8382,7 @@ function createElement(sel, options) {
     throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
   }
 
-  const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+  const UpgradableConstructor = getUpgradableConstructor(sel);
   let wasComponentUpgraded = false; // the custom element from the registry is expecting an upgrade callback
 
   /**
@@ -8195,8 +8397,7 @@ function createElement(sel, options) {
     createVM(elm, def, {
       tagName: sel,
       mode: options.mode !== 'closed' ? 'open' : 'closed',
-      owner: null,
-      renderer
+      owner: null
     });
     ConnectingSlot.set(elm, connectRootElement);
     DisconnectingSlot.set(elm, disconnectRootElement);
@@ -8219,6 +8420,10 @@ function createElement(sel, options) {
 
 
 function hydrateComponent(element, Ctor, props = {}) {
+  if (!(element instanceof Element)) {
+    throw new TypeError(`"hydrateComponent" expects a valid DOM element as the first parameter but instead received ${element}.`);
+  }
+
   if (!isFunction$1(Ctor)) {
     throw new TypeError(`"hydrateComponent" expects a valid component constructor as the second parameter but instead received ${Ctor}.`);
   }
@@ -8236,7 +8441,6 @@ function hydrateComponent(element, Ctor, props = {}) {
     createVM(element, def, {
       mode: 'open',
       owner: null,
-      renderer,
       tagName: element.tagName.toLowerCase()
     });
 
@@ -8307,8 +8511,7 @@ function buildCustomElementConstructor(Ctor) {
       createVM(this, def, {
         mode: 'open',
         owner: null,
-        tagName: this.tagName,
-        renderer
+        tagName: this.tagName
       });
     }
 
@@ -8375,7 +8578,7 @@ function isNodeFromTemplate(node) {
     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.
@@ -8428,6 +8631,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.5.10 */
+/* version: 2.6.3 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };