lwc 2.23.0 → 2.23.3

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

@@ -299,9 +299,13 @@ function htmlPropertyToAttribute(propName) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.23.0";
+const LWC_VERSION = "2.23.3";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.23.0 */
+/** version: 2.23.3 */
+
+/**
+ * Copyright (C) 2018 salesforce.com, inc.
+ */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -310,7 +314,7 @@ const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function detect(propName) {
-    return Object.getOwnPropertyDescriptor(Element.prototype, propName) === undefined;
+    return getOwnPropertyDescriptor$1(Element.prototype, propName) === undefined;
 }
 
 /*
@@ -379,6 +383,7 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
         patch$1(propName);
     }
 }
+/** version: 2.23.3 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -398,6 +403,7 @@ const features = {
     ENABLE_HTML_COLLECTIONS_PATCH: null,
     ENABLE_INNER_OUTER_TEXT_PATCH: null,
     ENABLE_MIXED_SHADOW_MODE: null,
+    ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: null,
     ENABLE_NODE_LIST_PATCH: null,
     ENABLE_NODE_PATCH: null,
     ENABLE_REACTIVE_SETTER: null,
@@ -406,7 +412,7 @@ const features = {
 if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
 }
-const runtimeFlags = _globalThis.lwcRuntimeFlags;
+const lwcRuntimeFlags = _globalThis.lwcRuntimeFlags;
 /**
  * Set the value at runtime of a given feature flag. This method only be invoked once per feature
  * flag. It is meant to be used during the app initialization.
@@ -433,17 +439,17 @@ function setFeatureFlag(name, value) {
     }
     if (process.env.NODE_ENV !== 'production') {
         // Allow the same flag to be set more than once outside of production to enable testing
-        runtimeFlags[name] = value;
+        lwcRuntimeFlags[name] = value;
     }
     else {
         // Disallow the same flag to be set more than once in production
-        const runtimeValue = runtimeFlags[name];
+        const runtimeValue = lwcRuntimeFlags[name];
         if (!isUndefined$1(runtimeValue)) {
             // eslint-disable-next-line no-console
             console.error(`Failed to set the value "${value}" for the runtime feature flag "${name}". "${name}" has already been set with the value "${runtimeValue}".`);
             return;
         }
-        defineProperty(runtimeFlags, name, { value });
+        defineProperty(lwcRuntimeFlags, name, { value });
     }
 }
 /**
@@ -455,7 +461,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.23.0 */
+/** version: 2.23.3 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -469,7 +475,7 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
   window.addEventListener('test-dummy-flag', () => {
     let hasFlag = false;
 
-    if (runtimeFlags.DUMMY_TEST_FLAG) {
+    if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
       hasFlag = true;
     }
 
@@ -496,7 +502,7 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
   window.addEventListener('test-dummy-flag', () => {
     let hasFlag = false;
 
-    if (runtimeFlags.DUMMY_TEST_FLAG) {
+    if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
       hasFlag = true;
     }
 
@@ -804,8 +810,8 @@ function isCircularModuleDependency(obj) {
  */
 // This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
 // to inject at runtime.
-const HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () { };
-const HTMLElementPrototype = HTMLElementConstructor$1.prototype;
+const HTMLElementConstructor = typeof HTMLElement !== 'undefined' ? HTMLElement : function () { };
+const HTMLElementPrototype = HTMLElementConstructor.prototype;
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2324,7 +2330,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
       }
 
       if (set) {
-        if (runtimeFlags.ENABLE_REACTIVE_SETTER) {
+        if (lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
           let ro = vm.oar[key];
 
           if (isUndefined$1(ro)) {
@@ -2882,7 +2888,7 @@ function HTMLBridgeElementFactory(SuperClass, props, methods) {
     defineProperties(HTMLBridgeElement.prototype, descriptors);
     return HTMLBridgeElement;
 }
-const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor$1, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
 freeze(BaseBridgeElement);
 seal(BaseBridgeElement.prototype);
 
@@ -2976,7 +2982,7 @@ function getTemplateOrSwappedTemplate(tpl) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
@@ -2993,7 +2999,7 @@ function getComponentOrSwappedComponent(Ctor) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
@@ -3010,7 +3016,7 @@ function getStyleOrSwappedStyle(style) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     const visited = new Set();
 
     while (swappedStyleMap.has(style) && !visited.has(style)) {
@@ -3027,7 +3033,7 @@ function setActiveVM(vm) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     // tracking active component
     const Ctor = vm.def.ctor;
     let componentVMs = activeComponents.get(Ctor);
@@ -3084,7 +3090,7 @@ function removeActiveVM(vm) {
     throw new ReferenceError();
   }
 
-  if (runtimeFlags.ENABLE_HMR) {
+  if (lwcRuntimeFlags.ENABLE_HMR) {
     // tracking inactive component
     const Ctor = vm.def.ctor;
     let list = activeComponents.get(Ctor);
@@ -3131,7 +3137,7 @@ function swapTemplate(oldTpl, newTpl) {
     }
   }
 
-  if (!runtimeFlags.ENABLE_HMR) {
+  if (!lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -3147,7 +3153,7 @@ function swapComponent(oldComponent, newComponent) {
     }
   }
 
-  if (!runtimeFlags.ENABLE_HMR) {
+  if (!lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -3161,7 +3167,7 @@ function swapStyle(oldStyle, newStyle) {
     return rehydrateHotStyle(oldStyle);
   }
 
-  if (!runtimeFlags.ENABLE_HMR) {
+  if (!lwcRuntimeFlags.ENABLE_HMR) {
     throw new Error('HMR is not enabled');
   }
 
@@ -3541,30 +3547,67 @@ function createStylesheet(vm, stylesheets) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+
+function checkHasVM(elm) {
+  const hasVM = !isUndefined$1(getAssociatedVMIfPresent(elm));
+
+  if (process.env.NODE_ENV !== 'production' && !hasVM) {
+    // Occurs when an element is manually created with the same tag name as an existing LWC component. In that case,
+    // we skip calling the LWC connectedCallback/disconnectedCallback logic and log an error.
+    logError(`VM for tag name "${elm.tagName.toLowerCase()}" is undefined. ` + `This indicates that an element was created with this tag name, ` + `which is already reserved by an LWC component. Use lwc.createElement ` + `instead to create elements.`);
+  }
+
+  return hasVM;
+}
+
 function getUpgradableConstructor(tagName, renderer) {
-    const { getCustomElement, HTMLElementExported: RendererHTMLElement, defineCustomElement, } = renderer;
-    // 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 = getCustomElement(tagName);
-    if (!isUndefined$1(CE)) {
-        return CE;
+  const {
+    getCustomElement,
+    HTMLElementExported: RendererHTMLElement,
+    defineCustomElement
+  } = renderer; // 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 = getCustomElement(tagName);
+
+  if (!isUndefined$1(CE)) {
+    return CE;
+  }
+  /**
+   * LWC Upgradable Element reference to an element that was created
+   * via the scoped registry mechanism, and that is ready to be upgraded.
+   */
+
+
+  CE = class LWCUpgradableElement extends RendererHTMLElement {
+    constructor(upgradeCallback) {
+      super();
+
+      if (isFunction$1(upgradeCallback)) {
+        upgradeCallback(this); // nothing to do with the result for now
+      }
     }
-    /**
-     * LWC Upgradable Element reference to an element that was created
-     * via the scoped registry mechanism, and that is ready to be upgraded.
-     */
-    CE = class LWCUpgradableElement extends RendererHTMLElement {
-        constructor(upgradeCallback) {
-            super();
-            if (isFunction$1(upgradeCallback)) {
-                upgradeCallback(this); // nothing to do with the result for now
-            }
-        }
+
+  };
+
+  if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+    CE.prototype.connectedCallback = function () {
+      if (checkHasVM(this)) {
+        connectRootElement(this);
+      }
     };
-    defineCustomElement(tagName, CE);
-    return CE;
+
+    CE.prototype.disconnectedCallback = function () {
+      if (checkHasVM(this)) {
+        disconnectRootElement(this);
+      }
+    };
+  }
+
+  defineCustomElement(tagName, CE);
+  return CE;
 }
 
 /*
@@ -3652,6 +3695,14 @@ function patchProps(oldVnode, vnode, renderer) {
         // different than the one previously set.
         if (isFirstPatch ||
             cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
+            // Additional verification if properties are supported by the element
+            // Validation relies on html properties and public properties being defined on the element,
+            // SSR has its own custom validation.
+            if (process.env.NODE_ENV !== 'production') {
+                if (!(key in elm)) {
+                    logWarn(`Unknown public property "${key}" of element <${elm.tagName.toLowerCase()}>. This is either a typo on the corresponding attribute "${htmlPropertyToAttribute(key)}", or the attribute does not exist in this browser or DOM implementation.`);
+                }
+            }
             setProperty(elm, key, cur);
         }
     }
@@ -3810,579 +3861,798 @@ function applyStaticStyleAttribute(vnode, renderer) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 function patchChildren(c1, c2, parent, renderer) {
-    if (hasDynamicChildren(c2)) {
-        updateDynamicChildren(c1, c2, parent, renderer);
-    }
-    else {
-        updateStaticChildren(c1, c2, parent, renderer);
-    }
+  if (hasDynamicChildren(c2)) {
+    updateDynamicChildren(c1, c2, parent, renderer);
+  } else {
+    updateStaticChildren(c1, c2, parent, renderer);
+  }
 }
+
 function patch(n1, n2, parent, renderer) {
-    var _a, _b;
-    if (n1 === n2) {
-        return;
-    }
-    if (process.env.NODE_ENV !== 'production') {
-        if (!isSameVnode(n1, n2)) {
-            throw new Error('Expected these VNodes to be the same: ' +
-                JSON.stringify({ sel: n1.sel, key: n1.key }) +
-                ', ' +
-                JSON.stringify({ sel: n2.sel, key: n2.key }));
-        }
-    }
-    switch (n2.type) {
-        case 0 /* VNodeType.Text */:
-            // VText has no special capability, fallback to the owner's renderer
-            patchText(n1, n2, renderer);
-            break;
-        case 1 /* VNodeType.Comment */:
-            // VComment has no special capability, fallback to the owner's renderer
-            patchComment(n1, n2, renderer);
-            break;
-        case 4 /* VNodeType.Static */:
-            n2.elm = n1.elm;
-            break;
-        case 2 /* VNodeType.Element */:
-            patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
-            break;
-        case 3 /* VNodeType.CustomElement */:
-            patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
-            break;
+  var _a, _b;
+
+  if (n1 === n2) {
+    return;
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!isSameVnode(n1, n2)) {
+      throw new Error('Expected these VNodes to be the same: ' + JSON.stringify({
+        sel: n1.sel,
+        key: n1.key
+      }) + ', ' + JSON.stringify({
+        sel: n2.sel,
+        key: n2.key
+      }));
     }
+  }
+
+  switch (n2.type) {
+    case 0
+    /* VNodeType.Text */
+    :
+      // VText has no special capability, fallback to the owner's renderer
+      patchText(n1, n2, renderer);
+      break;
+
+    case 1
+    /* VNodeType.Comment */
+    :
+      // VComment has no special capability, fallback to the owner's renderer
+      patchComment(n1, n2, renderer);
+      break;
+
+    case 4
+    /* VNodeType.Static */
+    :
+      n2.elm = n1.elm;
+      break;
+
+    case 2
+    /* VNodeType.Element */
+    :
+      patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
+      break;
+
+    case 3
+    /* VNodeType.CustomElement */
+    :
+      patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+      break;
+  }
 }
+
 function mount(node, parent, renderer, anchor) {
-    var _a, _b;
-    switch (node.type) {
-        case 0 /* VNodeType.Text */:
-            // VText has no special capability, fallback to the owner's renderer
-            mountText(node, parent, anchor, renderer);
-            break;
-        case 1 /* VNodeType.Comment */:
-            // VComment has no special capability, fallback to the owner's renderer
-            mountComment(node, parent, anchor, renderer);
-            break;
-        case 4 /* VNodeType.Static */:
-            // VStatic cannot have a custom renderer associated to them, using owner's renderer
-            mountStatic(node, parent, anchor, renderer);
-            break;
-        case 2 /* VNodeType.Element */:
-            // If the vnode data has a renderer override use it, else fallback to owner's renderer
-            mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
-            break;
-        case 3 /* VNodeType.CustomElement */:
-            // If the vnode data has a renderer override use it, else fallback to owner's renderer
-            mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
-            break;
-    }
+  var _a, _b;
+
+  switch (node.type) {
+    case 0
+    /* VNodeType.Text */
+    :
+      // VText has no special capability, fallback to the owner's renderer
+      mountText(node, parent, anchor, renderer);
+      break;
+
+    case 1
+    /* VNodeType.Comment */
+    :
+      // VComment has no special capability, fallback to the owner's renderer
+      mountComment(node, parent, anchor, renderer);
+      break;
+
+    case 4
+    /* VNodeType.Static */
+    :
+      // VStatic cannot have a custom renderer associated to them, using owner's renderer
+      mountStatic(node, parent, anchor, renderer);
+      break;
+
+    case 2
+    /* VNodeType.Element */
+    :
+      // If the vnode data has a renderer override use it, else fallback to owner's renderer
+      mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
+      break;
+
+    case 3
+    /* VNodeType.CustomElement */
+    :
+      // If the vnode data has a renderer override use it, else fallback to owner's renderer
+      mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+      break;
+  }
 }
+
 function patchText(n1, n2, renderer) {
-    n2.elm = n1.elm;
-    if (n2.text !== n1.text) {
-        updateTextContent(n2, renderer);
-    }
+  n2.elm = n1.elm;
+
+  if (n2.text !== n1.text) {
+    updateTextContent(n2, renderer);
+  }
 }
+
 function mountText(vnode, parent, anchor, renderer) {
-    const { owner } = vnode;
-    const { createText } = renderer;
-    const textNode = (vnode.elm = createText(vnode.text));
-    linkNodeToShadow(textNode, owner, renderer);
-    insertNode(textNode, parent, anchor, renderer);
+  const {
+    owner
+  } = vnode;
+  const {
+    createText
+  } = renderer;
+  const textNode = vnode.elm = createText(vnode.text);
+  linkNodeToShadow(textNode, owner, renderer);
+  insertNode(textNode, parent, anchor, renderer);
 }
+
 function patchComment(n1, n2, renderer) {
-    n2.elm = n1.elm;
-    // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
-    // it is the case today.
-    if (n2.text !== n1.text) {
-        updateTextContent(n2, renderer);
-    }
+  n2.elm = n1.elm; // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
+  // it is the case today.
+
+  if (n2.text !== n1.text) {
+    updateTextContent(n2, renderer);
+  }
 }
+
 function mountComment(vnode, parent, anchor, renderer) {
-    const { owner } = vnode;
-    const { createComment } = renderer;
-    const commentNode = (vnode.elm = createComment(vnode.text));
-    linkNodeToShadow(commentNode, owner, renderer);
-    insertNode(commentNode, parent, anchor, renderer);
+  const {
+    owner
+  } = vnode;
+  const {
+    createComment
+  } = renderer;
+  const commentNode = vnode.elm = createComment(vnode.text);
+  linkNodeToShadow(commentNode, owner, renderer);
+  insertNode(commentNode, parent, anchor, renderer);
 }
+
 function mountElement(vnode, parent, anchor, renderer) {
-    const { sel, owner, data: { svg }, } = vnode;
-    const { createElement } = renderer;
-    const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = (vnode.elm = createElement(sel, namespace));
-    linkNodeToShadow(elm, owner, renderer);
-    applyStyleScoping(elm, owner, renderer);
-    applyDomManual(elm, vnode);
-    applyElementRestrictions(elm, vnode);
-    patchElementPropsAndAttrs$1(null, vnode, renderer);
-    insertNode(elm, parent, anchor, renderer);
-    mountVNodes(vnode.children, elm, renderer, null);
+  const {
+    sel,
+    owner,
+    data: {
+      svg
+    }
+  } = vnode;
+  const {
+    createElement
+  } = renderer;
+  const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
+  const elm = vnode.elm = createElement(sel, namespace);
+  linkNodeToShadow(elm, owner, renderer);
+  applyStyleScoping(elm, owner, renderer);
+  applyDomManual(elm, vnode);
+  applyElementRestrictions(elm, vnode);
+  patchElementPropsAndAttrs$1(null, vnode, renderer);
+  insertNode(elm, parent, anchor, renderer);
+  mountVNodes(vnode.children, elm, renderer, null);
 }
+
 function patchElement(n1, n2, renderer) {
-    const elm = (n2.elm = n1.elm);
-    patchElementPropsAndAttrs$1(n1, n2, renderer);
-    patchChildren(n1.children, n2.children, elm, renderer);
+  const elm = n2.elm = n1.elm;
+  patchElementPropsAndAttrs$1(n1, n2, renderer);
+  patchChildren(n1.children, n2.children, elm, renderer);
 }
+
 function mountStatic(vnode, parent, anchor, renderer) {
-    const { owner } = vnode;
-    const { cloneNode, isSyntheticShadowDefined } = renderer;
-    const elm = (vnode.elm = cloneNode(vnode.fragment, true));
-    linkNodeToShadow(elm, owner, renderer);
-    applyElementRestrictions(elm, vnode);
-    // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
-    const { renderMode, shadowMode } = owner;
-    if (isSyntheticShadowDefined) {
-        if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-            elm[KEY__SHADOW_STATIC] = true;
-        }
+  const {
+    owner
+  } = vnode;
+  const {
+    cloneNode,
+    isSyntheticShadowDefined
+  } = renderer;
+  const elm = vnode.elm = cloneNode(vnode.fragment, true);
+  linkNodeToShadow(elm, owner, renderer);
+  applyElementRestrictions(elm, vnode); // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+
+  const {
+    renderMode,
+    shadowMode
+  } = owner;
+
+  if (isSyntheticShadowDefined) {
+    if (shadowMode === 1
+    /* ShadowMode.Synthetic */
+    || renderMode === 0
+    /* RenderMode.Light */
+    ) {
+      elm[KEY__SHADOW_STATIC] = true;
     }
-    insertNode(elm, parent, anchor, renderer);
+  }
+
+  insertNode(elm, parent, anchor, renderer);
 }
+
 function mountCustomElement(vnode, parent, anchor, renderer) {
-    const { sel, owner } = vnode;
-    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
-    /**
-     * Note: if the upgradable constructor does not expect, or throw when we new it
-     * with a callback as the first argument, we could implement a more advanced
-     * mechanism that only passes that argument if the constructor is known to be
-     * an upgradable custom element.
-     */
-    let vm;
-    const elm = new UpgradableConstructor((elm) => {
-        // the custom element from the registry is expecting an upgrade callback
-        vm = createViewModelHook(elm, vnode, renderer);
-    });
-    vnode.elm = elm;
-    vnode.vm = vm;
-    linkNodeToShadow(elm, owner, renderer);
-    applyStyleScoping(elm, owner, renderer);
-    if (vm) {
-        allocateChildren(vnode, vm);
-    }
-    else if (vnode.ctor !== UpgradableConstructor) {
-        throw new TypeError(`Incorrect Component Constructor`);
-    }
-    patchElementPropsAndAttrs$1(null, vnode, renderer);
-    insertNode(elm, parent, anchor, renderer);
-    if (vm) {
+  const {
+    sel,
+    owner
+  } = vnode;
+  const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+  /**
+   * Note: if the upgradable constructor does not expect, or throw when we new it
+   * with a callback as the first argument, we could implement a more advanced
+   * mechanism that only passes that argument if the constructor is known to be
+   * an upgradable custom element.
+   */
+
+  let vm;
+  const elm = new UpgradableConstructor(elm => {
+    // the custom element from the registry is expecting an upgrade callback
+    vm = createViewModelHook(elm, vnode, renderer);
+  });
+  vnode.elm = elm;
+  vnode.vm = vm;
+  linkNodeToShadow(elm, owner, renderer);
+  applyStyleScoping(elm, owner, renderer);
+
+  if (vm) {
+    allocateChildren(vnode, vm);
+  } else if (vnode.ctor !== UpgradableConstructor) {
+    throw new TypeError(`Incorrect Component Constructor`);
+  }
+
+  patchElementPropsAndAttrs$1(null, vnode, renderer);
+  insertNode(elm, parent, anchor, renderer);
+
+  if (vm) {
+    {
+      if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
         if (process.env.NODE_ENV !== 'production') {
-            assert.isTrue(vm.state === 0 /* VMState.created */, `${vm} cannot be recycled.`);
+          // With synthetic lifecycle callbacks, it's possible for elements to be removed without the engine
+          // noticing it (e.g. `appendChild` the same host element twice). This test ensures we don't regress.
+          assert.isTrue(vm.state === 0
+          /* VMState.created */
+          , `${vm} cannot be recycled.`);
         }
+
         runConnectedCallback(vm);
+      }
     }
-    mountVNodes(vnode.children, elm, renderer, null);
-    if (vm) {
-        appendVM(vm);
-    }
+  }
+
+  mountVNodes(vnode.children, elm, renderer, null);
+
+  if (vm) {
+    appendVM(vm);
+  }
 }
+
 function patchCustomElement(n1, n2, parent, renderer) {
-    if (n1.ctor !== n2.ctor) {
-        // If the constructor, unmount the current component and mount a new one using the new
-        // constructor.
-        const anchor = renderer.nextSibling(n1.elm);
-        unmount(n1, parent, renderer, true);
-        mountCustomElement(n2, parent, anchor, renderer);
-    }
-    else {
-        // Otherwise patch the existing component with new props/attrs/etc.
-        const elm = (n2.elm = n1.elm);
-        const vm = (n2.vm = n1.vm);
-        patchElementPropsAndAttrs$1(n1, n2, renderer);
-        if (!isUndefined$1(vm)) {
-            // in fallback mode, the allocation will always set children to
-            // empty and delegate the real allocation to the slot elements
-            allocateChildren(n2, vm);
-        }
-        // in fallback mode, the children will be always empty, so, nothing
-        // will happen, but in native, it does allocate the light dom
-        patchChildren(n1.children, n2.children, elm, renderer);
-        if (!isUndefined$1(vm)) {
-            // this will probably update the shadowRoot, but only if the vm is in a dirty state
-            // this is important to preserve the top to bottom synchronous rendering phase.
-            rerenderVM(vm);
-        }
+  if (n1.ctor !== n2.ctor) {
+    // If the constructor, unmount the current component and mount a new one using the new
+    // constructor.
+    const anchor = renderer.nextSibling(n1.elm);
+    unmount(n1, parent, renderer, true);
+    mountCustomElement(n2, parent, anchor, renderer);
+  } else {
+    // Otherwise patch the existing component with new props/attrs/etc.
+    const elm = n2.elm = n1.elm;
+    const vm = n2.vm = n1.vm;
+    patchElementPropsAndAttrs$1(n1, n2, renderer);
+
+    if (!isUndefined$1(vm)) {
+      // in fallback mode, the allocation will always set children to
+      // empty and delegate the real allocation to the slot elements
+      allocateChildren(n2, vm);
+    } // in fallback mode, the children will be always empty, so, nothing
+    // will happen, but in native, it does allocate the light dom
+
+
+    patchChildren(n1.children, n2.children, elm, renderer);
+
+    if (!isUndefined$1(vm)) {
+      // this will probably update the shadowRoot, but only if the vm is in a dirty state
+      // this is important to preserve the top to bottom synchronous rendering phase.
+      rerenderVM(vm);
     }
+  }
 }
+
 function mountVNodes(vnodes, parent, renderer, anchor, start = 0, end = vnodes.length) {
-    for (; start < end; ++start) {
-        const vnode = vnodes[start];
-        if (isVNode(vnode)) {
-            mount(vnode, parent, renderer, anchor);
-        }
+  for (; start < end; ++start) {
+    const vnode = vnodes[start];
+
+    if (isVNode(vnode)) {
+      mount(vnode, parent, renderer, anchor);
     }
+  }
 }
+
 function unmount(vnode, parent, renderer, doRemove = false) {
-    const { type, elm, sel } = vnode;
-    // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
-    // subtree root, is the only element worth unmounting from the subtree.
-    if (doRemove) {
-        // The vnode might or might not have a data.renderer associated to it
-        // but the removal used here is from the owner instead.
-        removeNode(elm, parent, renderer);
-    }
-    switch (type) {
-        case 2 /* VNodeType.Element */: {
-            // Slot content is removed to trigger slotchange event when removing slot.
-            // Only required for synthetic shadow.
-            const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
-            unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
-            break;
-        }
-        case 3 /* VNodeType.CustomElement */: {
-            const { vm } = vnode;
-            // No need to unmount the children here, `removeVM` will take care of removing the
-            // children.
-            if (!isUndefined$1(vm)) {
-                removeVM(vm);
-            }
+  const {
+    type,
+    elm,
+    sel
+  } = vnode; // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
+  // subtree root, is the only element worth unmounting from the subtree.
+
+  if (doRemove) {
+    // The vnode might or might not have a data.renderer associated to it
+    // but the removal used here is from the owner instead.
+    removeNode(elm, parent, renderer);
+  }
+
+  switch (type) {
+    case 2
+    /* VNodeType.Element */
+    :
+      {
+        // Slot content is removed to trigger slotchange event when removing slot.
+        // Only required for synthetic shadow.
+        const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1
+        /* ShadowMode.Synthetic */
+        ;
+        unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
+        break;
+      }
+
+    case 3
+    /* VNodeType.CustomElement */
+    :
+      {
+        const {
+          vm
+        } = vnode; // No need to unmount the children here, `removeVM` will take care of removing the
+        // children.
+
+        if (!isUndefined$1(vm)) {
+          removeVM(vm);
         }
-    }
+      }
+  }
 }
+
 function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, end = vnodes.length) {
-    for (; start < end; ++start) {
-        const ch = vnodes[start];
-        if (isVNode(ch)) {
-            unmount(ch, parent, renderer, doRemove);
-        }
+  for (; start < end; ++start) {
+    const ch = vnodes[start];
+
+    if (isVNode(ch)) {
+      unmount(ch, parent, renderer, doRemove);
     }
+  }
 }
+
 function isVNode(vnode) {
-    return vnode != null;
+  return vnode != null;
 }
+
 function linkNodeToShadow(elm, owner, renderer) {
-    const { renderRoot, renderMode, shadowMode } = owner;
-    const { isSyntheticShadowDefined } = renderer;
-    // TODO [#1164]: this should eventually be done by the polyfill directly
-    if (isSyntheticShadowDefined) {
-        if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-            elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
-        }
+  const {
+    renderRoot,
+    renderMode,
+    shadowMode
+  } = owner;
+  const {
+    isSyntheticShadowDefined
+  } = renderer; // TODO [#1164]: this should eventually be done by the polyfill directly
+
+  if (isSyntheticShadowDefined) {
+    if (shadowMode === 1
+    /* ShadowMode.Synthetic */
+    || renderMode === 0
+    /* RenderMode.Light */
+    ) {
+      elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
     }
+  }
 }
+
 function updateTextContent(vnode, renderer) {
-    const { elm, text } = vnode;
-    const { setText } = renderer;
-    if (process.env.NODE_ENV !== 'production') {
-        unlockDomMutation();
-    }
-    setText(elm, text);
-    if (process.env.NODE_ENV !== 'production') {
-        lockDomMutation();
-    }
+  const {
+    elm,
+    text
+  } = vnode;
+  const {
+    setText
+  } = renderer;
+
+  if (process.env.NODE_ENV !== 'production') {
+    unlockDomMutation();
+  }
+
+  setText(elm, text);
+
+  if (process.env.NODE_ENV !== 'production') {
+    lockDomMutation();
+  }
 }
+
 function insertNode(node, parent, anchor, renderer) {
-    if (process.env.NODE_ENV !== 'production') {
-        unlockDomMutation();
-    }
-    renderer.insert(node, parent, anchor);
-    if (process.env.NODE_ENV !== 'production') {
-        lockDomMutation();
-    }
+  if (process.env.NODE_ENV !== 'production') {
+    unlockDomMutation();
+  }
+
+  renderer.insert(node, parent, anchor);
+
+  if (process.env.NODE_ENV !== 'production') {
+    lockDomMutation();
+  }
 }
+
 function removeNode(node, parent, renderer) {
-    if (process.env.NODE_ENV !== 'production') {
-        unlockDomMutation();
-    }
-    renderer.remove(node, parent);
-    if (process.env.NODE_ENV !== 'production') {
-        lockDomMutation();
-    }
+  if (process.env.NODE_ENV !== 'production') {
+    unlockDomMutation();
+  }
+
+  renderer.remove(node, parent);
+
+  if (process.env.NODE_ENV !== 'production') {
+    lockDomMutation();
+  }
 }
+
 function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
-    if (isNull(oldVnode)) {
-        applyEventListeners(vnode, renderer);
-        applyStaticClassAttribute(vnode, renderer);
-        applyStaticStyleAttribute(vnode, renderer);
-    }
-    // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
-    // value is set before type=radio.
-    patchClassAttribute(oldVnode, vnode, renderer);
-    patchStyleAttribute(oldVnode, vnode, renderer);
-    patchAttributes(oldVnode, vnode, renderer);
-    patchProps(oldVnode, vnode, renderer);
+  if (isNull(oldVnode)) {
+    applyEventListeners(vnode, renderer);
+    applyStaticClassAttribute(vnode, renderer);
+    applyStaticStyleAttribute(vnode, renderer);
+  } // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
+  // value is set before type=radio.
+
+
+  patchClassAttribute(oldVnode, vnode, renderer);
+  patchStyleAttribute(oldVnode, vnode, renderer);
+  patchAttributes(oldVnode, vnode, renderer);
+  patchProps(oldVnode, vnode, renderer);
 }
+
 function applyStyleScoping(elm, owner, renderer) {
-    // Set the class name for `*.scoped.css` style scoping.
-    const scopeToken = getScopeTokenClass(owner);
-    if (!isNull(scopeToken)) {
-        const { getClassList } = renderer;
-        // TODO [#2762]: this dot notation with add is probably problematic
-        // probably we should have a renderer api for just the add operation
-        getClassList(elm).add(scopeToken);
-    }
-    // Set property element for synthetic shadow DOM style scoping.
-    const { stylesheetToken: syntheticToken } = owner.context;
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
-        elm.$shadowToken$ = syntheticToken;
-    }
-}
-function applyDomManual(elm, vnode) {
-    var _a;
-    const { owner, data: { context }, } = vnode;
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual" /* LwcDomMode.Manual */) {
-        elm.$domManual$ = true;
-    }
-}
-function applyElementRestrictions(elm, vnode) {
-    var _a, _b;
-    if (process.env.NODE_ENV !== 'production') {
-        const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
-        const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
-        patchElementWithRestrictions(elm, {
-            isPortal,
-            isLight,
-        });
+  // Set the class name for `*.scoped.css` style scoping.
+  const scopeToken = getScopeTokenClass(owner);
+
+  if (!isNull(scopeToken)) {
+    const {
+      getClassList
+    } = renderer; // TODO [#2762]: this dot notation with add is probably problematic
+    // probably we should have a renderer api for just the add operation
+
+    getClassList(elm).add(scopeToken);
+  } // Set property element for synthetic shadow DOM style scoping.
+
+
+  const {
+    stylesheetToken: syntheticToken
+  } = owner.context;
+
+  if (owner.shadowMode === 1
+  /* ShadowMode.Synthetic */
+  && !isUndefined$1(syntheticToken)) {
+    elm.$shadowToken$ = syntheticToken;
+  }
+}
+
+function applyDomManual(elm, vnode) {
+  var _a;
+
+  const {
+    owner,
+    data: {
+      context
     }
+  } = vnode;
+
+  if (owner.shadowMode === 1
+  /* ShadowMode.Synthetic */
+  && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual"
+  /* LwcDomMode.Manual */
+  ) {
+    elm.$domManual$ = true;
+  }
 }
+
+function applyElementRestrictions(elm, vnode) {
+  var _a, _b;
+
+  if (process.env.NODE_ENV !== 'production') {
+    const isPortal = vnode.type === 2
+    /* VNodeType.Element */
+    && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual"
+    /* LwcDomMode.Manual */
+    ;
+    const isLight = vnode.owner.renderMode === 0
+    /* RenderMode.Light */
+    ;
+    patchElementWithRestrictions(elm, {
+      isPortal,
+      isLight
+    });
+  }
+}
+
 function allocateChildren(vnode, vm) {
-    // A component with slots will re-render because:
-    // 1- There is a change of the internal state.
-    // 2- There is a change on the external api (ex: slots)
-    //
-    // In case #1, the vnodes in the cmpSlots will be reused since they didn't changed. This routine emptied the
-    // slotted children when those VCustomElement were rendered and therefore in subsequent calls to allocate children
-    // in a reused VCustomElement, there won't be any slotted children.
-    // For those cases, we will use the reference for allocated children stored when rendering the fresh VCustomElement.
-    //
-    // In case #2, we will always get a fresh VCustomElement.
-    const children = vnode.aChildren || vnode.children;
-    vm.aChildren = children;
-    const { renderMode, shadowMode } = vm;
-    if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
-        // slow path
-        allocateInSlot(vm, children);
-        // save the allocated children in case this vnode is reused.
-        vnode.aChildren = children;
-        // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
-        vnode.children = EmptyArray;
-    }
+  // A component with slots will re-render because:
+  // 1- There is a change of the internal state.
+  // 2- There is a change on the external api (ex: slots)
+  //
+  // In case #1, the vnodes in the cmpSlots will be reused since they didn't changed. This routine emptied the
+  // slotted children when those VCustomElement were rendered and therefore in subsequent calls to allocate children
+  // in a reused VCustomElement, there won't be any slotted children.
+  // For those cases, we will use the reference for allocated children stored when rendering the fresh VCustomElement.
+  //
+  // In case #2, we will always get a fresh VCustomElement.
+  const children = vnode.aChildren || vnode.children;
+  vm.aChildren = children;
+  const {
+    renderMode,
+    shadowMode
+  } = vm;
+
+  if (shadowMode === 1
+  /* ShadowMode.Synthetic */
+  || renderMode === 0
+  /* RenderMode.Light */
+  ) {
+    // slow path
+    allocateInSlot(vm, children); // save the allocated children in case this vnode is reused.
+
+    vnode.aChildren = children; // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
+
+    vnode.children = EmptyArray;
+  }
 }
+
 function createViewModelHook(elm, vnode, renderer) {
-    let vm = getAssociatedVMIfPresent(elm);
-    // There is a possibility that a custom element is registered under tagName, in which case, the
-    // initialization is already carry on, and there is nothing else to do here since this hook is
-    // called right after invoking `document.createElement`.
-    if (!isUndefined$1(vm)) {
-        return vm;
-    }
-    const { sel, mode, ctor, owner } = vnode;
-    vm = createVM(elm, ctor, renderer, {
-        mode,
-        owner,
-        tagName: sel,
-    });
-    if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(isArray$1(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
-    }
+  let vm = getAssociatedVMIfPresent(elm); // There is a possibility that a custom element is registered under tagName, in which case, the
+  // initialization is already carry on, and there is nothing else to do here since this hook is
+  // called right after invoking `document.createElement`.
+
+  if (!isUndefined$1(vm)) {
     return vm;
+  }
+
+  const {
+    sel,
+    mode,
+    ctor,
+    owner
+  } = vnode;
+  vm = createVM(elm, ctor, renderer, {
+    mode,
+    owner,
+    tagName: sel
+  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    assert.isTrue(isArray$1(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
+  }
+
+  return vm;
 }
+
 function allocateInSlot(vm, children) {
-    var _a;
-    const { cmpSlots: oldSlots } = vm;
-    const cmpSlots = (vm.cmpSlots = create(null));
-    for (let i = 0, len = children.length; i < len; i += 1) {
-        const vnode = children[i];
-        if (isNull(vnode)) {
-            continue;
-        }
-        let slotName = '';
-        if (isVBaseElement(vnode)) {
-            slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
-        }
-        const vnodes = (cmpSlots[slotName] = cmpSlots[slotName] || []);
-        ArrayPush$1.call(vnodes, vnode);
-    }
-    if (isFalse(vm.isDirty)) {
-        // We need to determine if the old allocation is really different from the new one
-        // and mark the vm as dirty
-        const oldKeys = keys(oldSlots);
-        if (oldKeys.length !== keys(cmpSlots).length) {
-            markComponentAsDirty(vm);
-            return;
-        }
-        for (let i = 0, len = oldKeys.length; i < len; i += 1) {
-            const key = oldKeys[i];
-            if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
-                markComponentAsDirty(vm);
-                return;
-            }
-            const oldVNodes = oldSlots[key];
-            const vnodes = cmpSlots[key];
-            for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
-                if (oldVNodes[j] !== vnodes[j]) {
-                    markComponentAsDirty(vm);
-                    return;
-                }
-            }
+  var _a;
+
+  const {
+    cmpSlots: oldSlots
+  } = vm;
+  const cmpSlots = vm.cmpSlots = create(null);
+
+  for (let i = 0, len = children.length; i < len; i += 1) {
+    const vnode = children[i];
+
+    if (isNull(vnode)) {
+      continue;
+    }
+
+    let slotName = '';
+
+    if (isVBaseElement(vnode)) {
+      slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || '';
+    }
+
+    const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || [];
+    ArrayPush$1.call(vnodes, vnode);
+  }
+
+  if (isFalse(vm.isDirty)) {
+    // We need to determine if the old allocation is really different from the new one
+    // and mark the vm as dirty
+    const oldKeys = keys(oldSlots);
+
+    if (oldKeys.length !== keys(cmpSlots).length) {
+      markComponentAsDirty(vm);
+      return;
+    }
+
+    for (let i = 0, len = oldKeys.length; i < len; i += 1) {
+      const key = oldKeys[i];
+
+      if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
+        markComponentAsDirty(vm);
+        return;
+      }
+
+      const oldVNodes = oldSlots[key];
+      const vnodes = cmpSlots[key];
+
+      for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
+        if (oldVNodes[j] !== vnodes[j]) {
+          markComponentAsDirty(vm);
+          return;
         }
+      }
     }
-}
-// Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-const FromIteration = new WeakMap();
-// dynamic children means it was generated by an iteration
+  }
+} // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
+
+
+const FromIteration = new WeakMap(); // dynamic children means it was generated by an iteration
 // in a template, and will require a more complex diffing algo.
+
 function markAsDynamicChildren(children) {
-    FromIteration.set(children, 1);
+  FromIteration.set(children, 1);
 }
+
 function hasDynamicChildren(children) {
-    return FromIteration.has(children);
+  return FromIteration.has(children);
 }
+
 function createKeyToOldIdx(children, beginIdx, endIdx) {
-    const map = {};
-    // TODO [#1637]: simplify this by assuming that all vnodes has keys
-    for (let j = beginIdx; j <= endIdx; ++j) {
-        const ch = children[j];
-        if (isVNode(ch)) {
-            const { key } = ch;
-            if (key !== undefined) {
-                map[key] = j;
-            }
-        }
+  const map = {}; // TODO [#1637]: simplify this by assuming that all vnodes has keys
+
+  for (let j = beginIdx; j <= endIdx; ++j) {
+    const ch = children[j];
+
+    if (isVNode(ch)) {
+      const {
+        key
+      } = ch;
+
+      if (key !== undefined) {
+        map[key] = j;
+      }
     }
-    return map;
+  }
+
+  return map;
 }
+
 function updateDynamicChildren(oldCh, newCh, parent, renderer) {
-    let oldStartIdx = 0;
-    let newStartIdx = 0;
-    let oldEndIdx = oldCh.length - 1;
-    let oldStartVnode = oldCh[0];
-    let oldEndVnode = oldCh[oldEndIdx];
-    const newChEnd = newCh.length - 1;
-    let newEndIdx = newChEnd;
-    let newStartVnode = newCh[0];
-    let newEndVnode = newCh[newEndIdx];
-    let oldKeyToIdx;
-    let idxInOld;
-    let elmToMove;
-    let before;
-    let clonedOldCh = false;
-    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-        if (!isVNode(oldStartVnode)) {
-            oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-        }
-        else if (!isVNode(oldEndVnode)) {
-            oldEndVnode = oldCh[--oldEndIdx];
-        }
-        else if (!isVNode(newStartVnode)) {
-            newStartVnode = newCh[++newStartIdx];
-        }
-        else if (!isVNode(newEndVnode)) {
-            newEndVnode = newCh[--newEndIdx];
-        }
-        else if (isSameVnode(oldStartVnode, newStartVnode)) {
-            patch(oldStartVnode, newStartVnode, parent, renderer);
-            oldStartVnode = oldCh[++oldStartIdx];
-            newStartVnode = newCh[++newStartIdx];
-        }
-        else if (isSameVnode(oldEndVnode, newEndVnode)) {
-            patch(oldEndVnode, newEndVnode, parent, renderer);
-            oldEndVnode = oldCh[--oldEndIdx];
-            newEndVnode = newCh[--newEndIdx];
-        }
-        else if (isSameVnode(oldStartVnode, newEndVnode)) {
-            // Vnode moved right
-            patch(oldStartVnode, newEndVnode, parent, renderer);
-            insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
-            oldStartVnode = oldCh[++oldStartIdx];
-            newEndVnode = newCh[--newEndIdx];
-        }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
-            // Vnode moved left
-            patch(oldEndVnode, newStartVnode, parent, renderer);
-            insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
-            oldEndVnode = oldCh[--oldEndIdx];
-            newStartVnode = newCh[++newStartIdx];
-        }
-        else {
-            if (oldKeyToIdx === undefined) {
-                oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-            }
-            idxInOld = oldKeyToIdx[newStartVnode.key];
-            if (isUndefined$1(idxInOld)) {
-                // New element
-                mount(newStartVnode, parent, renderer, oldStartVnode.elm);
-                newStartVnode = newCh[++newStartIdx];
-            }
-            else {
-                elmToMove = oldCh[idxInOld];
-                if (isVNode(elmToMove)) {
-                    if (elmToMove.sel !== newStartVnode.sel) {
-                        // New element
-                        mount(newStartVnode, parent, renderer, oldStartVnode.elm);
-                    }
-                    else {
-                        patch(elmToMove, newStartVnode, parent, renderer);
-                        // Delete the old child, but copy the array since it is read-only.
-                        // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
-                        // so we only care about the `oldCh` object inside this function.
-                        // To avoid cloning over and over again, we check `clonedOldCh`
-                        // and only clone once.
-                        if (!clonedOldCh) {
-                            clonedOldCh = true;
-                            oldCh = [...oldCh];
-                        }
-                        // We've already cloned at least once, so it's no longer read-only
-                        oldCh[idxInOld] = undefined;
-                        insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
-                    }
-                }
-                newStartVnode = newCh[++newStartIdx];
-            }
+  let oldStartIdx = 0;
+  let newStartIdx = 0;
+  let oldEndIdx = oldCh.length - 1;
+  let oldStartVnode = oldCh[0];
+  let oldEndVnode = oldCh[oldEndIdx];
+  const newChEnd = newCh.length - 1;
+  let newEndIdx = newChEnd;
+  let newStartVnode = newCh[0];
+  let newEndVnode = newCh[newEndIdx];
+  let oldKeyToIdx;
+  let idxInOld;
+  let elmToMove;
+  let before;
+  let clonedOldCh = false;
+
+  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+    if (!isVNode(oldStartVnode)) {
+      oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
+    } else if (!isVNode(oldEndVnode)) {
+      oldEndVnode = oldCh[--oldEndIdx];
+    } else if (!isVNode(newStartVnode)) {
+      newStartVnode = newCh[++newStartIdx];
+    } else if (!isVNode(newEndVnode)) {
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldStartVnode, newStartVnode)) {
+      patch(oldStartVnode, newStartVnode, parent, renderer);
+      oldStartVnode = oldCh[++oldStartIdx];
+      newStartVnode = newCh[++newStartIdx];
+    } else if (isSameVnode(oldEndVnode, newEndVnode)) {
+      patch(oldEndVnode, newEndVnode, parent, renderer);
+      oldEndVnode = oldCh[--oldEndIdx];
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldStartVnode, newEndVnode)) {
+      // Vnode moved right
+      patch(oldStartVnode, newEndVnode, parent, renderer);
+      insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
+      oldStartVnode = oldCh[++oldStartIdx];
+      newEndVnode = newCh[--newEndIdx];
+    } else if (isSameVnode(oldEndVnode, newStartVnode)) {
+      // Vnode moved left
+      patch(oldEndVnode, newStartVnode, parent, renderer);
+      insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
+      oldEndVnode = oldCh[--oldEndIdx];
+      newStartVnode = newCh[++newStartIdx];
+    } else {
+      if (oldKeyToIdx === undefined) {
+        oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
+      }
+
+      idxInOld = oldKeyToIdx[newStartVnode.key];
+
+      if (isUndefined$1(idxInOld)) {
+        // New element
+        mount(newStartVnode, parent, renderer, oldStartVnode.elm);
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        elmToMove = oldCh[idxInOld];
+
+        if (isVNode(elmToMove)) {
+          if (elmToMove.sel !== newStartVnode.sel) {
+            // New element
+            mount(newStartVnode, parent, renderer, oldStartVnode.elm);
+          } else {
+            patch(elmToMove, newStartVnode, parent, renderer); // Delete the old child, but copy the array since it is read-only.
+            // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
+            // so we only care about the `oldCh` object inside this function.
+            // To avoid cloning over and over again, we check `clonedOldCh`
+            // and only clone once.
+
+            if (!clonedOldCh) {
+              clonedOldCh = true;
+              oldCh = [...oldCh];
+            } // We've already cloned at least once, so it's no longer read-only
+
+
+            oldCh[idxInOld] = undefined;
+            insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
+          }
         }
+
+        newStartVnode = newCh[++newStartIdx];
+      }
     }
-    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-        if (oldStartIdx > oldEndIdx) {
-            // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
-            // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-            let i = newEndIdx;
-            let n;
-            do {
-                n = newCh[++i];
-            } while (!isVNode(n) && i < newChEnd);
-            before = isVNode(n) ? n.elm : null;
-            mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
-        }
-        else {
-            unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
-        }
+  }
+
+  if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+    if (oldStartIdx > oldEndIdx) {
+      // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
+      // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
+      let i = newEndIdx;
+      let n;
+
+      do {
+        n = newCh[++i];
+      } while (!isVNode(n) && i < newChEnd);
+
+      before = isVNode(n) ? n.elm : null;
+      mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
+    } else {
+      unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
     }
+  }
 }
+
 function updateStaticChildren(c1, c2, parent, renderer) {
-    const c1Length = c1.length;
-    const c2Length = c2.length;
-    if (c1Length === 0) {
-        // the old list is empty, we can directly insert anything new
-        mountVNodes(c2, parent, renderer, null);
-        return;
-    }
-    if (c2Length === 0) {
-        // the old list is nonempty and the new list is empty so we can directly remove all old nodes
-        // this is the case in which the dynamic children of an if-directive should be removed
-        unmountVNodes(c1, parent, renderer, true);
-        return;
-    }
-    // if the old list is not empty, the new list MUST have the same
-    // amount of nodes, that's why we call this static children
-    let anchor = null;
-    for (let i = c2Length - 1; i >= 0; i -= 1) {
-        const n1 = c1[i];
-        const n2 = c2[i];
-        if (n2 !== n1) {
-            if (isVNode(n1)) {
-                if (isVNode(n2)) {
-                    // both vnodes are equivalent, and we just need to patch them
-                    patch(n1, n2, parent, renderer);
-                    anchor = n2.elm;
-                }
-                else {
-                    // removing the old vnode since the new one is null
-                    unmount(n1, parent, renderer, true);
-                }
-            }
-            else if (isVNode(n2)) {
-                mount(n2, parent, renderer, anchor);
-                anchor = n2.elm;
-            }
+  const c1Length = c1.length;
+  const c2Length = c2.length;
+
+  if (c1Length === 0) {
+    // the old list is empty, we can directly insert anything new
+    mountVNodes(c2, parent, renderer, null);
+    return;
+  }
+
+  if (c2Length === 0) {
+    // the old list is nonempty and the new list is empty so we can directly remove all old nodes
+    // this is the case in which the dynamic children of an if-directive should be removed
+    unmountVNodes(c1, parent, renderer, true);
+    return;
+  } // if the old list is not empty, the new list MUST have the same
+  // amount of nodes, that's why we call this static children
+
+
+  let anchor = null;
+
+  for (let i = c2Length - 1; i >= 0; i -= 1) {
+    const n1 = c1[i];
+    const n2 = c2[i];
+
+    if (n2 !== n1) {
+      if (isVNode(n1)) {
+        if (isVNode(n2)) {
+          // both vnodes are equivalent, and we just need to patch them
+          patch(n1, n2, parent, renderer);
+          anchor = n2.elm;
+        } else {
+          // removing the old vnode since the new one is null
+          unmount(n1, parent, renderer, true);
         }
+      } else if (isVNode(n2)) {
+        mount(n2, parent, renderer, anchor);
+        anchor = n2.elm;
+      }
     }
+  }
 }
 
 /*
@@ -5445,7 +5715,7 @@ function createVM(elm, ctor, renderer, options) {
       return `[object:vm ${def.name} (${vm.idx})]`;
     };
 
-    if (runtimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
+    if (lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
       vm.shadowMode = 0
       /* ShadowMode.Native */
       ;
@@ -5484,7 +5754,7 @@ function computeShadowMode(vm, renderer) {
     } else if (isNativeShadowDefined) {
       // Not combined with above condition because @lwc/features only supports identifiers in
       // the if-condition.
-      if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+      if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
         if (def.shadowSupportMode === "any"
         /* ShadowSupportMode.Any */
         ) {
@@ -6191,7 +6461,7 @@ function installWireAdapters(vm) {
       ArrayPush$1.call(wiredConnecting, () => {
         connector.connect();
 
-        if (!runtimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+        if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
           if (hasDynamicParams) {
             Promise.resolve().then(computeConfigAndUpdate);
             return;
@@ -6337,6 +6607,7 @@ function hydrateNode(node, vnode, renderer) {
     }
     return renderer.nextSibling(hydratedNode);
 }
+const NODE_VALUE_PROP = 'nodeValue';
 function hydrateText(node, vnode, renderer) {
     var _a;
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
@@ -6344,7 +6615,7 @@ function hydrateText(node, vnode, renderer) {
     }
     if (process.env.NODE_ENV !== 'production') {
         const { getProperty } = renderer;
-        const nodeValue = getProperty(node, 'nodeValue');
+        const nodeValue = getProperty(node, NODE_VALUE_PROP);
         if (nodeValue !== vnode.text && !(nodeValue === '\u200D' && vnode.text === '')) {
             logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
         }
@@ -6361,13 +6632,13 @@ function hydrateComment(node, vnode, renderer) {
     }
     if (process.env.NODE_ENV !== 'production') {
         const { getProperty } = renderer;
-        const nodeValue = getProperty(node, 'nodeValue');
+        const nodeValue = getProperty(node, NODE_VALUE_PROP);
         if (nodeValue !== vnode.text) {
             logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
         }
     }
     const { setProperty } = renderer;
-    setProperty(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    setProperty(node, NODE_VALUE_PROP, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
     vnode.elm = node;
     return node;
 }
@@ -6635,13 +6906,13 @@ function areCompatibleNodes(client, ssr, vnode, renderer) {
         if (!hasCorrectNodeType(vnode, ssr, 3 /* EnvNodeTypes.TEXT */, renderer)) {
             return false;
         }
-        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+        return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
     }
     if (getProperty(client, 'nodeType') === 8 /* EnvNodeTypes.COMMENT */) {
         if (!hasCorrectNodeType(vnode, ssr, 8 /* EnvNodeTypes.COMMENT */, renderer)) {
             return false;
         }
-        return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+        return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
     }
     if (!hasCorrectNodeType(vnode, ssr, 1 /* EnvNodeTypes.ELEMENT */, renderer)) {
         return false;
@@ -6797,7 +7068,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.23.0 */
+/* version: 2.23.3 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6947,61 +7218,303 @@ function insertStylesheet(content, target) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
-let createFragment;
-if (SUPPORTS_TEMPLATE) {
-    // Parse the fragment HTML string into DOM
-    createFragment = function (html) {
-        const template = document.createElement('template');
-        template.innerHTML = html;
-        return template.content.firstChild;
-    };
-}
-else {
-    // In browsers that don't support <template> (e.g. IE11), we need to be careful to wrap elements like
-    // <td> in the proper container elements (e.g. <tbody>), because otherwise they will be parsed as null.
-    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L273-L280
-    // With other elements added from:
-    // https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
-    // Using the test:
-    // document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
-    // And omitting <html>, <head>, and <body> as these are not practical in an LWC component.
-    const topLevelWrappingMap = {
-        caption: ['table'],
-        col: ['colgroup', 'table'],
-        colgroup: ['table'],
-        option: ['select'],
-        tbody: ['table'],
-        td: ['tr', 'tbody', 'table'],
-        th: ['tr', 'tbody', 'table'],
-        thead: ['table'],
-        tfoot: ['table'],
-        tr: ['tbody', 'table'],
-    };
-    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L282-L288
-    const getTagName = function (text) {
-        return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
-    };
-    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
-    createFragment = function (html) {
-        const wrapperTags = topLevelWrappingMap[getTagName(html)];
-        if (!isUndefined$1(wrapperTags)) {
-            for (const wrapperTag of wrapperTags) {
-                html = `<${wrapperTag}>${html}</${wrapperTag}>`;
+/**
+ * A factory function that produces a renderer.
+ * Renderer encapsulates operations that are required to render an LWC component into the underlying
+ * runtime environment. In the case of @lwc/enigne-dom, it is meant to be used in a DOM environment.
+ * Example usage:
+ * import { renderer, rendererFactory } from 'lwc';
+ * const customRenderer = rendererFactory(renderer);
+ *
+ * @param baseRenderer Either null or the base renderer imported from 'lwc'.
+ */
+function rendererFactory(baseRenderer) {
+    // Util functions
+    function assertInvariant(value, msg) {
+        if (!value) {
+            throw new Error(`Invariant Violation: ${msg}`);
+        }
+    }
+    function isNull(obj) {
+        return obj === null;
+    }
+    function isUndefined(obj) {
+        return obj === undefined;
+    }
+    let getCustomElement;
+    let defineCustomElement;
+    let HTMLElementConstructor;
+    function isCustomElementRegistryAvailable() {
+        if (typeof customElements === 'undefined') {
+            return false;
+        }
+        try {
+            // dereference HTMLElement global because babel wraps globals in compat mode with a
+            // _wrapNativeSuper()
+            // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
+            // get wrapped by babel.
+            const HTMLElementAlias = HTMLElement;
+            // In case we use compat mode with a modern browser, the compat mode transformation
+            // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
+            // which are not equipped to be initialized that way.
+            class clazz extends HTMLElementAlias {
             }
+            customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
+            new clazz();
+            return true;
+        }
+        catch (_a) {
+            return false;
         }
-        // For IE11, the document title must not be undefined, but it can be an empty string
-        // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
-        const doc = document.implementation.createHTMLDocument('');
-        doc.body.innerHTML = html;
-        let content = doc.body;
-        if (!isUndefined$1(wrapperTags)) {
-            for (let i = 0; i < wrapperTags.length; i++) {
-                content = content.firstChild;
+    }
+    if (isCustomElementRegistryAvailable()) {
+        getCustomElement = customElements.get.bind(customElements);
+        defineCustomElement = customElements.define.bind(customElements);
+        HTMLElementConstructor = HTMLElement;
+    }
+    else {
+        const registry = Object.create(null);
+        const reverseRegistry = new WeakMap();
+        defineCustomElement = function define(name, ctor) {
+            if (name !== String.prototype.toLowerCase.call(name) || registry[name]) {
+                throw new TypeError(`Invalid Registration`);
+            }
+            registry[name] = ctor;
+            reverseRegistry.set(ctor, name);
+        };
+        getCustomElement = function get(name) {
+            return registry[name];
+        };
+        HTMLElementConstructor = function HTMLElement() {
+            if (!(this instanceof HTMLElement)) {
+                throw new TypeError(`Invalid Invocation`);
+            }
+            const { constructor } = this;
+            const name = reverseRegistry.get(constructor);
+            if (!name) {
+                throw new TypeError(`Invalid Construction`);
+            }
+            const elm = document.createElement(name);
+            Object.setPrototypeOf(elm, constructor.prototype);
+            return elm;
+        };
+        HTMLElementConstructor.prototype = HTMLElement.prototype;
+    }
+    function cloneNode(node, deep) {
+        return node.cloneNode(deep);
+    }
+    function createElement(tagName, namespace) {
+        return isUndefined(namespace)
+            ? document.createElement(tagName)
+            : document.createElementNS(namespace, tagName);
+    }
+    function createText(content) {
+        return document.createTextNode(content);
+    }
+    function createComment(content) {
+        return document.createComment(content);
+    }
+    let createFragment;
+    // IE11 lacks support for this feature
+    const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
+    if (SUPPORTS_TEMPLATE) {
+        // Parse the fragment HTML string into DOM
+        createFragment = function (html) {
+            const template = document.createElement('template');
+            template.innerHTML = html;
+            return template.content.firstChild;
+        };
+    }
+    else {
+        // In browsers that don't support <template> (e.g. IE11), we need to be careful to wrap elements like
+        // <td> in the proper container elements (e.g. <tbody>), because otherwise they will be parsed as null.
+        // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L273-L280
+        // With other elements added from:
+        // https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
+        // Using the test:
+        // document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
+        // And omitting <html>, <head>, and <body> as these are not practical in an LWC component.
+        const topLevelWrappingMap = {
+            caption: ['table'],
+            col: ['colgroup', 'table'],
+            colgroup: ['table'],
+            option: ['select'],
+            tbody: ['table'],
+            td: ['tr', 'tbody', 'table'],
+            th: ['tr', 'tbody', 'table'],
+            thead: ['table'],
+            tfoot: ['table'],
+            tr: ['tbody', 'table'],
+        };
+        // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L282-L288
+        const getTagName = function (text) {
+            return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
+        };
+        // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
+        createFragment = function (html) {
+            const wrapperTags = topLevelWrappingMap[getTagName(html)];
+            if (!isUndefined(wrapperTags)) {
+                for (const wrapperTag of wrapperTags) {
+                    html = `<${wrapperTag}>${html}</${wrapperTag}>`;
+                }
             }
+            // For IE11, the document title must not be undefined, but it can be an empty string
+            // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
+            const doc = document.implementation.createHTMLDocument('');
+            doc.body.innerHTML = html;
+            let content = doc.body;
+            if (!isUndefined(wrapperTags)) {
+                for (let i = 0; i < wrapperTags.length; i++) {
+                    content = content.firstChild;
+                }
+            }
+            return content.firstChild;
+        };
+    }
+    function insert(node, parent, anchor) {
+        parent.insertBefore(node, anchor);
+    }
+    function remove(node, parent) {
+        parent.removeChild(node);
+    }
+    function nextSibling(node) {
+        return node.nextSibling;
+    }
+    function attachShadow(element, options) {
+        // `shadowRoot` will be non-null in two cases:
+        //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
+        //   2. when a webapp author places <c-app> in their static HTML and mounts their
+        //      root component with customElement.define('c-app', Ctor)
+        if (!isNull(element.shadowRoot)) {
+            return element.shadowRoot;
+        }
+        return element.attachShadow(options);
+    }
+    function setText(node, content) {
+        node.nodeValue = content;
+    }
+    function getProperty(node, key) {
+        return node[key];
+    }
+    function setProperty(node, key, value) {
+        node[key] = value;
+    }
+    function getAttribute(element, name, namespace) {
+        return isUndefined(namespace)
+            ? element.getAttribute(name)
+            : element.getAttributeNS(namespace, name);
+    }
+    function setAttribute(element, name, value, namespace) {
+        return isUndefined(namespace)
+            ? element.setAttribute(name, value)
+            : element.setAttributeNS(namespace, name, value);
+    }
+    function removeAttribute(element, name, namespace) {
+        if (isUndefined(namespace)) {
+            element.removeAttribute(name);
         }
-        return content.firstChild;
+        else {
+            element.removeAttributeNS(namespace, name);
+        }
+    }
+    function addEventListener(target, type, callback, options) {
+        target.addEventListener(type, callback, options);
+    }
+    function removeEventListener(target, type, callback, options) {
+        target.removeEventListener(type, callback, options);
+    }
+    function dispatchEvent(target, event) {
+        return target.dispatchEvent(event);
+    }
+    function getClassList(element) {
+        return element.classList;
+    }
+    function setCSSStyleProperty(element, name, value, important) {
+        // TODO [#0]: How to avoid this type casting? Shall we use a different type interface to
+        // represent elements in the engine?
+        element.style.setProperty(name, value, important ? 'important' : '');
+    }
+    function getBoundingClientRect(element) {
+        return element.getBoundingClientRect();
+    }
+    function querySelector(element, selectors) {
+        return element.querySelector(selectors);
+    }
+    function querySelectorAll(element, selectors) {
+        return element.querySelectorAll(selectors);
+    }
+    function getElementsByTagName(element, tagNameOrWildCard) {
+        return element.getElementsByTagName(tagNameOrWildCard);
+    }
+    function getElementsByClassName(element, names) {
+        return element.getElementsByClassName(names);
+    }
+    function getChildren(element) {
+        return element.children;
+    }
+    function getChildNodes(element) {
+        return element.childNodes;
+    }
+    function getFirstChild(element) {
+        return element.firstChild;
+    }
+    function getFirstElementChild(element) {
+        return element.firstElementChild;
+    }
+    function getLastChild(element) {
+        return element.lastChild;
+    }
+    function getLastElementChild(element) {
+        return element.lastElementChild;
+    }
+    function isConnected(node) {
+        return node.isConnected;
+    }
+    function assertInstanceOfHTMLElement(elm, msg) {
+        assertInvariant(elm instanceof HTMLElement, msg);
+    }
+    const HTMLElementExported = HTMLElementConstructor;
+    const renderer = {
+        HTMLElementExported,
+        insert,
+        remove,
+        cloneNode,
+        createFragment,
+        createElement,
+        createText,
+        createComment,
+        nextSibling,
+        attachShadow,
+        getProperty,
+        setProperty,
+        setText,
+        getAttribute,
+        setAttribute,
+        removeAttribute,
+        addEventListener,
+        removeEventListener,
+        dispatchEvent,
+        getClassList,
+        setCSSStyleProperty,
+        getBoundingClientRect,
+        querySelector,
+        querySelectorAll,
+        getElementsByTagName,
+        getElementsByClassName,
+        getChildren,
+        getChildNodes,
+        getFirstChild,
+        getFirstElementChild,
+        getLastChild,
+        getLastElementChild,
+        isConnected,
+        assertInstanceOfHTMLElement,
+        defineCustomElement,
+        getCustomElement,
     };
+    // Meant to inherit any properties passed via the base renderer as the argument to the factory.
+    Object.setPrototypeOf(renderer, baseRenderer);
+    return renderer;
 }
 
 /*
@@ -7010,231 +7523,21 @@ else {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-let getCustomElement;
-let defineCustomElement;
-let HTMLElementConstructor;
-function isCustomElementRegistryAvailable() {
-    if (typeof customElements === 'undefined') {
-        return false;
-    }
-    try {
-        // dereference HTMLElement global because babel wraps globals in compat mode with a
-        // _wrapNativeSuper()
-        // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
-        // get wrapped by babel.
-        const HTMLElementAlias = HTMLElement;
-        // In case we use compat mode with a modern browser, the compat mode transformation
-        // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
-        // which are not equipped to be initialized that way.
-        class clazz extends HTMLElementAlias {
-        }
-        customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
-        new clazz();
-        return true;
-    }
-    catch (_a) {
-        return false;
-    }
-}
-if (isCustomElementRegistryAvailable()) {
-    getCustomElement = customElements.get.bind(customElements);
-    defineCustomElement = customElements.define.bind(customElements);
-    HTMLElementConstructor = HTMLElement;
-}
-else {
-    const registry = create(null);
-    const reverseRegistry = new WeakMap();
-    defineCustomElement = function define(name, ctor) {
-        if (name !== StringToLowerCase.call(name) || registry[name]) {
-            throw new TypeError(`Invalid Registration`);
-        }
-        registry[name] = ctor;
-        reverseRegistry.set(ctor, name);
-    };
-    getCustomElement = function get(name) {
-        return registry[name];
-    };
-    HTMLElementConstructor = function HTMLElement() {
-        if (!(this instanceof HTMLElement)) {
-            throw new TypeError(`Invalid Invocation`);
-        }
-        const { constructor } = this;
-        const name = reverseRegistry.get(constructor);
-        if (!name) {
-            throw new TypeError(`Invalid Construction`);
-        }
-        const elm = document.createElement(name);
-        setPrototypeOf(elm, constructor.prototype);
-        return elm;
-    };
-    HTMLElementConstructor.prototype = HTMLElement.prototype;
-}
-const isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
-const isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
-function cloneNode(node, deep) {
-    return node.cloneNode(deep);
-}
-function createElement$1(tagName, namespace) {
-    return isUndefined$1(namespace)
-        ? document.createElement(tagName)
-        : document.createElementNS(namespace, tagName);
-}
-function createText(content) {
-    return document.createTextNode(content);
-}
-function createComment(content) {
-    return document.createComment(content);
-}
-function insert(node, parent, anchor) {
-    parent.insertBefore(node, anchor);
-}
-function remove(node, parent) {
-    parent.removeChild(node);
-}
-function nextSibling(node) {
-    return node.nextSibling;
-}
-function attachShadow(element, options) {
-    // `shadowRoot` will be non-null in two cases:
-    //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
-    //   2. when a webapp author places <c-app> in their static HTML and mounts their
-    //      root component with customElement.define('c-app', Ctor)
-    if (!isNull(element.shadowRoot)) {
-        return element.shadowRoot;
-    }
-    return element.attachShadow(options);
-}
-function setText(node, content) {
-    node.nodeValue = content;
-}
-function getProperty(node, key) {
-    return node[key];
-}
-function setProperty(node, key, value) {
-    if (process.env.NODE_ENV !== 'production') {
-        if (node instanceof Element && !(key in node)) {
-            // TODO [#1297]: Move this validation to the compiler
-            assert.fail(`Unknown public property "${key}" of element <${node.tagName}>. This is likely a typo on the corresponding attribute "${htmlPropertyToAttribute(key)}".`);
-        }
-    }
-    node[key] = value;
-}
-function getAttribute(element, name, namespace) {
-    return isUndefined$1(namespace)
-        ? element.getAttribute(name)
-        : element.getAttributeNS(namespace, name);
-}
-function setAttribute(element, name, value, namespace) {
-    return isUndefined$1(namespace)
-        ? element.setAttribute(name, value)
-        : element.setAttributeNS(namespace, name, value);
-}
-function removeAttribute(element, name, namespace) {
-    if (isUndefined$1(namespace)) {
-        element.removeAttribute(name);
-    }
-    else {
-        element.removeAttributeNS(namespace, name);
-    }
-}
-function addEventListener(target, type, callback, options) {
-    target.addEventListener(type, callback, options);
-}
-function removeEventListener(target, type, callback, options) {
-    target.removeEventListener(type, callback, options);
-}
-function dispatchEvent(target, event) {
-    return target.dispatchEvent(event);
-}
-function getClassList(element) {
-    return element.classList;
-}
-function setCSSStyleProperty(element, name, value, important) {
-    // TODO [#0]: How to avoid this type casting? Shall we use a different type interface to
-    // represent elements in the engine?
-    element.style.setProperty(name, value, important ? 'important' : '');
-}
-function getBoundingClientRect(element) {
-    return element.getBoundingClientRect();
-}
-function querySelector(element, selectors) {
-    return element.querySelector(selectors);
-}
-function querySelectorAll(element, selectors) {
-    return element.querySelectorAll(selectors);
-}
-function getElementsByTagName(element, tagNameOrWildCard) {
-    return element.getElementsByTagName(tagNameOrWildCard);
-}
-function getElementsByClassName(element, names) {
-    return element.getElementsByClassName(names);
-}
-function getChildren(element) {
-    return element.children;
-}
-function getChildNodes(element) {
-    return element.childNodes;
-}
-function getFirstChild(element) {
-    return element.firstChild;
-}
-function getFirstElementChild(element) {
-    return element.firstElementChild;
-}
-function getLastChild(element) {
-    return element.lastChild;
-}
-function getLastElementChild(element) {
-    return element.lastElementChild;
-}
-function isConnected(node) {
-    return node.isConnected;
-}
-function assertInstanceOfHTMLElement(elm, msg) {
-    assert.invariant(elm instanceof HTMLElement, msg);
-}
-const HTMLElementExported = HTMLElementConstructor;
-const renderer = {
-    isNativeShadowDefined,
-    isSyntheticShadowDefined,
-    HTMLElementExported,
-    insert,
-    remove,
-    cloneNode,
-    createFragment,
-    createElement: createElement$1,
-    createText,
-    createComment,
-    nextSibling,
-    attachShadow,
-    getProperty,
-    setProperty,
-    setText,
-    getAttribute,
-    setAttribute,
-    removeAttribute,
-    addEventListener,
-    removeEventListener,
-    dispatchEvent,
-    getClassList,
-    setCSSStyleProperty,
-    getBoundingClientRect,
-    querySelector,
-    querySelectorAll,
-    getElementsByTagName,
-    getElementsByClassName,
-    getChildren,
-    getChildNodes,
-    getFirstChild,
-    getFirstElementChild,
-    getLastChild,
-    getLastElementChild,
-    isConnected,
+/**
+ * The base renderer that will be used by engine-core.
+ * This will be used for DOM operations when lwc is running in a browser environment.
+ */
+const renderer = assign(
+// The base renderer will invoke the factory with null and assign additional properties that are
+// shared across renderers
+rendererFactory(null), 
+// Properties that are either not required to be sandboxed or rely on a globally shared information
+{
+    // insertStyleSheet implementation shares a global cache of stylesheet data
     insertStylesheet,
-    assertInstanceOfHTMLElement,
-    defineCustomElement,
-    getCustomElement,
-};
+    isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
+    isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
+});
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7370,44 +7673,60 @@ function buildCustomElementConstructor(Ctor) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-// TODO [#2472]: Remove this workaround when appropriate.
 // eslint-disable-next-line @lwc/lwc-internal/no-global-node
+
 const _Node$1 = Node;
 const ConnectingSlot = new WeakMap();
 const DisconnectingSlot = new WeakMap();
+
 function callNodeSlot(node, slot) {
-    if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(node, `callNodeSlot() should not be called for a non-object`);
-    }
-    const fn = slot.get(node);
-    if (!isUndefined$1(fn)) {
-        fn(node);
-    }
-    return node; // for convenience
+  if (process.env.NODE_ENV !== 'production') {
+    assert.isTrue(node, `callNodeSlot() should not be called for a non-object`);
+  }
+
+  const fn = slot.get(node);
+
+  if (!isUndefined$1(fn)) {
+    fn(node);
+  }
+
+  return node; // for convenience
 }
-// Monkey patching Node methods to be able to detect the insertions and removal of root elements
-// created via createElement.
-const { appendChild, insertBefore, removeChild, replaceChild } = _Node$1.prototype;
-assign(_Node$1.prototype, {
+
+if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+  // Monkey patching Node methods to be able to detect the insertions and removal of root elements
+  // created via createElement.
+  const {
+    appendChild,
+    insertBefore,
+    removeChild,
+    replaceChild
+  } = _Node$1.prototype;
+  assign(_Node$1.prototype, {
     appendChild(newChild) {
-        const appendedNode = appendChild.call(this, newChild);
-        return callNodeSlot(appendedNode, ConnectingSlot);
+      const appendedNode = appendChild.call(this, newChild);
+      return callNodeSlot(appendedNode, ConnectingSlot);
     },
+
     insertBefore(newChild, referenceNode) {
-        const insertedNode = insertBefore.call(this, newChild, referenceNode);
-        return callNodeSlot(insertedNode, ConnectingSlot);
+      const insertedNode = insertBefore.call(this, newChild, referenceNode);
+      return callNodeSlot(insertedNode, ConnectingSlot);
     },
+
     removeChild(oldChild) {
-        const removedNode = removeChild.call(this, oldChild);
-        return callNodeSlot(removedNode, DisconnectingSlot);
+      const removedNode = removeChild.call(this, oldChild);
+      return callNodeSlot(removedNode, DisconnectingSlot);
     },
+
     replaceChild(newChild, oldChild) {
-        const replacedNode = replaceChild.call(this, newChild, oldChild);
-        callNodeSlot(replacedNode, DisconnectingSlot);
-        callNodeSlot(newChild, ConnectingSlot);
-        return replacedNode;
-    },
-});
+      const replacedNode = replaceChild.call(this, newChild, oldChild);
+      callNodeSlot(replacedNode, DisconnectingSlot);
+      callNodeSlot(newChild, ConnectingSlot);
+      return replacedNode;
+    }
+
+  });
+}
 /**
  * EXPERIMENTAL: This function is almost identical to document.createElement with the slightly
  * difference that in the options, you can pass the `is` property set to a Constructor instead of
@@ -7419,38 +7738,50 @@ assign(_Node$1.prototype, {
  * const el = createElement('x-foo', { is: FooCtor });
  * ```
  */
+
+
 function createElement(sel, options) {
-    if (!isObject(options) || isNull(options)) {
-        throw new TypeError(`"createElement" function expects an object as second parameter but received "${toString$1(options)}".`);
-    }
-    const Ctor = options.is;
-    if (!isFunction$1(Ctor)) {
-        throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
-    }
-    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
-    let wasComponentUpgraded = false;
-    // the custom element from the registry is expecting an upgrade callback
-    /**
-     * 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
-     * mechanism that only passes that argument if the constructor is known to be
-     * an upgradable custom element.
-     */
-    const element = new UpgradableConstructor((elm) => {
-        createVM(elm, Ctor, renderer, {
-            tagName: sel,
-            mode: options.mode !== 'closed' ? 'open' : 'closed',
-            owner: null,
-        });
-        ConnectingSlot.set(elm, connectRootElement);
-        DisconnectingSlot.set(elm, disconnectRootElement);
-        wasComponentUpgraded = true;
+  if (!isObject(options) || isNull(options)) {
+    throw new TypeError(`"createElement" function expects an object as second parameter but received "${toString$1(options)}".`);
+  }
+
+  const Ctor = options.is;
+
+  if (!isFunction$1(Ctor)) {
+    throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
+  }
+
+  const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
+  let wasComponentUpgraded = false; // the custom element from the registry is expecting an upgrade callback
+
+  /**
+   * 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
+   * mechanism that only passes that argument if the constructor is known to be
+   * an upgradable custom element.
+   */
+
+  const element = new UpgradableConstructor(elm => {
+    createVM(elm, Ctor, renderer, {
+      tagName: sel,
+      mode: options.mode !== 'closed' ? 'open' : 'closed',
+      owner: null
     });
-    if (!wasComponentUpgraded) {
-        /* eslint-disable-next-line no-console */
-        console.error(`Unexpected tag name "${sel}". This name is a registered custom element, preventing LWC to upgrade the element.`);
+
+    if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      ConnectingSlot.set(elm, connectRootElement);
+      DisconnectingSlot.set(elm, disconnectRootElement);
     }
-    return element;
+
+    wasComponentUpgraded = true;
+  });
+
+  if (!wasComponentUpgraded) {
+    /* eslint-disable-next-line no-console */
+    console.error(`Unexpected tag name "${sel}". This name is a registered custom element, preventing LWC to upgrade the element.`);
+  }
+
+  return element;
 }
 
 /*
@@ -7484,7 +7815,7 @@ function isNodeShadowed(node) {
     }
     // TODO [#1252]: Old behavior that is still used by some pieces of the platform. Manually
     // inserted nodes without the `lwc:dom=manual` directive will be considered as global elements.
-    return isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
+    return renderer.isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
 }
 
 /*
@@ -7521,6 +7852,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.23.0 */
+/* version: 2.23.3 */
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };