@lwc/engine-core 2.6.1 → 2.7.2

package/dist/engine-core.js

@@ -1,5 +1,5 @@
 /* proxy-compat-disable */
-import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, assign, assert, keys, StringCharCodeAt, isString, StringSlice, freeze, defineProperties, forEach, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, getPropertyDescriptor, isObject, AriaPropNameToAttrNameMap, defineProperty, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, htmlPropertyToAttribute, ArraySlice, hasOwnProperty as hasOwnProperty$1, ArrayFilter, noop, isArray as isArray$1, isNumber, StringReplace, KEY__SHADOW_RESOLVER, KEY__SCOPED_CSS, ArrayUnshift, isFrozen } from '@lwc/shared';
+import { seal, create, isFunction as isFunction$1, ArrayPush as ArrayPush$1, isUndefined as isUndefined$1, ArrayIndexOf, ArraySplice, StringToLowerCase, ArrayJoin, isNull, assign, assert, keys, StringCharCodeAt, isString, StringSlice, freeze, defineProperties, forEach, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, getPropertyDescriptor, isObject, AriaPropNameToAttrNameMap, defineProperty, KEY__SYNTHETIC_MODE, toString as toString$1, isFalse, isTrue, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, htmlPropertyToAttribute, ArraySlice, hasOwnProperty as hasOwnProperty$1, ArrayFilter, isArray as isArray$1, isNumber, StringReplace, KEY__SHADOW_RESOLVER, KEY__SCOPED_CSS, noop, ArrayUnshift, isFrozen } from '@lwc/shared';
 import { runtimeFlags } from '@lwc/features';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -70,6 +70,170 @@ function parseStyleText(cssText) {
   return styleMap;
 }
 
+//
+// Primitives
+//
+let ssr;
+function setSsr(ssrImpl) {
+  ssr = ssrImpl;
+}
+let isNativeShadowDefined;
+function setIsNativeShadowDefined(isNativeShadowDefinedImpl) {
+  isNativeShadowDefined = isNativeShadowDefinedImpl;
+}
+let isSyntheticShadowDefined;
+function setIsSyntheticShadowDefined(isSyntheticShadowDefinedImpl) {
+  isSyntheticShadowDefined = isSyntheticShadowDefinedImpl;
+}
+let HTMLElementExported;
+function setHTMLElement(HTMLElementImpl) {
+  HTMLElementExported = HTMLElementImpl;
+}
+let isHydrating;
+function setIsHydrating(isHydratingImpl) {
+  isHydrating = isHydratingImpl;
+}
+let insert;
+function setInsert(insertImpl) {
+  insert = insertImpl;
+}
+let remove;
+function setRemove(removeImpl) {
+  remove = removeImpl;
+}
+let createElement;
+function setCreateElement(createElementImpl) {
+  createElement = createElementImpl;
+}
+let createText;
+function setCreateText(createTextImpl) {
+  createText = createTextImpl;
+}
+let createComment;
+function setCreateComment(createCommentImpl) {
+  createComment = createCommentImpl;
+}
+let nextSibling;
+function setNextSibling(nextSiblingImpl) {
+  nextSibling = nextSiblingImpl;
+}
+let attachShadow;
+function setAttachShadow(attachShadowImpl) {
+  attachShadow = attachShadowImpl;
+}
+let getProperty;
+function setGetProperty(getPropertyImpl) {
+  getProperty = getPropertyImpl;
+}
+let setProperty;
+function setSetProperty(setPropertyImpl) {
+  setProperty = setPropertyImpl;
+}
+let setText;
+function setSetText(setTextImpl) {
+  setText = setTextImpl;
+}
+let getAttribute;
+function setGetAttribute(getAttributeImpl) {
+  getAttribute = getAttributeImpl;
+}
+let setAttribute;
+function setSetAttribute(setAttributeImpl) {
+  setAttribute = setAttributeImpl;
+}
+let removeAttribute;
+function setRemoveAttribute(removeAttributeImpl) {
+  removeAttribute = removeAttributeImpl;
+}
+let addEventListener;
+function setAddEventListener(addEventListenerImpl) {
+  addEventListener = addEventListenerImpl;
+}
+let removeEventListener;
+function setRemoveEventListener(removeEventListenerImpl) {
+  removeEventListener = removeEventListenerImpl;
+}
+let dispatchEvent;
+function setDispatchEvent(dispatchEventImpl) {
+  dispatchEvent = dispatchEventImpl;
+}
+let getClassList;
+function setGetClassList(getClassListImpl) {
+  getClassList = getClassListImpl;
+}
+let setCSSStyleProperty;
+function setSetCSSStyleProperty(setCSSStylePropertyImpl) {
+  setCSSStyleProperty = setCSSStylePropertyImpl;
+}
+let getBoundingClientRect;
+function setGetBoundingClientRect(getBoundingClientRectImpl) {
+  getBoundingClientRect = getBoundingClientRectImpl;
+}
+let querySelector;
+function setQuerySelector(querySelectorImpl) {
+  querySelector = querySelectorImpl;
+}
+let querySelectorAll;
+function setQuerySelectorAll(querySelectorAllImpl) {
+  querySelectorAll = querySelectorAllImpl;
+}
+let getElementsByTagName;
+function setGetElementsByTagName(getElementsByTagNameImpl) {
+  getElementsByTagName = getElementsByTagNameImpl;
+}
+let getElementsByClassName;
+function setGetElementsByClassName(getElementsByClassNameImpl) {
+  getElementsByClassName = getElementsByClassNameImpl;
+}
+let getChildren;
+function setGetChildren(getChildrenImpl) {
+  getChildren = getChildrenImpl;
+}
+let getChildNodes;
+function setGetChildNodes(getChildNodesImpl) {
+  getChildNodes = getChildNodesImpl;
+}
+let getFirstChild;
+function setGetFirstChild(getFirstChildImpl) {
+  getFirstChild = getFirstChildImpl;
+}
+let getFirstElementChild;
+function setGetFirstElementChild(getFirstElementChildImpl) {
+  getFirstElementChild = getFirstElementChildImpl;
+}
+let getLastChild;
+function setGetLastChild(getLastChildImpl) {
+  getLastChild = getLastChildImpl;
+}
+let getLastElementChild;
+function setGetLastElementChild(getLastElementChildImpl) {
+  getLastElementChild = getLastElementChildImpl;
+}
+let isConnected;
+function setIsConnected(isConnectedImpl) {
+  isConnected = isConnectedImpl;
+}
+let insertGlobalStylesheet;
+function setInsertGlobalStylesheet(insertGlobalStylesheetImpl) {
+  insertGlobalStylesheet = insertGlobalStylesheetImpl;
+}
+let insertStylesheet;
+function setInsertStylesheet(insertStylesheetImpl) {
+  insertStylesheet = insertStylesheetImpl;
+}
+let assertInstanceOfHTMLElement;
+function setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElementImpl) {
+  assertInstanceOfHTMLElement = assertInstanceOfHTMLElementImpl;
+}
+let defineCustomElement;
+function setDefineCustomElement(defineCustomElementImpl) {
+  defineCustomElement = defineCustomElementImpl;
+}
+let getCustomElement;
+function setGetCustomElement(getCustomElementImpl) {
+  getCustomElement = getCustomElementImpl;
+}
+
 /*
  * Copyright (c) 2019, salesforce.com, inc.
  * All rights reserved.
@@ -311,9 +475,6 @@ function createAllEventListeners(vnode) {
     elm,
     data: {
       on
-    },
-    owner: {
-      renderer
     }
   } = vnode;
 
@@ -326,7 +487,7 @@ function createAllEventListeners(vnode) {
   let name;
 
   for (name in on) {
-    renderer.addEventListener(elm, name, listener);
+    addEventListener(elm, name, listener);
   }
 }
 
@@ -465,9 +626,6 @@ function updateAttrs(oldVnode, vnode) {
   const {
     data: {
       attrs
-    },
-    owner: {
-      renderer
     }
   } = vnode;
 
@@ -490,10 +648,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
@@ -512,7 +666,7 @@ function updateAttrs(oldVnode, vnode) {
       } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
         // Assume xlink namespace
         setAttribute(elm, key, cur, xlinkNS);
-      } else if (isNull(cur)) {
+      } else if (isNull(cur) || isUndefined$1(cur)) {
         removeAttribute(elm, key);
       } else {
         setAttribute(elm, key, cur);
@@ -564,17 +718,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(elm, key) : oldProps[key])) {
+      setProperty(elm, key, cur);
     }
   }
 }
@@ -643,9 +794,6 @@ function updateClassAttribute(oldVnode, vnode) {
     elm,
     data: {
       className: newClass
-    },
-    owner: {
-      renderer
     }
   } = vnode;
   const {
@@ -658,7 +806,7 @@ function updateClassAttribute(oldVnode, vnode) {
     return;
   }
 
-  const classList = renderer.getClassList(elm);
+  const classList = getClassList(elm);
   const newClassMap = getMapFromClassName(newClass);
   const oldClassMap = getMapFromClassName(oldClass);
   let name;
@@ -697,15 +845,8 @@ function updateStyleAttribute(oldVnode, vnode) {
     elm,
     data: {
       style: newStyle
-    },
-    owner: {
-      renderer
     }
   } = vnode;
-  const {
-    setAttribute,
-    removeAttribute
-  } = renderer;
 
   if (oldVnode.data.style === newStyle) {
     return;
@@ -740,9 +881,6 @@ function createClassAttribute(vnode) {
     elm,
     data: {
       classMap
-    },
-    owner: {
-      renderer
     }
   } = vnode;
 
@@ -750,7 +888,7 @@ function createClassAttribute(vnode) {
     return;
   }
 
-  const classList = renderer.getClassList(elm);
+  const classList = getClassList(elm);
 
   for (const name in classMap) {
     classList.add(name);
@@ -775,9 +913,6 @@ function createStyleAttribute(vnode) {
     elm,
     data: {
       styleDecls
-    },
-    owner: {
-      renderer
     }
   } = vnode;
 
@@ -787,7 +922,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(elm, prop, value, important);
   }
 }
 
@@ -802,14 +937,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;
 }
@@ -897,7 +1024,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(oldEndVnode.elm));
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (sameVnode(oldEndVnode, newStartVnode)) {
@@ -1374,7 +1501,7 @@ function patchLightningElementPrototypeWithRestrictions(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
@@ -2289,9 +2416,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');
   }
@@ -2299,15 +2424,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(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
   }
 
   const component = this;
@@ -2337,7 +2461,7 @@ const LightningElement = function () {
   if (vm.renderMode === 1
   /* Shadow */
   ) {
-    attachShadow(vm);
+    doAttachShadow(vm);
   } // Adding extra guard rails in DEV mode.
 
 
@@ -2349,17 +2473,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(elm, {
     [KEY__SYNTHETIC_MODE]: shadowMode === 1
     /* Synthetic */
     ,
@@ -2386,10 +2509,7 @@ LightningElement.prototype = {
 
   dispatchEvent(event) {
     const {
-      elm,
-      renderer: {
-        dispatchEvent
-      }
+      elm
     } = getAssociatedVM(this);
     return dispatchEvent(elm, event);
   },
@@ -2397,10 +2517,7 @@ LightningElement.prototype = {
   addEventListener(type, listener, options) {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        addEventListener
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -2417,10 +2534,7 @@ LightningElement.prototype = {
   removeEventListener(type, listener, options) {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        removeEventListener
-      }
+      elm
     } = vm;
     const wrappedListener = getWrappedComponentsListener(vm, listener);
     removeEventListener(elm, type, wrappedListener, options);
@@ -2428,30 +2542,21 @@ LightningElement.prototype = {
 
   hasAttribute(name) {
     const {
-      elm,
-      renderer: {
-        getAttribute
-      }
+      elm
     } = getAssociatedVM(this);
     return !isNull(getAttribute(elm, name));
   },
 
   hasAttributeNS(namespace, name) {
     const {
-      elm,
-      renderer: {
-        getAttribute
-      }
+      elm
     } = getAssociatedVM(this);
     return !isNull(getAttribute(elm, name, namespace));
   },
 
   removeAttribute(name) {
     const {
-      elm,
-      renderer: {
-        removeAttribute
-      }
+      elm
     } = getAssociatedVM(this);
     unlockAttribute(elm, name);
     removeAttribute(elm, name);
@@ -2460,10 +2565,7 @@ LightningElement.prototype = {
 
   removeAttributeNS(namespace, name) {
     const {
-      elm,
-      renderer: {
-        removeAttribute
-      }
+      elm
     } = getAssociatedVM(this);
     unlockAttribute(elm, name);
     removeAttribute(elm, name, namespace);
@@ -2472,20 +2574,14 @@ LightningElement.prototype = {
 
   getAttribute(name) {
     const {
-      elm,
-      renderer: {
-        getAttribute
-      }
+      elm
     } = getAssociatedVM(this);
     return getAttribute(elm, name);
   },
 
   getAttributeNS(namespace, name) {
     const {
-      elm,
-      renderer: {
-        getAttribute
-      }
+      elm
     } = getAssociatedVM(this);
     return getAttribute(elm, name, namespace);
   },
@@ -2493,10 +2589,7 @@ LightningElement.prototype = {
   setAttribute(name, value) {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        setAttribute
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -2511,10 +2604,7 @@ LightningElement.prototype = {
   setAttributeNS(namespace, name, value) {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        setAttribute
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -2529,10 +2619,7 @@ LightningElement.prototype = {
   getBoundingClientRect() {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        getBoundingClientRect
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -2544,10 +2631,7 @@ LightningElement.prototype = {
 
   get isConnected() {
     const {
-      elm,
-      renderer: {
-        isConnected
-      }
+      elm
     } = getAssociatedVM(this);
     return isConnected(elm);
   },
@@ -2555,10 +2639,7 @@ LightningElement.prototype = {
   get classList() {
     const vm = getAssociatedVM(this);
     const {
-      elm,
-      renderer: {
-        getClassList
-      }
+      elm
     } = vm;
 
     if (process.env.NODE_ENV !== 'production') {
@@ -2601,23 +2682,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;
+
+    case 'childNodes':
+      return getChildNodes;
+
+    case 'firstChild':
+      return getFirstChild;
 
-for (const [elementProp, rendererMethod] of childGetters) {
-  queryAndChildGetterDescriptors[elementProp] = {
+    case 'firstElementChild':
+      return getFirstElementChild;
+
+    case 'lastChild':
+      return getLastChild;
+
+    case 'lastElementChild':
+      return getLastElementChild;
+  }
+} // Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
+
+
+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,
@@ -2625,22 +2731,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;
+
+    case 'getElementsByTagName':
+      return getElementsByTagName;
+
+    case 'querySelector':
+      return querySelector;
+
+    case 'querySelectorAll':
+      return querySelectorAll;
+  }
+} // 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,
@@ -3770,10 +3892,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 */
@@ -4015,17 +4133,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(elm).add(token);
   }
 }
 
 function updateNodeHook(oldVnode, vnode) {
   const {
     elm,
-    text,
-    owner: {
-      renderer
-    }
+    text
   } = vnode;
 
   if (oldVnode.text !== text) {
@@ -4033,7 +4148,7 @@ function updateNodeHook(oldVnode, vnode) {
       unlockDomMutation();
     }
 
-    renderer.setText(elm, text);
+    setText(elm, text);
 
     if (process.env.NODE_ENV !== 'production') {
       lockDomMutation();
@@ -4041,30 +4156,22 @@ 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(vnode.elm, parentNode, referenceNode);
 
   if (process.env.NODE_ENV !== 'production') {
     lockDomMutation();
   }
 }
 function removeNodeHook(vnode, parentNode) {
-  const {
-    renderer
-  } = vnode.owner;
-
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
 
-  renderer.remove(vnode.elm, parentNode);
+  remove(vnode.elm, parentNode);
 
   if (process.env.NODE_ENV !== 'production') {
     lockDomMutation();
@@ -4151,13 +4258,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) {
   // A component with slots will re-render because:
@@ -4221,8 +4330,7 @@ function createViewModelHook(elm, vnode) {
   createVM(elm, def, {
     mode,
     owner,
-    tagName: sel,
-    renderer: owner.renderer
+    tagName: sel
   });
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4266,16 +4374,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(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);
@@ -4291,9 +4396,6 @@ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
     data: {
       className,
       classMap
-    },
-    owner: {
-      renderer
     }
   } = vnode;
   let nodesAreCompatible = true;
@@ -4305,7 +4407,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(elm);
     let computedClassName = ''; // all classes from the vnode should be in the element.classList
 
     for (const name in classMap) {
@@ -4335,12 +4437,9 @@ function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
     data: {
       style,
       styleDecls
-    },
-    owner: {
-      renderer
     }
   } = vnode;
-  const elmStyle = renderer.getAttribute(elm, 'style') || '';
+  const elmStyle = getAttribute(elm, 'style') || '';
   let vnodeStyle;
   let nodesAreCompatible = true;
 
@@ -4472,12 +4571,12 @@ function hasDynamicChildren(children) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-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(tagName);
 
   if (!isUndefined$1(CE)) {
     return CE;
@@ -4488,7 +4587,7 @@ function getUpgradableConstructor(tagName, renderer) {
    */
 
 
-  CE = class LWCUpgradableElement extends renderer.HTMLElement {
+  CE = class LWCUpgradableElement extends HTMLElementExported {
     constructor(upgradeCallback) {
       super();
 
@@ -4498,7 +4597,7 @@ function getUpgradableConstructor(tagName, renderer) {
     }
 
   };
-  renderer.defineCustomElement(tagName, CE);
+  defineCustomElement(tagName, CE);
   return CE;
 }
 
@@ -4515,10 +4614,7 @@ const TextHook = {
     const {
       owner
     } = vnode;
-    const {
-      renderer
-    } = owner;
-    const elm = renderer.createText(vnode.text);
+    const elm = createText(vnode.text);
     linkNodeToShadow(elm, owner);
     vnode.elm = elm;
   },
@@ -4552,10 +4648,7 @@ const CommentHook = {
       owner,
       text
     } = vnode;
-    const {
-      renderer
-    } = owner;
-    const elm = renderer.createComment(text);
+    const elm = createComment(text);
     linkNodeToShadow(elm, owner);
     vnode.elm = elm;
   },
@@ -4597,11 +4690,8 @@ const ElementHook = {
         svg
       }
     } = vnode;
-    const {
-      renderer
-    } = owner;
     const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = renderer.createElement(sel, namespace);
+    const elm = createElement(sel, namespace);
     linkNodeToShadow(elm, owner);
     fallbackElmHook(elm, vnode);
     vnode.elm = elm;
@@ -4661,10 +4751,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
@@ -4757,8 +4844,7 @@ const CustomElementHook = {
     createVM(elm, def, {
       mode,
       owner,
-      tagName: sel,
-      renderer: owner.renderer
+      tagName: sel
     });
     vnode.elm = elm;
     const vm = getAssociatedVM(elm);
@@ -4787,12 +4873,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) {
     if (shadowMode === 1
     /* Synthetic */
     || renderMode === 0
@@ -5324,7 +5409,6 @@ function updateStylesheetToken(vm, template) {
   const {
     elm,
     context,
-    renderer,
     renderMode,
     shadowMode
   } = vm;
@@ -5351,11 +5435,11 @@ function updateStylesheetToken(vm, template) {
   } = context;
 
   if (oldHasTokenInClass) {
-    renderer.getClassList(elm).remove(makeHostToken(oldToken));
+    getClassList(elm).remove(makeHostToken(oldToken));
   }
 
   if (oldHasTokenInAttribute) {
-    renderer.removeAttribute(elm, makeHostToken(oldToken));
+    removeAttribute(elm, makeHostToken(oldToken));
   } // Apply the new template styling token to the host element, if the new template has any
   // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
@@ -5367,12 +5451,12 @@ function updateStylesheetToken(vm, template) {
 
   if (!isUndefined$1(newToken)) {
     if (hasScopedStyles) {
-      renderer.getClassList(elm).add(makeHostToken(newToken));
+      getClassList(elm).add(makeHostToken(newToken));
       newHasTokenInClass = true;
     }
 
     if (isSyntheticShadow) {
-      renderer.setAttribute(elm, makeHostToken(newToken), '');
+      setAttribute(elm, makeHostToken(newToken), '');
       newHasTokenInAttribute = true;
     }
   } // Update the styling tokens present on the context object.
@@ -5492,7 +5576,6 @@ function getNearestNativeShadowComponent(vm) {
 
 function createStylesheet(vm, stylesheets) {
   const {
-    renderer,
     renderMode,
     shadowMode
   } = vm;
@@ -5503,9 +5586,9 @@ function createStylesheet(vm, stylesheets) {
   /* Synthetic */
   ) {
     for (let i = 0; i < stylesheets.length; i++) {
-      renderer.insertGlobalStylesheet(stylesheets[i]);
+      insertGlobalStylesheet(stylesheets[i]);
     }
-  } else if (renderer.ssr || renderer.isHydrating()) {
+  } else if (ssr || isHydrating()) {
     // 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.
@@ -5519,10 +5602,10 @@ function createStylesheet(vm, stylesheets) {
 
     for (let i = 0; i < stylesheets.length; i++) {
       if (isGlobal) {
-        renderer.insertGlobalStylesheet(stylesheets[i]);
+        insertGlobalStylesheet(stylesheets[i]);
       } else {
         // local level
-        renderer.insertStylesheet(stylesheets[i], root.cmpRoot);
+        insertStylesheet(stylesheets[i], root.cmpRoot);
       }
     }
   }
@@ -5605,7 +5688,7 @@ function logOperationStart(opId, vm) {
   if (isProfilerEnabled) {
     currentDispatcher(opId, 0
     /* Start */
-    , vm.tagName, vm.idx);
+    , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
   }
 }
 function logOperationEnd(opId, vm) {
@@ -5618,7 +5701,7 @@ function logOperationEnd(opId, vm) {
   if (isProfilerEnabled) {
     currentDispatcher(opId, 1
     /* Stop */
-    , vm.tagName, vm.idx);
+    , vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
   }
 }
 function logGlobalOperationStart(opId, vm) {
@@ -5631,7 +5714,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);
   }
 }
 function logGlobalOperationEnd(opId, vm) {
@@ -5644,7 +5727,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);
   }
 }
 
@@ -5797,6 +5880,7 @@ function evaluateTemplate(vm, html) {
 
   return vnodes;
 }
+
 function computeHasScopedStyles(template) {
   const {
     stylesheets
@@ -6182,7 +6266,6 @@ function createVM(elm, def, options) {
   const {
     mode,
     owner,
-    renderer,
     tagName
   } = options;
   const vm = {
@@ -6197,7 +6280,6 @@ function createVM(elm, def, options) {
     tagName,
     mode,
     owner,
-    renderer,
     children: EmptyArray,
     aChildren: EmptyArray,
     velements: EmptyArray,
@@ -6252,13 +6334,8 @@ function createVM(elm, def, options) {
 
 function computeShadowMode(vm) {
   const {
-    def,
-    renderer
+    def
   } = vm;
-  const {
-    isNativeShadowDefined,
-    isSyntheticShadowDefined
-  } = renderer;
   let shadowMode;
 
   if (isSyntheticShadowDefined) {
@@ -6408,13 +6485,12 @@ function patchShadowRoot(vm, newCh) {
 
 function runRenderedCallback(vm) {
   const {
-    renderer,
     def: {
       renderedCallback
     }
   } = vm;
 
-  if (isTrue(renderer.ssr)) {
+  if (isTrue(ssr)) {
     return;
   }
 
@@ -6640,8 +6716,7 @@ function recursivelyDisconnectChildren(vnodes) {
 
 function resetComponentRoot(vm) {
   const {
-    children,
-    renderer
+    children
   } = vm;
   const rootNode = getRenderRoot(vm);
 
@@ -6649,7 +6724,7 @@ function resetComponentRoot(vm) {
     const child = children[i];
 
     if (!isNull(child) && !isUndefined$1(child.elm)) {
-      renderer.remove(child.elm, rootNode);
+      remove(child.elm, rootNode);
     }
   }
 
@@ -6658,7 +6733,7 @@ function resetComponentRoot(vm) {
   vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
-  if (isTrue(vm.renderer.ssr) || isTrue(vm.isScheduled)) {
+  if (isTrue(ssr) || isTrue(vm.isScheduled)) {
     return;
   }
 
@@ -6898,7 +6973,6 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
 
   const {
     elm,
-    renderer,
     context: {
       wiredConnecting,
       wiredDisconnecting
@@ -6925,7 +6999,7 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
       }
 
     });
-    renderer.dispatchEvent(elm, contextRegistrationEvent);
+    dispatchEvent(elm, contextRegistrationEvent);
   });
 }
 
@@ -7181,5 +7255,5 @@ function setHooks(hooks) {
   setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
 }
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentInternalDef, getUpgradableConstructor, hydrateRootElement, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.6.1 */
+export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, getAssociatedVMIfPresent, getComponentDef, getComponentInternalDef, getUpgradableConstructor, hydrateRootElement, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setAddEventListener, setAssertInstanceOfHTMLElement, setAttachShadow, setCreateComment, setCreateElement, setCreateText, setDefineCustomElement, setDispatchEvent, setGetAttribute, setGetBoundingClientRect, setGetChildNodes, setGetChildren, setGetClassList, setGetCustomElement, setGetElementsByClassName, setGetElementsByTagName, setGetFirstChild, setGetFirstElementChild, setGetLastChild, setGetLastElementChild, setGetProperty, setHTMLElement, setHooks, setInsert, setInsertGlobalStylesheet, setInsertStylesheet, setIsConnected, setIsHydrating, setIsNativeShadowDefined, setIsSyntheticShadowDefined, setNextSibling, setQuerySelector, setQuerySelectorAll, setRemove, setRemoveAttribute, setRemoveEventListener, setSetAttribute, setSetCSSStyleProperty, setSetProperty, setSetText, setSsr, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+/* version: 2.7.2 */