lwc 2.5.10 → 2.6.3

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

@@ -302,7 +302,7 @@ var LWC = (function (exports) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.5.10 */
+  /** version: 2.6.3 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -416,8 +416,6 @@ var LWC = (function (exports) {
     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
   };
 
@@ -482,7 +480,7 @@ var LWC = (function (exports) {
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.5.10 */
+  /** version: 2.6.3 */
 
   /* proxy-compat-disable */
 
@@ -556,6 +554,249 @@ var LWC = (function (exports) {
     }
 
     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.
@@ -809,9 +1050,6 @@ var LWC = (function (exports) {
       elm,
       data: {
         on
-      },
-      owner: {
-        renderer
       }
     } = vnode;
 
@@ -824,7 +1062,7 @@ var LWC = (function (exports) {
     let name;
 
     for (name in on) {
-      renderer.addEventListener(elm, name, listener);
+      addEventListener$1(elm, name, listener);
     }
   }
 
@@ -966,9 +1204,6 @@ var LWC = (function (exports) {
     const {
       data: {
         attrs
-      },
-      owner: {
-        renderer
       }
     } = vnode;
 
@@ -991,10 +1226,6 @@ var LWC = (function (exports) {
     }
 
     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
@@ -1009,14 +1240,14 @@ var LWC = (function (exports) {
 
         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();
@@ -1064,17 +1295,14 @@ var LWC = (function (exports) {
     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);
       }
     }
   }
@@ -1143,9 +1371,6 @@ var LWC = (function (exports) {
       elm,
       data: {
         className: newClass
-      },
-      owner: {
-        renderer
       }
     } = vnode;
     const {
@@ -1158,7 +1383,7 @@ var LWC = (function (exports) {
       return;
     }
 
-    const classList = renderer.getClassList(elm);
+    const classList = getClassList$1(elm);
     const newClassMap = getMapFromClassName(newClass);
     const oldClassMap = getMapFromClassName(oldClass);
     let name;
@@ -1196,24 +1421,17 @@ var LWC = (function (exports) {
       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);
     }
   }
 
@@ -1238,9 +1456,6 @@ var LWC = (function (exports) {
       elm,
       data: {
         classMap
-      },
-      owner: {
-        renderer
       }
     } = vnode;
 
@@ -1248,7 +1463,7 @@ var LWC = (function (exports) {
       return;
     }
 
-    const classList = renderer.getClassList(elm);
+    const classList = getClassList$1(elm);
 
     for (const name in classMap) {
       classList.add(name);
@@ -1272,9 +1487,6 @@ var LWC = (function (exports) {
       elm,
       data: {
         styleDecls
-      },
-      owner: {
-        renderer
       }
     } = vnode;
 
@@ -1284,7 +1496,7 @@ var LWC = (function (exports) {
 
     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);
     }
   }
 
@@ -1298,15 +1510,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;
   }
@@ -1394,7 +1597,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)) {
@@ -1876,7 +2079,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
@@ -1929,6 +2132,7 @@ var LWC = (function (exports) {
     isArray
   } = Array;
   const {
+    prototype: ObjectDotPrototype,
     getPrototypeOf,
     create: ObjectCreate,
     defineProperty: ObjectDefineProperty,
@@ -2578,8 +2782,6 @@ var LWC = (function (exports) {
     init();
   }
 
-  const ObjectDotPrototype = Object.prototype;
-
   function defaultValueIsObservable(value) {
     // intentionally checking for null
     if (value === null) {
@@ -2607,99 +2809,85 @@ var LWC = (function (exports) {
     /* 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.
@@ -2710,15 +2898,9 @@ var LWC = (function (exports) {
 
 
   const lockerLivePropertyKey = Symbol.for('@@lockerLiveValue');
-
-  function valueDistortion(value) {
-    return value;
-  }
-
-  const reactiveMembrane = new ReactiveMembrane({
+  const reactiveMembrane = new ObservableMembrane({
     valueObserved,
     valueMutated,
-    valueDistortion,
     tagPropertyKey: lockerLivePropertyKey
   });
   /**
@@ -2727,16 +2909,9 @@ var LWC = (function (exports) {
    * 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.
@@ -2824,9 +2999,7 @@ var LWC = (function (exports) {
 
 
   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');
     }
@@ -2834,15 +3007,14 @@ var LWC = (function (exports) {
     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;
@@ -2872,7 +3044,7 @@ var LWC = (function (exports) {
     if (vm.renderMode === 1
     /* Shadow */
     ) {
-      attachShadow(vm);
+      doAttachShadow(vm);
     } // Adding extra guard rails in DEV mode.
 
 
@@ -2884,17 +3056,16 @@ var LWC = (function (exports) {
     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 */
       ,
@@ -2921,21 +3092,15 @@ var LWC = (function (exports) {
 
     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') {
@@ -2946,92 +3111,68 @@ var LWC = (function (exports) {
       }
 
       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') {
@@ -3039,17 +3180,14 @@ var LWC = (function (exports) {
       }
 
       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') {
@@ -3057,43 +3195,34 @@ var LWC = (function (exports) {
       }
 
       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') {
@@ -3102,7 +3231,7 @@ var LWC = (function (exports) {
         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() {
@@ -3136,23 +3265,48 @@ var LWC = (function (exports) {
     }
 
   };
-  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,
@@ -3160,22 +3314,38 @@ var LWC = (function (exports) {
     };
   }
 
-  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,
@@ -4331,10 +4501,6 @@ var LWC = (function (exports) {
 
       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 */
@@ -4578,17 +4744,14 @@ var LWC = (function (exports) {
     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) {
@@ -4596,7 +4759,7 @@ var LWC = (function (exports) {
         unlockDomMutation();
       }
 
-      renderer.setText(elm, text);
+      setText$1(elm, text);
 
       if (process.env.NODE_ENV !== 'production') {
         lockDomMutation();
@@ -4605,15 +4768,11 @@ var LWC = (function (exports) {
   }
 
   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();
@@ -4621,15 +4780,11 @@ var LWC = (function (exports) {
   }
 
   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();
@@ -4721,13 +4876,15 @@ var LWC = (function (exports) {
 
   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) {
@@ -4793,8 +4950,7 @@ var LWC = (function (exports) {
     createVM(elm, def, {
       mode,
       owner,
-      tagName: sel,
-      renderer: owner.renderer
+      tagName: sel
     });
 
     if (process.env.NODE_ENV !== 'production') {
@@ -4840,16 +4996,13 @@ var LWC = (function (exports) {
     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);
@@ -4865,9 +5018,6 @@ var LWC = (function (exports) {
       data: {
         className,
         classMap
-      },
-      owner: {
-        renderer
       }
     } = vnode;
     let nodesAreCompatible = true;
@@ -4879,7 +5029,7 @@ var LWC = (function (exports) {
       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) {
@@ -4909,12 +5059,9 @@ var LWC = (function (exports) {
       data: {
         style,
         styleDecls
-      },
-      owner: {
-        renderer
       }
     } = vnode;
-    const elmStyle = renderer.getAttribute(elm, 'style') || '';
+    const elmStyle = getAttribute$1(elm, 'style') || '';
     let vnodeStyle;
     let nodesAreCompatible = true;
 
@@ -5051,12 +5198,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();
-    let CE = renderer.getCustomElement(tagName);
+    let CE = getCustomElement$1(tagName);
 
     if (!isUndefined$1(CE)) {
       return CE;
@@ -5067,7 +5214,7 @@ var LWC = (function (exports) {
      */
 
 
-    CE = class LWCUpgradableElement extends renderer.HTMLElement {
+    CE = class LWCUpgradableElement extends HTMLElementExported$1 {
       constructor(upgradeCallback) {
         super();
 
@@ -5077,7 +5224,7 @@ var LWC = (function (exports) {
       }
 
     };
-    renderer.defineCustomElement(tagName, CE);
+    defineCustomElement$1(tagName, CE);
     return CE;
   }
   /*
@@ -5095,10 +5242,7 @@ var LWC = (function (exports) {
       const {
         owner
       } = vnode;
-      const {
-        renderer
-      } = owner;
-      const elm = renderer.createText(vnode.text);
+      const elm = createText$1(vnode.text);
       linkNodeToShadow(elm, owner);
       vnode.elm = elm;
     },
@@ -5132,10 +5276,7 @@ var LWC = (function (exports) {
         owner,
         text
       } = vnode;
-      const {
-        renderer
-      } = owner;
-      const elm = renderer.createComment(text);
+      const elm = createComment$1(text);
       linkNodeToShadow(elm, owner);
       vnode.elm = elm;
     },
@@ -5177,11 +5318,8 @@ var LWC = (function (exports) {
           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;
@@ -5241,10 +5379,7 @@ var LWC = (function (exports) {
         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
@@ -5337,8 +5472,7 @@ var LWC = (function (exports) {
       createVM(elm, def, {
         mode,
         owner,
-        tagName: sel,
-        renderer: owner.renderer
+        tagName: sel
       });
       vnode.elm = elm;
       const vm = getAssociatedVM(elm);
@@ -5367,12 +5501,11 @@ var LWC = (function (exports) {
 
   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
@@ -5904,7 +6037,6 @@ var LWC = (function (exports) {
     const {
       elm,
       context,
-      renderer,
       renderMode,
       shadowMode
     } = vm;
@@ -5931,11 +6063,11 @@ var LWC = (function (exports) {
     } = 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.
 
@@ -5947,12 +6079,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.
@@ -5965,6 +6097,7 @@ var LWC = (function (exports) {
 
   function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     const content = [];
+    let root;
 
     for (let i = 0; i < stylesheets.length; i++) {
       let stylesheet = stylesheets[i];
@@ -5977,23 +6110,46 @@ var LWC = (function (exports) {
           // 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));
       }
     }
 
@@ -6017,14 +6173,12 @@ var LWC = (function (exports) {
   // 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;
       }
@@ -6035,9 +6189,22 @@ var LWC = (function (exports) {
     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;
@@ -6048,9 +6215,9 @@ var LWC = (function (exports) {
     /* 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.
@@ -6064,10 +6231,10 @@ var LWC = (function (exports) {
 
       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);
         }
       }
     }
@@ -6152,7 +6319,7 @@ var LWC = (function (exports) {
     if (isProfilerEnabled) {
       currentDispatcher(opId, 0
       /* Start */
-      , vm.tagName, vm.idx);
+      , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
   }
 
@@ -6166,7 +6333,7 @@ var LWC = (function (exports) {
     if (isProfilerEnabled) {
       currentDispatcher(opId, 1
       /* Stop */
-      , vm.tagName, vm.idx);
+      , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
   }
 
@@ -6180,7 +6347,7 @@ var LWC = (function (exports) {
     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);
     }
   }
 
@@ -6194,7 +6361,7 @@ var LWC = (function (exports) {
     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);
     }
   }
   /*
@@ -6759,7 +6926,6 @@ var LWC = (function (exports) {
     const {
       mode,
       owner,
-      renderer,
       tagName
     } = options;
     const vm = {
@@ -6774,7 +6940,6 @@ var LWC = (function (exports) {
       tagName,
       mode,
       owner,
-      renderer,
       children: EmptyArray,
       aChildren: EmptyArray,
       velements: EmptyArray,
@@ -6829,16 +6994,11 @@ var LWC = (function (exports) {
 
   function computeShadowMode(vm) {
     const {
-      def,
-      renderer
+      def
     } = vm;
-    const {
-      isNativeShadowDefined,
-      isSyntheticShadowDefined
-    } = renderer;
     let shadowMode;
 
-    if (isSyntheticShadowDefined) {
+    if (isSyntheticShadowDefined$1) {
       if (def.renderMode === 0
       /* Light */
       ) {
@@ -6847,7 +7007,7 @@ var LWC = (function (exports) {
         shadowMode = 0
         /* Native */
         ;
-      } else if (isNativeShadowDefined) {
+      } else if (isNativeShadowDefined$1) {
         if (def.shadowSupportMode === "any"
         /* Any */
         ) {
@@ -6987,13 +7147,12 @@ var LWC = (function (exports) {
 
   function runRenderedCallback(vm) {
     const {
-      renderer,
       def: {
         renderedCallback
       }
     } = vm;
 
-    if (isTrue(renderer.ssr)) {
+    if (isTrue(ssr$1)) {
       return;
     }
 
@@ -7219,8 +7378,7 @@ var LWC = (function (exports) {
 
   function resetComponentRoot(vm) {
     const {
-      children,
-      renderer
+      children
     } = vm;
     const rootNode = getRenderRoot(vm);
 
@@ -7228,7 +7386,7 @@ var LWC = (function (exports) {
       const child = children[i];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
-        renderer.remove(child.elm, rootNode);
+        remove$1(child.elm, rootNode);
       }
     }
 
@@ -7238,7 +7396,7 @@ var LWC = (function (exports) {
   }
 
   function scheduleRehydration(vm) {
-    if (isTrue(vm.renderer.ssr) || isTrue(vm.isScheduled)) {
+    if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -7483,7 +7641,6 @@ var LWC = (function (exports) {
 
     const {
       elm,
-      renderer,
       context: {
         wiredConnecting,
         wiredDisconnecting
@@ -7510,7 +7667,7 @@ var LWC = (function (exports) {
         }
 
       });
-      renderer.dispatchEvent(elm, contextRegistrationEvent);
+      dispatchEvent$1(elm, contextRegistrationEvent);
     });
   }
 
@@ -7775,7 +7932,7 @@ var LWC = (function (exports) {
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.5.10 */
+  /* version: 2.6.3 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7804,7 +7961,9 @@ var LWC = (function (exports) {
   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') {
@@ -7919,188 +8078,231 @@ var LWC = (function (exports) {
     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.
@@ -8183,7 +8385,7 @@ var LWC = (function (exports) {
       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
 
     /**
@@ -8198,8 +8400,7 @@ var LWC = (function (exports) {
       createVM(elm, def, {
         tagName: sel,
         mode: options.mode !== 'closed' ? 'open' : 'closed',
-        owner: null,
-        renderer
+        owner: null
       });
       ConnectingSlot.set(elm, connectRootElement);
       DisconnectingSlot.set(elm, disconnectRootElement);
@@ -8222,6 +8423,10 @@ var LWC = (function (exports) {
 
 
   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}.`);
     }
@@ -8239,7 +8444,6 @@ var LWC = (function (exports) {
       createVM(element, def, {
         mode: 'open',
         owner: null,
-        renderer,
         tagName: element.tagName.toLowerCase()
       });
 
@@ -8310,8 +8514,7 @@ var LWC = (function (exports) {
         createVM(this, def, {
           mode: 'open',
           owner: null,
-          tagName: this.tagName,
-          renderer
+          tagName: this.tagName
         });
       }
 
@@ -8378,7 +8581,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.
@@ -8431,7 +8634,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.5.10 */
+  /* version: 2.6.3 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;