@lwrjs/everywhere 0.9.0-alpha.7 → 0.9.0-alpha.9

package/build/__generated_site_amd_modules__/1/module/amd/1/l/en-US/mi/lwc/v/{2_17_0/s/60dae7a83431c35c02c87ca8aaaa6044 → 2_33_0/s/90a5f16131da45cef1653112862ca9dc}/lwc.js

@@ -1,4 +1,4 @@
-LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
+LWR.define("lwc/v/2_33_0", ["exports"], function(exports) {
   "use strict";
   function invariant(value, msg) {
     if (!value) {
@@ -44,6 +44,7 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
     isArray: isArray$1
   } = Array;
   const {
+    concat: ArrayConcat$1,
     copyWithin: ArrayCopyWithin,
     fill: ArrayFill,
     filter: ArrayFilter,
@@ -57,6 +58,7 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
     reverse: ArrayReverse,
     shift: ArrayShift,
     slice: ArraySlice,
+    some: ArraySome,
     sort: ArraySort,
     splice: ArraySplice,
     unshift: ArrayUnshift,
@@ -167,8 +169,24 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
   const KEY__SHADOW_TOKEN = "$shadowToken$";
   const KEY__SYNTHETIC_MODE = "$$lwc-synthetic-mode";
   const KEY__SCOPED_CSS = "$scoped$";
-  const NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING = new Map([["accessKey", "accesskey"], ["readOnly", "readonly"], ["tabIndex", "tabindex"], ["bgColor", "bgcolor"], ["colSpan", "colspan"], ["rowSpan", "rowspan"], ["contentEditable", "contenteditable"], ["crossOrigin", "crossorigin"], ["dateTime", "datetime"], ["formAction", "formaction"], ["isMap", "ismap"], ["maxLength", "maxlength"], ["minLength", "minlength"], ["noValidate", "novalidate"], ["useMap", "usemap"], ["htmlFor", "for"]]);
+  const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
+  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+  const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
+  const CAMEL_REGEX = /-([a-z])/g;
+  const {
+    NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING,
+    NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING
+  } = /* @__PURE__ */ (() => {
+    const NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING2 = new Map([["accessKey", "accesskey"], ["readOnly", "readonly"], ["tabIndex", "tabindex"], ["bgColor", "bgcolor"], ["colSpan", "colspan"], ["rowSpan", "rowspan"], ["contentEditable", "contenteditable"], ["crossOrigin", "crossorigin"], ["dateTime", "datetime"], ["formAction", "formaction"], ["isMap", "ismap"], ["maxLength", "maxlength"], ["minLength", "minlength"], ["noValidate", "novalidate"], ["useMap", "usemap"], ["htmlFor", "for"]]);
+    const NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING2 = new Map();
+    NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING2.forEach((value, key) => NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING2.set(value, key));
+    return {
+      NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING: NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING2,
+      NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING: NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING2
+    };
+  })();
   const CACHED_PROPERTY_ATTRIBUTE_MAPPING = new Map();
+  const CACHED_ATTRIBUTE_PROPERTY_MAPPING = new Map();
   function htmlPropertyToAttribute(propName) {
     const ariaAttributeName = AriaPropNameToAttrNameMap[propName];
     if (!isUndefined$1(ariaAttributeName)) {
@@ -194,80 +212,43 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
-  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-  const XLINK_NAMESPACE = "http://www.w3.org/1999/xlink";
-  const LWC_VERSION = "2.17.0";
-  const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  function detect(propName) {
-    return Object.getOwnPropertyDescriptor(Element.prototype, propName) === void 0;
-  }
-  const nodeToAriaPropertyValuesMap = new WeakMap();
-  function getAriaPropertyMap(elm) {
-    let map = nodeToAriaPropertyValuesMap.get(elm);
-    if (map === void 0) {
-      map = {};
-      nodeToAriaPropertyValuesMap.set(elm, map);
+  function htmlAttributeToProperty(attrName) {
+    const ariaPropertyName = AriaAttrNameToPropNameMap[attrName];
+    if (!isUndefined$1(ariaPropertyName)) {
+      return ariaPropertyName;
     }
-    return map;
-  }
-  function getNormalizedAriaPropertyValue(value) {
-    return value == null ? null : String(value);
-  }
-  function createAriaPropertyPropertyDescriptor(propName, attrName) {
-    return {
-      get() {
-        const map = getAriaPropertyMap(this);
-        if (hasOwnProperty$1.call(map, propName)) {
-          return map[propName];
-        }
-        return this.hasAttribute(attrName) ? this.getAttribute(attrName) : null;
-      },
-      set(newValue) {
-        const normalizedValue = getNormalizedAriaPropertyValue(newValue);
-        const map = getAriaPropertyMap(this);
-        map[propName] = normalizedValue;
-        if (newValue === null) {
-          this.removeAttribute(attrName);
-        } else {
-          this.setAttribute(attrName, newValue);
-        }
-      },
-      configurable: true,
-      enumerable: true
-    };
-  }
-  function patch$1(propName) {
-    const attrName = AriaPropNameToAttrNameMap[propName];
-    const descriptor = createAriaPropertyPropertyDescriptor(propName, attrName);
-    Object.defineProperty(Element.prototype, propName, descriptor);
-  }
-  const ElementPrototypeAriaPropertyNames = keys(AriaPropNameToAttrNameMap);
-  for (let i2 = 0, len = ElementPrototypeAriaPropertyNames.length; i2 < len; i2 += 1) {
-    const propName = ElementPrototypeAriaPropertyNames[i2];
-    if (detect(propName)) {
-      patch$1(propName);
+    const specialPropertyName = NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING.get(attrName);
+    if (!isUndefined$1(specialPropertyName)) {
+      return specialPropertyName;
+    }
+    const cachedPropertyName = CACHED_ATTRIBUTE_PROPERTY_MAPPING.get(attrName);
+    if (!isUndefined$1(cachedPropertyName)) {
+      return cachedPropertyName;
     }
+    const propertyName = StringReplace.call(attrName, CAMEL_REGEX, (g) => g[1].toUpperCase());
+    CACHED_ATTRIBUTE_PROPERTY_MAPPING.set(attrName, propertyName);
+    return propertyName;
   }
+  const LWC_VERSION = "2.33.0";
+  const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
   const features = {
     DUMMY_TEST_FLAG: null,
-    ENABLE_ELEMENT_PATCH: null,
     ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
-    ENABLE_HMR: null,
-    ENABLE_HTML_COLLECTIONS_PATCH: null,
-    ENABLE_INNER_OUTER_TEXT_PATCH: null,
     ENABLE_MIXED_SHADOW_MODE: null,
-    ENABLE_NODE_LIST_PATCH: null,
-    ENABLE_NODE_PATCH: null,
-    ENABLE_REACTIVE_SETTER: null,
-    ENABLE_WIRE_SYNC_EMIT: null
+    ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: null,
+    ENABLE_WIRE_SYNC_EMIT: null,
+    ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
+    DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
+    ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null,
+    ENABLE_FROZEN_TEMPLATE: null,
+    DISABLE_ARIA_REFLECTION_POLYFILL: null
   };
   if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, "lwcRuntimeFlags", {
       value: create(null)
     });
   }
-  const runtimeFlags = _globalThis.lwcRuntimeFlags;
+  const lwcRuntimeFlags = _globalThis.lwcRuntimeFlags;
   function setFeatureFlag(name, value) {
     if (!isBoolean(value)) {
       const message = `Failed to set the value "${value}" for the runtime feature flag "${name}". Runtime feature flags can only be set to a boolean value.`;
@@ -284,14 +265,14 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
       return;
     }
     if (true) {
-      runtimeFlags[name] = value;
+      lwcRuntimeFlags[name] = value;
     } else {
-      const runtimeValue = runtimeFlags[name];
+      const runtimeValue = lwcRuntimeFlags[name];
       if (!isUndefined$1(runtimeValue)) {
         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, {
+      defineProperty(lwcRuntimeFlags, name, {
         value
       });
     }
@@ -301,10 +282,46 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
       setFeatureFlag(name, value);
     }
   }
+  function detect(propName, prototype) {
+    return isUndefined$1(getOwnPropertyDescriptor$1(prototype, propName));
+  }
+  function createAriaPropertyPropertyDescriptor(attrName) {
+    return {
+      get() {
+        return this.hasAttribute(attrName) ? this.getAttribute(attrName) : null;
+      },
+      set(newValue) {
+        if (isNull(newValue)) {
+          this.removeAttribute(attrName);
+        } else {
+          this.setAttribute(attrName, newValue);
+        }
+      },
+      configurable: true,
+      enumerable: true
+    };
+  }
+  function patch$1(propName, prototype) {
+    const attrName = AriaPropNameToAttrNameMap[propName];
+    const descriptor = createAriaPropertyPropertyDescriptor(attrName);
+    defineProperty(prototype, propName, descriptor);
+  }
+  function applyAriaReflection(prototype = Element.prototype) {
+    const ElementPrototypeAriaPropertyNames = keys(AriaPropNameToAttrNameMap);
+    for (let i2 = 0, len = ElementPrototypeAriaPropertyNames.length; i2 < len; i2 += 1) {
+      const propName = ElementPrototypeAriaPropertyNames[i2];
+      if (detect(propName, prototype)) {
+        patch$1(propName, prototype);
+      }
+    }
+  }
+  if (!lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
+    applyAriaReflection();
+  }
   if (typeof __karma__ !== "undefined") {
     window.addEventListener("test-dummy-flag", () => {
       let hasFlag = false;
-      if (runtimeFlags.DUMMY_TEST_FLAG) {
+      if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
         hasFlag = true;
       }
       window.dispatchEvent(new CustomEvent("has-dummy-flag", {
@@ -318,7 +335,7 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
   if (typeof __karma__ !== "undefined") {
     window.addEventListener("test-dummy-flag", () => {
       let hasFlag = false;
-      if (runtimeFlags.DUMMY_TEST_FLAG) {
+      if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
         hasFlag = true;
       }
       window.dispatchEvent(new CustomEvent("has-dummy-flag", {
@@ -397,6 +414,15 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
     }
     return list;
   }
+  function setRefVNode(vm, ref, vnode) {
+    if (isUndefined$1(vm.refVNodes)) {
+      throw new Error("refVNodes must be defined when setting a ref");
+    }
+    const refVNodes = vm.refVNodes;
+    if (!(ref in refVNodes) || refVNodes[ref].key < vnode.key) {
+      refVNodes[ref] = vnode;
+    }
+  }
   const TargetToReactiveRecordMap = new WeakMap();
   function getReactiveRecord(target) {
     let reactiveRecord = TargetToReactiveRecordMap.get(target);
@@ -480,10 +506,17 @@ LWR.define("lwc/v/2_17_0", ["exports"], function(exports) {
     }
   }
   function componentValueMutated(vm, key) {
-    valueMutated(vm.component, key);
+    {
+      valueMutated(vm.component, key);
+    }
   }
   function componentValueObserved(vm, key) {
-    valueObserved(vm.component, key);
+    {
+      valueObserved(vm.component, key);
+    }
+  }
+  function createReactiveObserver(callback) {
+    return new ReactiveObserver(callback);
   }
   function getComponentTag(vm) {
     return `<${StringToLowerCase.call(vm.tagName)}>`;
@@ -546,9 +579,9 @@ ${getComponentStack(vm)}`;
   function isCircularModuleDependency(obj) {
     return isFunction$1(obj) && hasOwnProperty$1.call(obj, "__circular__");
   }
-  const HTMLElementConstructor$1 = typeof HTMLElement !== "undefined" ? HTMLElement : function() {
+  const HTMLElementConstructor = typeof HTMLElement !== "undefined" ? HTMLElement : function() {
   };
-  const HTMLElementPrototype = HTMLElementConstructor$1.prototype;
+  const HTMLElementPrototype = HTMLElementConstructor.prototype;
   const defaultDefHTMLPropertyNames = ["accessKey", "dir", "draggable", "hidden", "id", "lang", "spellcheck", "tabIndex", "title"];
   function offsetPropertyErrorMessage(name) {
     return `Using the \`${name}\` property is an anti-pattern because it rounds the value to an integer. Instead, use the \`getBoundingClientRect\` method to obtain fractional values for the size of an element and its position relative to the viewport.`;
@@ -708,12 +741,12 @@ ${getComponentStack(vm)}`;
         }
       })
     };
-    if (!options.isLight && !options.isPortal) {
+    if (!options.isLight && options.isSynthetic && !options.isPortal) {
       const {
-        appendChild: appendChild2,
-        insertBefore: insertBefore2,
-        removeChild: removeChild2,
-        replaceChild: replaceChild2
+        appendChild,
+        insertBefore,
+        removeChild,
+        replaceChild
       } = elm;
       const originalNodeValueDescriptor = getPropertyDescriptor(elm, "nodeValue");
       const originalInnerHTMLDescriptor = getPropertyDescriptor(elm, "innerHTML");
@@ -722,7 +755,7 @@ ${getComponentStack(vm)}`;
         appendChild: generateDataDescriptor({
           value(aChild) {
             logMissingPortalError("appendChild", "method");
-            return appendChild2.call(this, aChild);
+            return appendChild.call(this, aChild);
           }
         }),
         insertBefore: generateDataDescriptor({
@@ -730,7 +763,7 @@ ${getComponentStack(vm)}`;
             if (!isDomMutationAllowed) {
               logMissingPortalError("insertBefore", "method");
             }
-            return insertBefore2.call(this, newNode, referenceNode);
+            return insertBefore.call(this, newNode, referenceNode);
           }
         }),
         removeChild: generateDataDescriptor({
@@ -738,13 +771,13 @@ ${getComponentStack(vm)}`;
             if (!isDomMutationAllowed) {
               logMissingPortalError("removeChild", "method");
             }
-            return removeChild2.call(this, aChild);
+            return removeChild.call(this, aChild);
           }
         }),
         replaceChild: generateDataDescriptor({
           value(newChild, oldChild) {
             logMissingPortalError("replaceChild", "method");
-            return replaceChild2.call(this, newChild, oldChild);
+            return replaceChild.call(this, newChild, oldChild);
           }
         }),
         nodeValue: generateAccessorDescriptor({
@@ -937,6 +970,15 @@ ${getComponentStack(vm)}`;
   function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
   }
+  function updateComponentValue(vm, key, newValue) {
+    const {
+      cmpFields
+    } = vm;
+    if (newValue !== cmpFields[key]) {
+      cmpFields[key] = newValue;
+      componentValueMutated(vm, key);
+    }
+  }
   const {
     isArray
   } = Array;
@@ -1390,7 +1432,7 @@ ${getComponentStack(vm)}`;
     }
     return {};
   }
-  function init() {
+  function init$1() {
     if (false) {
       throw new ReferenceError();
     }
@@ -1400,7 +1442,7 @@ ${getComponentStack(vm)}`;
     global2.devtoolsFormatters = devtoolsFormatters;
   }
   if (true) {
-    init();
+    init$1();
   }
   function defaultValueIsObservable(value) {
     if (value === null) {
@@ -1487,6 +1529,17 @@ ${getComponentStack(vm)}`;
   function unwrap(value) {
     return reactiveMembrane.unwrapProxy(value);
   }
+  function getReadOnlyProxy(value) {
+    return reactiveMembrane.getReadOnlyProxy(value);
+  }
+  function getReactiveProxy(value) {
+    return reactiveMembrane.getProxy(value);
+  }
+  function markLockerLiveObject(obj) {
+    {
+      obj[lockerLivePropertyKey] = void 0;
+    }
+  }
   function createBridgeToElementDescriptor(propName, descriptor) {
     const {
       get,
@@ -1529,17 +1582,16 @@ ${getComponentStack(vm)}`;
           assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
           assert.invariant(!isObject(newValue) || isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
         }
-        if (newValue !== vm.cmpProps[propName]) {
-          vm.cmpProps[propName] = newValue;
-          componentValueMutated(vm, propName);
-        }
+        updateComponentValue(vm, propName, newValue);
         return set.call(vm.elm, newValue);
       }
     };
   }
+  const EMPTY_REFS = freeze(create(null));
+  const refsCache = new WeakMap();
   const LightningElement = function() {
     if (isNull(vmBeingConstructed)) {
-      throw new ReferenceError("Illegal constructor");
+      throw new TypeError("Illegal constructor");
     }
     const vm = vmBeingConstructed;
     const {
@@ -1551,9 +1603,9 @@ ${getComponentStack(vm)}`;
     } = def;
     if (true) {
       const {
-        assertInstanceOfHTMLElement: assertInstanceOfHTMLElement2
+        assertInstanceOfHTMLElement
       } = vm.renderer;
-      assertInstanceOfHTMLElement2(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;
     setPrototypeOf(elm, bridge.prototype);
@@ -1568,7 +1620,7 @@ ${getComponentStack(vm)}`;
       vm.setHook = setHook2;
       vm.getHook = getHook2;
     }
-    this[lockerLivePropertyKey] = void 0;
+    markLockerLiveObject(this);
     associateVM(component, vm);
     associateVM(elm, vm);
     if (vm.renderMode === 1) {
@@ -1591,10 +1643,10 @@ ${getComponentStack(vm)}`;
         ctor
       },
       renderer: {
-        attachShadow: attachShadow2
+        attachShadow
       }
     } = vm;
-    const shadowRoot = attachShadow2(elm, {
+    const shadowRoot = attachShadow(elm, {
       [KEY__SYNTHETIC_MODE]: shadowMode === 1,
       delegatesFocus: Boolean(ctor.delegatesFocus),
       mode
@@ -1618,17 +1670,17 @@ ${getComponentStack(vm)}`;
       const {
         elm,
         renderer: {
-          dispatchEvent: dispatchEvent2
+          dispatchEvent
         }
       } = vm;
-      return dispatchEvent2(elm, event);
+      return dispatchEvent(elm, event);
     },
     addEventListener(type, listener, options) {
       const vm = getAssociatedVM(this);
       const {
         elm,
         renderer: {
-          addEventListener: addEventListener2
+          addEventListener
         }
       } = vm;
       if (true) {
@@ -1638,60 +1690,60 @@ ${getComponentStack(vm)}`;
         assert.invariant(isFunction$1(listener), `Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
       }
       const wrappedListener = getWrappedComponentsListener(vm, listener);
-      addEventListener2(elm, type, wrappedListener, options);
+      addEventListener(elm, type, wrappedListener, options);
     },
     removeEventListener(type, listener, options) {
       const vm = getAssociatedVM(this);
       const {
         elm,
         renderer: {
-          removeEventListener: removeEventListener2
+          removeEventListener
         }
       } = vm;
       const wrappedListener = getWrappedComponentsListener(vm, listener);
-      removeEventListener2(elm, type, wrappedListener, options);
+      removeEventListener(elm, type, wrappedListener, options);
     },
     hasAttribute(name) {
       const vm = getAssociatedVM(this);
       const {
         elm,
         renderer: {
-          getAttribute: getAttribute2
+          getAttribute
         }
       } = vm;
-      return !isNull(getAttribute2(elm, name));
+      return !isNull(getAttribute(elm, name));
     },
     hasAttributeNS(namespace, name) {
       const vm = getAssociatedVM(this);
       const {
         elm,
         renderer: {
-          getAttribute: getAttribute2
+          getAttribute
         }
       } = vm;
-      return !isNull(getAttribute2(elm, name, namespace));
+      return !isNull(getAttribute(elm, name, namespace));
     },
     removeAttribute(name) {
       const vm = getAssociatedVM(this);
       const {
         elm,
         renderer: {
-          removeAttribute: removeAttribute2
+          removeAttribute
         }
       } = vm;
       unlockAttribute(elm, name);
-      removeAttribute2(elm, name);
+      removeAttribute(elm, name);
       lockAttribute();
     },
     removeAttributeNS(namespace, name) {
       const {
         elm,
         renderer: {
-          removeAttribute: removeAttribute2
+          removeAttribute
         }
       } = getAssociatedVM(this);
       unlockAttribute(elm, name);
-      removeAttribute2(elm, name, namespace);
+      removeAttribute(elm, name, namespace);
       lockAttribute();
     },
     getAttribute(name) {
@@ -1700,9 +1752,9 @@ ${getComponentStack(vm)}`;
         elm
       } = vm;
       const {
-        getAttribute: getAttribute2
+        getAttribute
       } = vm.renderer;
-      return getAttribute2(elm, name);
+      return getAttribute(elm, name);
     },
     getAttributeNS(namespace, name) {
       const vm = getAssociatedVM(this);
@@ -1710,23 +1762,23 @@ ${getComponentStack(vm)}`;
         elm
       } = vm;
       const {
-        getAttribute: getAttribute2
+        getAttribute
       } = vm.renderer;
-      return getAttribute2(elm, name, namespace);
+      return getAttribute(elm, name, namespace);
     },
     setAttribute(name, value) {
       const vm = getAssociatedVM(this);
       const {
         elm,
         renderer: {
-          setAttribute: setAttribute2
+          setAttribute
         }
       } = vm;
       if (true) {
         assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
       }
       unlockAttribute(elm, name);
-      setAttribute2(elm, name, value);
+      setAttribute(elm, name, value);
       lockAttribute();
     },
     setAttributeNS(namespace, name, value) {
@@ -1734,14 +1786,14 @@ ${getComponentStack(vm)}`;
       const {
         elm,
         renderer: {
-          setAttribute: setAttribute2
+          setAttribute
         }
       } = vm;
       if (true) {
         assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
       }
       unlockAttribute(elm, name);
-      setAttribute2(elm, name, value, namespace);
+      setAttribute(elm, name, value, namespace);
       lockAttribute();
     },
     getBoundingClientRect() {
@@ -1749,36 +1801,36 @@ ${getComponentStack(vm)}`;
       const {
         elm,
         renderer: {
-          getBoundingClientRect: getBoundingClientRect2
+          getBoundingClientRect
         }
       } = vm;
       if (true) {
         warnIfInvokedDuringConstruction(vm, "getBoundingClientRect()");
       }
-      return getBoundingClientRect2(elm);
+      return getBoundingClientRect(elm);
     },
     get isConnected() {
       const vm = getAssociatedVM(this);
       const {
         elm,
         renderer: {
-          isConnected: isConnected2
+          isConnected
         }
       } = vm;
-      return isConnected2(elm);
+      return isConnected(elm);
     },
     get classList() {
       const vm = getAssociatedVM(this);
       const {
         elm,
         renderer: {
-          getClassList: getClassList2
+          getClassList
         }
       } = vm;
       if (true) {
         assert.isFalse(isBeingConstructed(vm), `Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
       }
-      return getClassList2(elm);
+      return getClassList(elm);
     },
     get template() {
       const vm = getAssociatedVM(this);
@@ -1789,6 +1841,50 @@ ${getComponentStack(vm)}`;
       }
       return vm.shadowRoot;
     },
+    get refs() {
+      const vm = getAssociatedVM(this);
+      if (isUpdatingTemplate) {
+        if (true) {
+          logError(`this.refs should not be called while ${getComponentTag(vm)} is rendering. Use this.refs only when the DOM is stable, e.g. in renderedCallback().`);
+        }
+        return;
+      }
+      if (true) {
+        warnIfInvokedDuringConstruction(vm, "refs");
+      }
+      const {
+        refVNodes,
+        hasRefVNodes,
+        cmpTemplate
+      } = vm;
+      if (isNull(cmpTemplate) && !isBeingConstructed(vm)) {
+        logError(`this.refs is undefined for ${getComponentTag(vm)}. This is either because the attached template has no "lwc:ref" directive, or this.refs was invoked before renderedCallback(). Use this.refs only when the referenced HTML elements have been rendered to the DOM, such as within renderedCallback() or disconnectedCallback().`);
+      }
+      if (!hasRefVNodes) {
+        return;
+      }
+      if (isNull(refVNodes)) {
+        return EMPTY_REFS;
+      }
+      let refs = refsCache.get(refVNodes);
+      if (isUndefined$1(refs)) {
+        refs = create(null);
+        for (const key of keys(refVNodes)) {
+          refs[key] = refVNodes[key].elm;
+        }
+        freeze(refs);
+        refsCache.set(refVNodes, refs);
+      }
+      return refs;
+    },
+    set refs(value) {
+      defineProperty(this, "refs", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value
+      });
+    },
     get shadowRoot() {
       return null;
     },
@@ -1875,6 +1971,12 @@ ${getComponentStack(vm)}`;
     lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
   }
   defineProperties(LightningElement.prototype, lightningBasedDescriptors);
+  function applyAriaReflectionToLightningElement() {
+    applyAriaReflection(LightningElement.prototype);
+  }
+  if (lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
+    applyAriaReflectionToLightningElement();
+  }
   defineProperty(LightningElement, "CustomElementConstructor", {
     get() {
       throw new ReferenceError("The current runtime does not support CustomElementConstructor.");
@@ -1893,10 +1995,7 @@ ${getComponentStack(vm)}`;
       },
       set(newValue) {
         const vm = getAssociatedVM(this);
-        if (newValue !== vm.cmpFields[key]) {
-          vm.cmpFields[key] = newValue;
-          componentValueMutated(vm, key);
-        }
+        updateComponentValue(vm, key, newValue);
       },
       enumerable: true,
       configurable: true
@@ -1935,40 +2034,6 @@ ${getComponentStack(vm)}`;
       configurable: true
     };
   }
-  class AccessorReactiveObserver extends ReactiveObserver {
-    constructor(vm, set) {
-      super(() => {
-        if (isFalse(this.debouncing)) {
-          this.debouncing = true;
-          addCallbackToNextTick(() => {
-            if (isTrue(this.debouncing)) {
-              const {
-                value
-              } = this;
-              const {
-                isDirty: dirtyStateBeforeSetterCall,
-                component,
-                idx: idx2
-              } = vm;
-              set.call(component, value);
-              this.debouncing = false;
-              if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && idx2 > 0) {
-                rerenderVM(vm);
-              }
-            }
-          });
-        }
-      });
-      this.debouncing = false;
-    }
-    reset(value) {
-      super.reset();
-      this.debouncing = false;
-      if (arguments.length > 0) {
-        this.value = value;
-      }
-    }
-  }
   function createPublicAccessorDescriptor(key, descriptor) {
     const {
       get,
@@ -1997,18 +2062,7 @@ ${getComponentStack(vm)}`;
           assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered2} has side effects on the state of ${vm}.${toString$1(key)}`);
         }
         if (set) {
-          if (runtimeFlags.ENABLE_REACTIVE_SETTER) {
-            let ro = vm.oar[key];
-            if (isUndefined$1(ro)) {
-              ro = vm.oar[key] = new AccessorReactiveObserver(vm, set);
-            }
-            ro.reset(newValue);
-            ro.observe(() => {
-              set.call(this, newValue);
-            });
-          } else {
-            set.call(this, newValue);
-          }
+          set.call(this, newValue);
         } else if (true) {
           assert.fail(`Invalid attempt to set a new value for property ${toString$1(key)} of ${vm} that does not has a setter decorated with @api.`);
         }
@@ -2019,7 +2073,7 @@ ${getComponentStack(vm)}`;
   }
   function track(target) {
     if (arguments.length === 1) {
-      return reactiveMembrane.getProxy(target);
+      return getReactiveProxy(target);
     }
     if (true) {
       assert.fail(`@track decorator can only be used with one argument to return a trackable object, or as a decorator function.`);
@@ -2040,11 +2094,8 @@ ${getComponentStack(vm)}`;
           assert.invariant(!isInvokingRender, `${vmBeingRendered2}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
           assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered2} has side effects on the state of ${vm}.${toString$1(key)}`);
         }
-        const reactiveOrAnyValue = reactiveMembrane.getProxy(newValue);
-        if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-          vm.cmpFields[key] = reactiveOrAnyValue;
-          componentValueMutated(vm, key);
-        }
+        const reactiveOrAnyValue = getReactiveProxy(newValue);
+        updateComponentValue(vm, key, reactiveOrAnyValue);
       },
       enumerable: true,
       configurable: true
@@ -2065,10 +2116,7 @@ ${getComponentStack(vm)}`;
       },
       set(value) {
         const vm = getAssociatedVM(this);
-        if (value !== vm.cmpFields[key]) {
-          vm.cmpFields[key] = value;
-          componentValueMutated(vm, key);
-        }
+        updateComponentValue(vm, key, value);
       },
       enumerable: true,
       configurable: true
@@ -2306,25 +2354,6 @@ No further warnings will appear.`);
       checkVersionMismatch(tpl, "template");
     }
     signedTemplateSet.add(tpl);
-    defineProperty(tpl, "stylesheetTokens", {
-      enumerable: true,
-      configurable: true,
-      get() {
-        const {
-          stylesheetToken
-        } = this;
-        if (isUndefined$1(stylesheetToken)) {
-          return stylesheetToken;
-        }
-        return {
-          hostAttribute: `${stylesheetToken}-host`,
-          shadowAttribute: stylesheetToken
-        };
-      },
-      set(value) {
-        this.stylesheetToken = isUndefined$1(value) ? void 0 : value.shadowAttribute;
-      }
-    });
     return tpl;
   }
   function sanitizeAttribute(tagName, namespaceUri, attrName, attrValue) {
@@ -2353,7 +2382,7 @@ No further warnings will appear.`);
         const {
           setHook: setHook2
         } = vm;
-        newValue = reactiveMembrane.getReadOnlyProxy(newValue);
+        newValue = getReadOnlyProxy(newValue);
         setHook2(vm.component, key, newValue);
       };
     }
@@ -2442,7 +2471,12 @@ No further warnings will appear.`);
     defineProperties(HTMLBridgeElement.prototype, descriptors);
     return HTMLBridgeElement;
   }
-  const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor$1, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+  const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+  {
+    if (lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
+      applyAriaReflection(BaseBridgeElement.prototype);
+    }
+  }
   freeze(BaseBridgeElement);
   seal(BaseBridgeElement.prototype);
   const swappedTemplateMap = new WeakMap();
@@ -2496,12 +2530,10 @@ No further warnings will appear.`);
     if (false) {
       throw new ReferenceError();
     }
-    if (runtimeFlags.ENABLE_HMR) {
-      const visited = new Set();
-      while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
-        visited.add(tpl);
-        tpl = swappedTemplateMap.get(tpl);
-      }
+    const visited = new Set();
+    while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
+      visited.add(tpl);
+      tpl = swappedTemplateMap.get(tpl);
     }
     return tpl;
   }
@@ -2509,12 +2541,10 @@ No further warnings will appear.`);
     if (false) {
       throw new ReferenceError();
     }
-    if (runtimeFlags.ENABLE_HMR) {
-      const visited = new Set();
-      while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
-        visited.add(Ctor);
-        Ctor = swappedComponentMap.get(Ctor);
-      }
+    const visited = new Set();
+    while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
+      visited.add(Ctor);
+      Ctor = swappedComponentMap.get(Ctor);
     }
     return Ctor;
   }
@@ -2522,12 +2552,10 @@ No further warnings will appear.`);
     if (false) {
       throw new ReferenceError();
     }
-    if (runtimeFlags.ENABLE_HMR) {
-      const visited = new Set();
-      while (swappedStyleMap.has(style) && !visited.has(style)) {
-        visited.add(style);
-        style = swappedStyleMap.get(style);
-      }
+    const visited = new Set();
+    while (swappedStyleMap.has(style) && !visited.has(style)) {
+      visited.add(style);
+      style = swappedStyleMap.get(style);
     }
     return style;
   }
@@ -2535,34 +2563,32 @@ No further warnings will appear.`);
     if (false) {
       throw new ReferenceError();
     }
-    if (runtimeFlags.ENABLE_HMR) {
-      const Ctor = vm.def.ctor;
-      let componentVMs = activeComponents.get(Ctor);
-      if (isUndefined$1(componentVMs)) {
-        componentVMs = new Set();
-        activeComponents.set(Ctor, componentVMs);
-      }
-      componentVMs.add(vm);
-      const tpl = vm.cmpTemplate;
-      if (tpl) {
-        let templateVMs = activeTemplates.get(tpl);
-        if (isUndefined$1(templateVMs)) {
-          templateVMs = new Set();
-          activeTemplates.set(tpl, templateVMs);
-        }
-        templateVMs.add(vm);
-        const stylesheets = tpl.stylesheets;
-        if (!isUndefined$1(stylesheets)) {
-          flattenStylesheets(stylesheets).forEach((stylesheet) => {
-            stylesheet = getStyleOrSwappedStyle(stylesheet);
-            let stylesheetVMs = activeStyles.get(stylesheet);
-            if (isUndefined$1(stylesheetVMs)) {
-              stylesheetVMs = new Set();
-              activeStyles.set(stylesheet, stylesheetVMs);
-            }
-            stylesheetVMs.add(vm);
-          });
-        }
+    const Ctor = vm.def.ctor;
+    let componentVMs = activeComponents.get(Ctor);
+    if (isUndefined$1(componentVMs)) {
+      componentVMs = new Set();
+      activeComponents.set(Ctor, componentVMs);
+    }
+    componentVMs.add(vm);
+    const tpl = vm.cmpTemplate;
+    if (tpl) {
+      let templateVMs = activeTemplates.get(tpl);
+      if (isUndefined$1(templateVMs)) {
+        templateVMs = new Set();
+        activeTemplates.set(tpl, templateVMs);
+      }
+      templateVMs.add(vm);
+      const stylesheets = tpl.stylesheets;
+      if (!isUndefined$1(stylesheets)) {
+        flattenStylesheets(stylesheets).forEach((stylesheet) => {
+          stylesheet = getStyleOrSwappedStyle(stylesheet);
+          let stylesheetVMs = activeStyles.get(stylesheet);
+          if (isUndefined$1(stylesheetVMs)) {
+            stylesheetVMs = new Set();
+            activeStyles.set(stylesheet, stylesheetVMs);
+          }
+          stylesheetVMs.add(vm);
+        });
       }
     }
   }
@@ -2570,27 +2596,25 @@ No further warnings will appear.`);
     if (false) {
       throw new ReferenceError();
     }
-    if (runtimeFlags.ENABLE_HMR) {
-      const Ctor = vm.def.ctor;
-      let list = activeComponents.get(Ctor);
+    const Ctor = vm.def.ctor;
+    let list = activeComponents.get(Ctor);
+    if (!isUndefined$1(list)) {
+      list.delete(vm);
+    }
+    const tpl = vm.cmpTemplate;
+    if (tpl) {
+      list = activeTemplates.get(tpl);
       if (!isUndefined$1(list)) {
         list.delete(vm);
       }
-      const tpl = vm.cmpTemplate;
-      if (tpl) {
-        list = activeTemplates.get(tpl);
-        if (!isUndefined$1(list)) {
-          list.delete(vm);
-        }
-        const styles = tpl.stylesheets;
-        if (!isUndefined$1(styles)) {
-          flattenStylesheets(styles).forEach((style) => {
-            list = activeStyles.get(style);
-            if (!isUndefined$1(list)) {
-              list.delete(vm);
-            }
-          });
-        }
+      const styles = tpl.stylesheets;
+      if (!isUndefined$1(styles)) {
+        flattenStylesheets(styles).forEach((style) => {
+          list = activeStyles.get(style);
+          if (!isUndefined$1(list)) {
+            list.delete(vm);
+          }
+        });
       }
     }
   }
@@ -2603,9 +2627,6 @@ No further warnings will appear.`);
         throw new TypeError(`Invalid Template`);
       }
     }
-    if (!runtimeFlags.ENABLE_HMR) {
-      throw new Error("HMR is not enabled");
-    }
     return false;
   }
   function swapComponent(oldComponent, newComponent) {
@@ -2617,9 +2638,6 @@ No further warnings will appear.`);
         throw new TypeError(`Invalid Component`);
       }
     }
-    if (!runtimeFlags.ENABLE_HMR) {
-      throw new Error("HMR is not enabled");
-    }
     return false;
   }
   function swapStyle(oldStyle, newStyle) {
@@ -2627,9 +2645,6 @@ No further warnings will appear.`);
       swappedStyleMap.set(oldStyle, newStyle);
       return rehydrateHotStyle(oldStyle);
     }
-    if (!runtimeFlags.ENABLE_HMR) {
-      throw new Error("HMR is not enabled");
-    }
     return false;
   }
   const CtorToDefMap = new WeakMap();
@@ -2813,111 +2828,321 @@ No further warnings will appear.`);
       methods: publicMethods
     };
   }
-  function getUpgradableConstructor(tagName, renderer2) {
-    const {
-      getCustomElement: getCustomElement2,
-      HTMLElementExported: RendererHTMLElement,
-      defineCustomElement: defineCustomElement2
-    } = renderer2;
-    tagName = tagName.toLowerCase();
-    let CE = getCustomElement2(tagName);
-    if (!isUndefined$1(CE)) {
-      return CE;
-    }
-    CE = class LWCUpgradableElement extends RendererHTMLElement {
-      constructor(upgradeCallback) {
-        super();
-        if (isFunction$1(upgradeCallback)) {
-          upgradeCallback(this);
-        }
+  function makeHostToken(token) {
+    return `${token}-host`;
+  }
+  function createInlineStyleVNode(content) {
+    return api.h("style", {
+      key: "style",
+      attrs: {
+        type: "text/css"
       }
-    };
-    defineCustomElement2(tagName, CE);
-    return CE;
+    }, [api.t(content)]);
   }
-  function isVBaseElement(vnode) {
+  function updateStylesheetToken(vm, template) {
     const {
-      type
-    } = vnode;
-    return type === 2 || type === 3;
-  }
-  function isSameVnode(vnode1, vnode2) {
-    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
-  }
-  const ColonCharCode = 58;
-  function patchAttributes(oldVnode, vnode, renderer2) {
+      elm,
+      context,
+      renderMode,
+      shadowMode,
+      renderer: {
+        getClassList,
+        removeAttribute,
+        setAttribute
+      }
+    } = vm;
     const {
-      attrs
-    } = vnode.data;
-    if (isUndefined$1(attrs)) {
-      return;
-    }
-    const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
-    if (oldAttrs === attrs) {
-      return;
-    }
+      stylesheets: newStylesheets,
+      stylesheetToken: newStylesheetToken
+    } = template;
+    const isSyntheticShadow = renderMode === 1 && shadowMode === 1;
     const {
-      elm
-    } = vnode;
+      hasScopedStyles
+    } = context;
+    let newToken;
+    let newHasTokenInClass;
+    let newHasTokenInAttribute;
     const {
-      setAttribute: setAttribute2,
-      removeAttribute: removeAttribute2
-    } = renderer2;
-    for (const key in attrs) {
-      const cur = attrs[key];
-      const old = oldAttrs[key];
-      if (old !== cur) {
-        unlockAttribute(elm, key);
-        if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
-          setAttribute2(elm, key, cur, XML_NAMESPACE);
-        } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
-          setAttribute2(elm, key, cur, XLINK_NAMESPACE);
-        } else if (isNull(cur) || isUndefined$1(cur)) {
-          removeAttribute2(elm, key);
-        } else {
-          setAttribute2(elm, key, cur);
-        }
-        lockAttribute();
+      stylesheetToken: oldToken,
+      hasTokenInClass: oldHasTokenInClass,
+      hasTokenInAttribute: oldHasTokenInAttribute
+    } = context;
+    if (!isUndefined$1(oldToken)) {
+      if (oldHasTokenInClass) {
+        getClassList(elm).remove(makeHostToken(oldToken));
+      }
+      if (oldHasTokenInAttribute) {
+        removeAttribute(elm, makeHostToken(oldToken));
       }
     }
-  }
-  function isLiveBindingProp(sel, key) {
-    return sel === "input" && (key === "value" || key === "checked");
-  }
-  function patchProps(oldVnode, vnode, renderer2) {
-    const {
-      props
-    } = vnode.data;
-    if (isUndefined$1(props)) {
-      return;
-    }
-    const oldProps = isNull(oldVnode) ? EmptyObject : oldVnode.data.props;
-    if (oldProps === props) {
-      return;
+    if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+      newToken = newStylesheetToken;
     }
-    const isFirstPatch = isNull(oldVnode);
-    const {
-      elm,
-      sel
-    } = vnode;
-    const {
-      getProperty: getProperty2,
-      setProperty: setProperty2
-    } = renderer2;
-    for (const key in props) {
-      const cur = props[key];
-      if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty2(elm, key) : oldProps[key])) {
-        setProperty2(elm, key, cur);
+    if (!isUndefined$1(newToken)) {
+      if (hasScopedStyles) {
+        getClassList(elm).add(makeHostToken(newToken));
+        newHasTokenInClass = true;
+      }
+      if (isSyntheticShadow) {
+        setAttribute(elm, makeHostToken(newToken), "");
+        newHasTokenInAttribute = true;
       }
     }
+    context.stylesheetToken = newToken;
+    context.hasTokenInClass = newHasTokenInClass;
+    context.hasTokenInAttribute = newHasTokenInAttribute;
   }
-  const classNameToClassMap = create(null);
-  function getMapFromClassName(className) {
-    if (className == null) {
-      return EmptyObject;
-    }
-    className = isString(className) ? className : className + "";
-    let map = classNameToClassMap[className];
+  function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
+    const content = [];
+    let root;
+    for (let i2 = 0; i2 < stylesheets.length; i2++) {
+      let stylesheet = stylesheets[i2];
+      if (isArray$1(stylesheet)) {
+        ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+      } else {
+        if (true) {
+          checkVersionMismatch(stylesheet, "stylesheet");
+          stylesheet = getStyleOrSwappedStyle(stylesheet);
+        }
+        const isScopedCss = stylesheet[KEY__SCOPED_CSS];
+        if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS) {
+          if (!isScopedCss && vm.renderMode === 0) {
+            logError("Unscoped CSS is not supported in Light DOM. Please use scoped CSS (*.scoped.css) instead of unscoped CSS (*.css).");
+            continue;
+          }
+        }
+        const scopeToken = isScopedCss || vm.shadowMode === 1 && vm.renderMode === 1 ? stylesheetToken : void 0;
+        const useActualHostSelector = vm.renderMode === 0 ? !isScopedCss : vm.shadowMode === 0;
+        let useNativeDirPseudoclass;
+        if (vm.renderMode === 1) {
+          useNativeDirPseudoclass = vm.shadowMode === 0;
+        } else {
+          if (isUndefined$1(root)) {
+            root = getNearestShadowComponent(vm);
+          }
+          useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0;
+        }
+        ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+      }
+    }
+    return content;
+  }
+  function getStylesheetsContent(vm, template) {
+    const {
+      stylesheets,
+      stylesheetToken
+    } = template;
+    let content = [];
+    if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
+      content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+    }
+    return content;
+  }
+  function getNearestShadowComponent(vm) {
+    let owner = vm;
+    while (!isNull(owner)) {
+      if (owner.renderMode === 1) {
+        return owner;
+      }
+      owner = owner.owner;
+    }
+    return owner;
+  }
+  function getScopeTokenClass(owner) {
+    const {
+      cmpTemplate,
+      context
+    } = owner;
+    return context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
+  }
+  function getStylesheetTokenHost(vnode) {
+    const {
+      template
+    } = getComponentInternalDef(vnode.ctor);
+    const {
+      stylesheetToken
+    } = template;
+    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
+  }
+  function getNearestNativeShadowComponent(vm) {
+    const owner = getNearestShadowComponent(vm);
+    if (!isNull(owner) && owner.shadowMode === 1) {
+      return null;
+    }
+    return owner;
+  }
+  function createStylesheet(vm, stylesheets) {
+    const {
+      renderMode,
+      shadowMode,
+      renderer: {
+        insertStylesheet: insertStylesheet2
+      }
+    } = vm;
+    if (renderMode === 1 && shadowMode === 1) {
+      for (let i2 = 0; i2 < stylesheets.length; i2++) {
+        insertStylesheet2(stylesheets[i2]);
+      }
+    } else if (vm.hydrated) {
+      return ArrayMap.call(stylesheets, createInlineStyleVNode);
+    } else {
+      const root = getNearestNativeShadowComponent(vm);
+      const target = isNull(root) ? void 0 : root.shadowRoot;
+      for (let i2 = 0; i2 < stylesheets.length; i2++) {
+        insertStylesheet2(stylesheets[i2], target);
+      }
+    }
+    return null;
+  }
+  function isVBaseElement(vnode) {
+    const {
+      type
+    } = vnode;
+    return type === 2 || type === 3;
+  }
+  function isSameVnode(vnode1, vnode2) {
+    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
+  }
+  function isVCustomElement(vnode) {
+    return vnode.type === 3;
+  }
+  function isVFragment(vnode) {
+    return vnode.type === 5;
+  }
+  function isVScopedSlotFragment(vnode) {
+    return vnode.type === 6;
+  }
+  const ColonCharCode$1 = 58;
+  function patchAttributes(oldVnode, vnode, renderer2) {
+    const {
+      attrs
+    } = vnode.data;
+    if (isUndefined$1(attrs)) {
+      return;
+    }
+    const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
+    if (oldAttrs === attrs) {
+      return;
+    }
+    const {
+      elm
+    } = vnode;
+    const {
+      setAttribute,
+      removeAttribute
+    } = renderer2;
+    for (const key in attrs) {
+      const cur = attrs[key];
+      const old = oldAttrs[key];
+      if (old !== cur) {
+        unlockAttribute(elm, key);
+        if (StringCharCodeAt.call(key, 3) === ColonCharCode$1) {
+          setAttribute(elm, key, cur, XML_NAMESPACE);
+        } else if (StringCharCodeAt.call(key, 5) === ColonCharCode$1) {
+          setAttribute(elm, key, cur, XLINK_NAMESPACE);
+        } else if (isNull(cur) || isUndefined$1(cur)) {
+          removeAttribute(elm, key);
+        } else {
+          setAttribute(elm, key, cur);
+        }
+        lockAttribute();
+      }
+    }
+  }
+  const ColonCharCode = 58;
+  function patchAttrUnlessProp(oldVnode, vnode, renderer2) {
+    const {
+      data: {
+        attrs
+      },
+      elm
+    } = vnode;
+    if (isUndefined$1(attrs)) {
+      return;
+    }
+    const {
+      removeAttribute,
+      setAttribute,
+      setProperty
+    } = renderer2;
+    const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
+    for (const name in attrs) {
+      const cur = attrs[name];
+      const old = oldAttrs[name];
+      if (old !== cur) {
+        const propName = htmlAttributeToProperty(name);
+        if (propName in elm) {
+          setProperty(elm, name, cur);
+        } else if (StringCharCodeAt.call(name, 3) === ColonCharCode) {
+          setAttribute(elm, name, cur, XML_NAMESPACE);
+        } else if (StringCharCodeAt.call(name, 5) === ColonCharCode) {
+          setAttribute(elm, name, cur, XLINK_NAMESPACE);
+        } else if (isNull(cur) || isUndefined$1(cur)) {
+          removeAttribute(elm, name);
+        } else {
+          setAttribute(elm, name, cur);
+        }
+      }
+    }
+  }
+  function isLiveBindingProp(sel, key) {
+    return sel === "input" && (key === "value" || key === "checked");
+  }
+  function patchProps(oldVnode, vnode, renderer2) {
+    let {
+      props
+    } = vnode.data;
+    const {
+      spread
+    } = vnode.data;
+    if (isUndefined$1(props) && isUndefined$1(spread)) {
+      return;
+    }
+    let oldProps;
+    if (!isNull(oldVnode)) {
+      oldProps = oldVnode.data.props;
+      const oldSpread = oldVnode.data.spread;
+      if (oldProps === props && oldSpread === spread) {
+        return;
+      }
+      if (isUndefined$1(oldProps)) {
+        oldProps = EmptyObject;
+      }
+      if (!isUndefined$1(oldSpread)) {
+        oldProps = assign({}, oldProps, oldSpread);
+      }
+    }
+    if (!isUndefined$1(spread)) {
+      props = assign({}, props, spread);
+    }
+    const isFirstPatch = isNull(oldVnode);
+    const {
+      elm,
+      sel
+    } = vnode;
+    const {
+      getProperty,
+      setProperty
+    } = renderer2;
+    for (const key in props) {
+      const cur = props[key];
+      if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key]) || !(key in oldProps)) {
+        if (true) {
+          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);
+      }
+    }
+  }
+  const classNameToClassMap = create(null);
+  function getMapFromClassName(className) {
+    if (className == null) {
+      return EmptyObject;
+    }
+    className = isString(className) ? className : className + "";
+    let map = classNameToClassMap[className];
     if (map) {
       return map;
     }
@@ -2954,9 +3179,9 @@ No further warnings will appear.`);
       return;
     }
     const {
-      getClassList: getClassList2
+      getClassList
     } = renderer2;
-    const classList = getClassList2(elm);
+    const classList = getClassList(elm);
     const newClassMap = getMapFromClassName(newClass);
     const oldClassMap = getMapFromClassName(oldClass);
     let name;
@@ -2983,13 +3208,13 @@ No further warnings will appear.`);
       return;
     }
     const {
-      setAttribute: setAttribute2,
-      removeAttribute: removeAttribute2
+      setAttribute,
+      removeAttribute
     } = renderer2;
     if (!isString(newStyle) || newStyle === "") {
-      removeAttribute2(elm, "style");
+      removeAttribute(elm, "style");
     } else {
-      setAttribute2(elm, "style", newStyle);
+      setAttribute(elm, "style", newStyle);
     }
   }
   function applyEventListeners(vnode, renderer2) {
@@ -3003,11 +3228,11 @@ No further warnings will appear.`);
       return;
     }
     const {
-      addEventListener: addEventListener2
+      addEventListener
     } = renderer2;
     for (const name in on) {
       const handler = on[name];
-      addEventListener2(elm, name, handler);
+      addEventListener(elm, name, handler);
     }
   }
   function applyStaticClassAttribute(vnode, renderer2) {
@@ -3021,9 +3246,9 @@ No further warnings will appear.`);
       return;
     }
     const {
-      getClassList: getClassList2
+      getClassList
     } = renderer2;
-    const classList = getClassList2(elm);
+    const classList = getClassList(elm);
     for (const name in classMap) {
       classList.add(name);
     }
@@ -3039,11 +3264,11 @@ No further warnings will appear.`);
       return;
     }
     const {
-      setCSSStyleProperty: setCSSStyleProperty2
+      setCSSStyleProperty
     } = renderer2;
     for (let i2 = 0; i2 < styleDecls.length; i2++) {
       const [prop, value, important] = styleDecls[i2];
-      setCSSStyleProperty2(elm, prop, value, important);
+      setCSSStyleProperty(elm, prop, value, important);
     }
   }
   function patchChildren(c1, c2, parent, renderer2) {
@@ -3053,7 +3278,7 @@ No further warnings will appear.`);
       updateStaticChildren(c1, c2, parent, renderer2);
     }
   }
-  function patch(n1, n2, renderer2) {
+  function patch(n1, n2, parent, renderer2) {
     var _a, _b;
     if (n1 === n2) {
       return;
@@ -3079,11 +3304,14 @@ No further warnings will appear.`);
       case 4:
         n2.elm = n1.elm;
         break;
+      case 5:
+        patchFragment(n1, n2, parent, renderer2);
+        break;
       case 2:
         patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer2);
         break;
       case 3:
-        patchCustomElement(n1, n2, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer2);
+        patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer2);
         break;
     }
   }
@@ -3099,6 +3327,9 @@ No further warnings will appear.`);
       case 4:
         mountStatic(node, parent, anchor, renderer2);
         break;
+      case 5:
+        mountFragment(node, parent, anchor, renderer2);
+        break;
       case 2:
         mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer2);
         break;
@@ -3118,9 +3349,9 @@ No further warnings will appear.`);
       owner
     } = vnode;
     const {
-      createText: createText2
+      createText
     } = renderer2;
-    const textNode = vnode.elm = createText2(vnode.text);
+    const textNode = vnode.elm = createText(vnode.text);
     linkNodeToShadow(textNode, owner, renderer2);
     insertNode(textNode, parent, anchor, renderer2);
   }
@@ -3135,12 +3366,31 @@ No further warnings will appear.`);
       owner
     } = vnode;
     const {
-      createComment: createComment2
+      createComment
     } = renderer2;
-    const commentNode = vnode.elm = createComment2(vnode.text);
+    const commentNode = vnode.elm = createComment(vnode.text);
     linkNodeToShadow(commentNode, owner, renderer2);
     insertNode(commentNode, parent, anchor, renderer2);
   }
+  function mountFragment(vnode, parent, anchor, renderer2) {
+    const {
+      children
+    } = vnode;
+    mountVNodes(children, parent, renderer2, anchor);
+    vnode.elm = children[children.length - 1].elm;
+  }
+  function patchFragment(n1, n2, parent, renderer2) {
+    const {
+      children,
+      stable
+    } = n2;
+    if (stable) {
+      updateStaticChildren(n1.children, children, parent, renderer2);
+    } else {
+      updateDynamicChildren(n1.children, children, parent, renderer2);
+    }
+    n2.elm = children[children.length - 1].elm;
+  }
   function mountElement(vnode, parent, anchor, renderer2) {
     const {
       sel,
@@ -3153,10 +3403,11 @@ No further warnings will appear.`);
       createElement: createElement2
     } = renderer2;
     const namespace = isTrue(svg) ? SVG_NAMESPACE : void 0;
-    const elm = createElement2(sel, namespace);
+    const elm = vnode.elm = createElement2(sel, namespace);
     linkNodeToShadow(elm, owner, renderer2);
-    fallbackElmHook(elm, vnode, renderer2);
-    vnode.elm = elm;
+    applyStyleScoping(elm, owner, renderer2);
+    applyDomManual(elm, vnode);
+    applyElementRestrictions(elm, vnode);
     patchElementPropsAndAttrs$1(null, vnode, renderer2);
     insertNode(elm, parent, anchor, renderer2);
     mountVNodes(vnode.children, elm, renderer2, null);
@@ -3171,27 +3422,21 @@ No further warnings will appear.`);
       owner
     } = vnode;
     const {
-      cloneNode: cloneNode2,
-      isSyntheticShadowDefined: isSyntheticShadowDefined2
+      cloneNode,
+      isSyntheticShadowDefined
     } = renderer2;
-    const elm = vnode.elm = cloneNode2(vnode.fragment, true);
+    const elm = vnode.elm = cloneNode(vnode.fragment, true);
     linkNodeToShadow(elm, owner, renderer2);
+    applyElementRestrictions(elm, vnode);
     const {
       renderMode,
       shadowMode
     } = owner;
-    if (isSyntheticShadowDefined2) {
+    if (isSyntheticShadowDefined) {
       if (shadowMode === 1 || renderMode === 0) {
         elm[KEY__SHADOW_STATIC] = true;
       }
     }
-    if (true) {
-      const isLight = renderMode === 0;
-      patchElementWithRestrictions(elm, {
-        isPortal: false,
-        isLight
-      });
-    }
     insertNode(elm, parent, anchor, renderer2);
   }
   function mountCustomElement(vnode, parent, anchor, renderer2) {
@@ -3199,42 +3444,65 @@ No further warnings will appear.`);
       sel,
       owner
     } = vnode;
-    const UpgradableConstructor = getUpgradableConstructor(sel, renderer2);
+    const {
+      createCustomElement: createCustomElement2
+    } = renderer2;
     let vm;
-    const elm = new UpgradableConstructor((elm2) => {
+    const upgradeCallback = (elm2) => {
       vm = createViewModelHook(elm2, vnode, renderer2);
-    });
-    linkNodeToShadow(elm, owner, renderer2);
+    };
+    let connectedCallback;
+    let disconnectedCallback;
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      connectedCallback = (elm2) => {
+        connectRootElement(elm2);
+      };
+      disconnectedCallback = (elm2) => {
+        disconnectRootElement(elm2);
+      };
+    }
+    const normalizedTagname = sel.toLowerCase();
+    const elm = createCustomElement2(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback);
     vnode.elm = elm;
     vnode.vm = vm;
+    linkNodeToShadow(elm, owner, renderer2);
+    applyStyleScoping(elm, owner, renderer2);
     if (vm) {
       allocateChildren(vnode, vm);
-    } else if (vnode.ctor !== UpgradableConstructor) {
-      throw new TypeError(`Incorrect Component Constructor`);
     }
     patchElementPropsAndAttrs$1(null, vnode, renderer2);
     insertNode(elm, parent, anchor, renderer2);
     if (vm) {
-      if (true) {
-        assert.isTrue(vm.state === 0, `${vm} cannot be recycled.`);
+      {
+        if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+          if (true) {
+            assert.isTrue(vm.state === 0, `${vm} cannot be recycled.`);
+          }
+          runConnectedCallback(vm);
+        }
       }
-      runConnectedCallback(vm);
     }
     mountVNodes(vnode.children, elm, renderer2, null);
     if (vm) {
       appendVM(vm);
     }
   }
-  function patchCustomElement(n1, n2, renderer2) {
-    const elm = n2.elm = n1.elm;
-    const vm = n2.vm = n1.vm;
-    patchElementPropsAndAttrs$1(n1, n2, renderer2);
-    if (!isUndefined$1(vm)) {
-      allocateChildren(n2, vm);
-    }
-    patchChildren(n1.children, n2.children, elm, renderer2);
-    if (!isUndefined$1(vm)) {
-      rerenderVM(vm);
+  function patchCustomElement(n1, n2, parent, renderer2) {
+    if (n1.ctor !== n2.ctor) {
+      const anchor = renderer2.nextSibling(n1.elm);
+      unmount(n1, parent, renderer2, true);
+      mountCustomElement(n2, parent, anchor, renderer2);
+    } else {
+      const elm = n2.elm = n1.elm;
+      const vm = n2.vm = n1.vm;
+      patchElementPropsAndAttrs$1(n1, n2, renderer2);
+      if (!isUndefined$1(vm)) {
+        allocateChildren(n2, vm);
+      }
+      patchChildren(n1.children, n2.children, elm, renderer2);
+      if (!isUndefined$1(vm)) {
+        rerenderVM(vm);
+      }
     }
   }
   function mountVNodes(vnodes, parent, renderer2, anchor, start2 = 0, end2 = vnodes.length) {
@@ -3252,7 +3520,11 @@ No further warnings will appear.`);
       sel
     } = vnode;
     if (doRemove) {
-      removeNode(elm, parent, renderer2);
+      if (type === 5) {
+        unmountVNodes(vnode.children, parent, renderer2, doRemove);
+      } else {
+        removeNode(elm, parent, renderer2);
+      }
     }
     switch (type) {
       case 2: {
@@ -3281,25 +3553,6 @@ No further warnings will appear.`);
   function isVNode(vnode) {
     return vnode != null;
   }
-  function observeElementChildNodes(elm) {
-    elm.$domManual$ = true;
-  }
-  function setElementShadowToken(elm, token) {
-    elm.$shadowToken$ = token;
-  }
-  function setScopeTokenClassIfNecessary(elm, owner, renderer2) {
-    const {
-      cmpTemplate,
-      context
-    } = owner;
-    const {
-      getClassList: getClassList2
-    } = renderer2;
-    const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
-    if (!isUndefined$1(token) && context.hasScopedStyles) {
-      getClassList2(elm).add(token);
-    }
-  }
   function linkNodeToShadow(elm, owner, renderer2) {
     const {
       renderRoot,
@@ -3307,9 +3560,9 @@ No further warnings will appear.`);
       shadowMode
     } = owner;
     const {
-      isSyntheticShadowDefined: isSyntheticShadowDefined2
+      isSyntheticShadowDefined
     } = renderer2;
-    if (isSyntheticShadowDefined2) {
+    if (isSyntheticShadowDefined) {
       if (shadowMode === 1 || renderMode === 0) {
         elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
       }
@@ -3321,12 +3574,12 @@ No further warnings will appear.`);
       text
     } = vnode;
     const {
-      setText: setText2
+      setText
     } = renderer2;
     if (true) {
       unlockDomMutation();
     }
-    setText2(elm, text);
+    setText(elm, text);
     if (true) {
       lockDomMutation();
     }
@@ -3357,41 +3610,50 @@ No further warnings will appear.`);
     }
     patchClassAttribute(oldVnode, vnode, renderer2);
     patchStyleAttribute(oldVnode, vnode, renderer2);
-    patchAttributes(oldVnode, vnode, renderer2);
+    if (vnode.data.external) {
+      patchAttrUnlessProp(oldVnode, vnode, renderer2);
+    } else {
+      patchAttributes(oldVnode, vnode, renderer2);
+    }
     patchProps(oldVnode, vnode, renderer2);
   }
-  function fallbackElmHook(elm, vnode, renderer2) {
-    const {
-      owner
-    } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer2);
-    if (owner.shadowMode === 1) {
-      const {
-        data: {
-          context
-        }
-      } = vnode;
+  function applyStyleScoping(elm, owner, renderer2) {
+    const scopeToken = getScopeTokenClass(owner);
+    if (!isNull(scopeToken)) {
       const {
-        stylesheetToken
-      } = owner.context;
-      if (!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual") {
-        observeElementChildNodes(elm);
-      }
-      if (!isUndefined$1(stylesheetToken)) {
-        setElementShadowToken(elm, stylesheetToken);
-      }
+        getClassList
+      } = renderer2;
+      getClassList(elm).add(scopeToken);
     }
-    if (true) {
-      const {
-        data: {
-          context
-        }
-      } = vnode;
-      const isPortal = !isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual";
-      const isLight = owner.renderMode === 0;
+    const {
+      stylesheetToken: syntheticToken
+    } = owner.context;
+    if (owner.shadowMode === 1 && !isUndefined$1(syntheticToken)) {
+      elm.$shadowToken$ = syntheticToken;
+    }
+  }
+  function applyDomManual(elm, vnode) {
+    var _a;
+    const {
+      owner,
+      data: {
+        context
+      }
+    } = vnode;
+    if (owner.shadowMode === 1 && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual") {
+      elm.$domManual$ = true;
+    }
+  }
+  function applyElementRestrictions(elm, vnode) {
+    var _a, _b;
+    if (true) {
+      const isSynthetic = vnode.owner.shadowMode === 1;
+      const isPortal = vnode.type === 2 && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual";
+      const isLight = vnode.owner.renderMode === 0;
       patchElementWithRestrictions(elm, {
         isPortal,
-        isLight
+        isLight,
+        isSynthetic
       });
     }
   }
@@ -3402,8 +3664,13 @@ No further warnings will appear.`);
       renderMode,
       shadowMode
     } = vm;
+    if (true) {
+      if (renderMode !== 0 && ArraySome.call(children, (child) => !isNull(child) && isVScopedSlotFragment(child))) {
+        logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
+      }
+    }
     if (shadowMode === 1 || renderMode === 0) {
-      allocateInSlot(vm, children);
+      allocateInSlot(vm, children, vnode.owner);
       vnode.aChildren = children;
       vnode.children = EmptyArray;
     }
@@ -3419,15 +3686,6 @@ No further warnings will appear.`);
       ctor,
       owner
     } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner, renderer2);
-    if (owner.shadowMode === 1) {
-      const {
-        stylesheetToken
-      } = owner.context;
-      if (!isUndefined$1(stylesheetToken)) {
-        setElementShadowToken(elm, stylesheetToken);
-      }
-    }
     vm = createVM(elm, ctor, renderer2, {
       mode,
       owner,
@@ -3438,39 +3696,54 @@ No further warnings will appear.`);
     }
     return vm;
   }
-  function allocateInSlot(vm, children) {
-    var _a;
-    const {
-      cmpSlots: oldSlots
-    } = vm;
-    const cmpSlots = vm.cmpSlots = create(null);
+  function collectSlots(vm, children, cmpSlotsMapping) {
+    var _a, _b;
     for (let i2 = 0, len = children.length; i2 < len; i2 += 1) {
       const vnode = children[i2];
       if (isNull(vnode)) {
         continue;
       }
+      if (isVFragment(vnode)) {
+        collectSlots(vm, vnode.children.slice(1, -1), cmpSlotsMapping);
+        continue;
+      }
       let slotName = "";
       if (isVBaseElement(vnode)) {
-        slotName = ((_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) || "";
+        slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : "";
+      } else if (isVScopedSlotFragment(vnode)) {
+        slotName = vnode.slotName;
       }
-      const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || [];
+      const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
       ArrayPush$1.call(vnodes, vnode);
     }
+  }
+  function allocateInSlot(vm, children, owner) {
+    const {
+      cmpSlots: {
+        slotAssignments: oldSlotsMapping
+      }
+    } = vm;
+    const cmpSlotsMapping = create(null);
+    collectSlots(vm, children, cmpSlotsMapping);
+    vm.cmpSlots = {
+      owner,
+      slotAssignments: cmpSlotsMapping
+    };
     if (isFalse(vm.isDirty)) {
-      const oldKeys = keys(oldSlots);
-      if (oldKeys.length !== keys(cmpSlots).length) {
+      const oldKeys = keys(oldSlotsMapping);
+      if (oldKeys.length !== keys(cmpSlotsMapping).length) {
         markComponentAsDirty(vm);
         return;
       }
       for (let i2 = 0, len = oldKeys.length; i2 < len; i2 += 1) {
         const key = oldKeys[i2];
-        if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
+        if (isUndefined$1(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[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) {
+        const oldVNodes = oldSlotsMapping[key];
+        const vnodes = cmpSlotsMapping[key];
+        for (let j = 0, a = cmpSlotsMapping[key].length; j < a; j += 1) {
           if (oldVNodes[j] !== vnodes[j]) {
             markComponentAsDirty(vm);
             return;
@@ -3526,20 +3799,20 @@ No further warnings will appear.`);
       } else if (!isVNode(newEndVnode)) {
         newEndVnode = newCh[--newEndIdx];
       } else if (isSameVnode(oldStartVnode, newStartVnode)) {
-        patch(oldStartVnode, newStartVnode, renderer2);
+        patch(oldStartVnode, newStartVnode, parent, renderer2);
         oldStartVnode = oldCh[++oldStartIdx];
         newStartVnode = newCh[++newStartIdx];
       } else if (isSameVnode(oldEndVnode, newEndVnode)) {
-        patch(oldEndVnode, newEndVnode, renderer2);
+        patch(oldEndVnode, newEndVnode, parent, renderer2);
         oldEndVnode = oldCh[--oldEndIdx];
         newEndVnode = newCh[--newEndIdx];
       } else if (isSameVnode(oldStartVnode, newEndVnode)) {
-        patch(oldStartVnode, newEndVnode, renderer2);
+        patch(oldStartVnode, newEndVnode, parent, renderer2);
         insertNode(oldStartVnode.elm, parent, renderer2.nextSibling(oldEndVnode.elm), renderer2);
         oldStartVnode = oldCh[++oldStartIdx];
         newEndVnode = newCh[--newEndIdx];
       } else if (isSameVnode(oldEndVnode, newStartVnode)) {
-        patch(oldEndVnode, newStartVnode, renderer2);
+        patch(oldEndVnode, newStartVnode, parent, renderer2);
         insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer2);
         oldEndVnode = oldCh[--oldEndIdx];
         newStartVnode = newCh[++newStartIdx];
@@ -3557,7 +3830,7 @@ No further warnings will appear.`);
             if (elmToMove.sel !== newStartVnode.sel) {
               mount(newStartVnode, parent, renderer2, oldStartVnode.elm);
             } else {
-              patch(elmToMove, newStartVnode, renderer2);
+              patch(elmToMove, newStartVnode, parent, renderer2);
               if (!clonedOldCh) {
                 clonedOldCh = true;
                 oldCh = [...oldCh];
@@ -3602,7 +3875,7 @@ No further warnings will appear.`);
       if (n2 !== n1) {
         if (isVNode(n1)) {
           if (isVNode(n2)) {
-            patch(n1, n2, renderer2);
+            patch(n1, n2, parent, renderer2);
             anchor = n2.elm;
           } else {
             unmount(n1, parent, renderer2, true);
@@ -3618,6 +3891,17 @@ No further warnings will appear.`);
   function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
   }
+  function ssf(slotName, factory) {
+    return {
+      type: 6,
+      factory,
+      owner: getVMBeingRendered(),
+      elm: void 0,
+      sel: void 0,
+      key: void 0,
+      slotName
+    };
+  }
   function st(fragment, key) {
     return {
       type: 4,
@@ -3628,6 +3912,17 @@ No further warnings will appear.`);
       owner: getVMBeingRendered()
     };
   }
+  function fr(key, children, stable) {
+    return {
+      type: 5,
+      sel: void 0,
+      key,
+      elm: void 0,
+      children: [t(""), ...children, t("")],
+      stable,
+      owner: getVMBeingRendered()
+    };
+  }
   function h(sel, data, children = EmptyArray) {
     const vmBeingRendered2 = getVMBeingRendered();
     if (true) {
@@ -3646,19 +3941,23 @@ No further warnings will appear.`);
         }
       });
     }
-    let elm;
     const {
-      key
+      key,
+      ref
     } = data;
-    return {
+    const vnode = {
       type: 2,
       sel,
       data,
       children,
-      elm,
+      elm: void 0,
       key,
       owner: vmBeingRendered2
     };
+    if (!isUndefined$1(ref)) {
+      setRefVNode(vmBeingRendered2, ref, vnode);
+    }
+    return vnode;
   }
   function ti(value) {
     const shouldNormalize = value > 0 && !(isTrue(value) || isFalse(value));
@@ -3676,8 +3975,34 @@ No further warnings will appear.`);
       assert.isTrue(isObject(data), `s() 2nd argument data must be an object.`);
       assert.isTrue(isArray$1(children), `h() 3rd argument children must be an array.`);
     }
-    if (!isUndefined$1(slotset) && !isUndefined$1(slotset[slotName]) && slotset[slotName].length !== 0) {
-      children = slotset[slotName];
+    if (!isUndefined$1(slotset) && !isUndefined$1(slotset.slotAssignments) && !isUndefined$1(slotset.slotAssignments[slotName]) && slotset.slotAssignments[slotName].length !== 0) {
+      const newChildren = [];
+      const slotAssignments = slotset.slotAssignments[slotName];
+      for (let i2 = 0; i2 < slotAssignments.length; i2++) {
+        const vnode = slotAssignments[i2];
+        if (!isNull(vnode)) {
+          const assignedNodeIsScopedSlot = isVScopedSlotFragment(vnode);
+          const isScopedSlotElement = !isUndefined$1(data.slotData);
+          if (assignedNodeIsScopedSlot !== isScopedSlotElement) {
+            if (true) {
+              logError(`Mismatched slot types for ${slotName === "" ? "(default)" : slotName} slot. Both parent and child component must use standard type or scoped type for a given slot.`, slotset.owner);
+            }
+            continue;
+          }
+          if (assignedNodeIsScopedSlot) {
+            const vmBeingRenderedInception = getVMBeingRendered();
+            setVMBeingRendered(slotset.owner);
+            try {
+              ArrayPush$1.call(newChildren, vnode.factory(data.slotData, data.key));
+            } finally {
+              setVMBeingRendered(vmBeingRenderedInception);
+            }
+          } else {
+            ArrayPush$1.call(newChildren, vnode);
+          }
+        }
+      }
+      children = newChildren;
     }
     const vmBeingRendered2 = getVMBeingRendered();
     const {
@@ -3714,7 +4039,8 @@ No further warnings will appear.`);
       }
     }
     const {
-      key
+      key,
+      ref
     } = data;
     let elm, aChildren, vm;
     const vnode = {
@@ -3731,6 +4057,9 @@ No further warnings will appear.`);
       vm
     };
     addVNodeToChildLWC(vnode);
+    if (!isUndefined$1(ref)) {
+      setRefVNode(vmBeingRendered2, ref, vnode);
+    }
     return vnode;
   }
   function i(iterable, factory) {
@@ -3827,13 +4156,13 @@ No further warnings will appear.`);
     };
   }
   function co(text) {
-    let sel, key, elm;
+    let sel, elm;
     return {
       type: 1,
       sel,
       text,
       elm,
-      key,
+      key: "c",
       owner: getVMBeingRendered()
     };
   }
@@ -3903,8 +4232,6 @@ No further warnings will appear.`);
     }
     return url;
   }
-  const DynamicImportedComponentMap = new Map();
-  let dynamicImportedComponentCounter = 0;
   function dc(sel, Ctor, data, children = EmptyArray) {
     if (true) {
       assert.isTrue(isString(sel), `dc() 1st argument sel must be a string.`);
@@ -3917,15 +4244,7 @@ No further warnings will appear.`);
     if (!isComponentConstructor(Ctor)) {
       throw new Error(`Invalid LWC Constructor ${toString$1(Ctor)} for custom element <${sel}>.`);
     }
-    let idx2 = DynamicImportedComponentMap.get(Ctor);
-    if (isUndefined$1(idx2)) {
-      idx2 = dynamicImportedComponentCounter++;
-      DynamicImportedComponentMap.set(Ctor, idx2);
-    }
-    const newData = Object.assign(Object.assign({}, data), {
-      key: `dc:${idx2}:${data.key}`
-    });
-    return c(sel, Ctor, newData, children);
+    return c(sel, Ctor, data, children);
   }
   function sc(vnodes) {
     if (true) {
@@ -3955,157 +4274,14 @@ No further warnings will appear.`);
     k,
     co,
     dc,
+    fr,
     ti,
     st,
     gid,
     fid,
-    shc
+    shc,
+    ssf
   });
-  function makeHostToken(token) {
-    return `${token}-host`;
-  }
-  function createInlineStyleVNode(content) {
-    return api.h("style", {
-      key: "style",
-      attrs: {
-        type: "text/css"
-      }
-    }, [api.t(content)]);
-  }
-  function updateStylesheetToken(vm, template) {
-    const {
-      elm,
-      context,
-      renderMode,
-      shadowMode,
-      renderer: {
-        getClassList: getClassList2,
-        removeAttribute: removeAttribute2,
-        setAttribute: setAttribute2
-      }
-    } = vm;
-    const {
-      stylesheets: newStylesheets,
-      stylesheetToken: newStylesheetToken
-    } = template;
-    const isSyntheticShadow = renderMode === 1 && shadowMode === 1;
-    const {
-      hasScopedStyles
-    } = context;
-    let newToken;
-    let newHasTokenInClass;
-    let newHasTokenInAttribute;
-    const {
-      stylesheetToken: oldToken,
-      hasTokenInClass: oldHasTokenInClass,
-      hasTokenInAttribute: oldHasTokenInAttribute
-    } = context;
-    if (!isUndefined$1(oldToken)) {
-      if (oldHasTokenInClass) {
-        getClassList2(elm).remove(makeHostToken(oldToken));
-      }
-      if (oldHasTokenInAttribute) {
-        removeAttribute2(elm, makeHostToken(oldToken));
-      }
-    }
-    if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
-      newToken = newStylesheetToken;
-    }
-    if (!isUndefined$1(newToken)) {
-      if (hasScopedStyles) {
-        getClassList2(elm).add(makeHostToken(newToken));
-        newHasTokenInClass = true;
-      }
-      if (isSyntheticShadow) {
-        setAttribute2(elm, makeHostToken(newToken), "");
-        newHasTokenInAttribute = true;
-      }
-    }
-    context.stylesheetToken = newToken;
-    context.hasTokenInClass = newHasTokenInClass;
-    context.hasTokenInAttribute = newHasTokenInAttribute;
-  }
-  function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
-    const content = [];
-    let root;
-    for (let i2 = 0; i2 < stylesheets.length; i2++) {
-      let stylesheet = stylesheets[i2];
-      if (isArray$1(stylesheet)) {
-        ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
-      } else {
-        if (true) {
-          checkVersionMismatch(stylesheet, "stylesheet");
-          stylesheet = getStyleOrSwappedStyle(stylesheet);
-        }
-        const isScopedCss = stylesheet[KEY__SCOPED_CSS];
-        const scopeToken = isScopedCss || vm.shadowMode === 1 && vm.renderMode === 1 ? stylesheetToken : void 0;
-        const useActualHostSelector = vm.renderMode === 0 ? !isScopedCss : vm.shadowMode === 0;
-        let useNativeDirPseudoclass;
-        if (vm.renderMode === 1) {
-          useNativeDirPseudoclass = vm.shadowMode === 0;
-        } else {
-          if (isUndefined$1(root)) {
-            root = getNearestShadowComponent(vm);
-          }
-          useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0;
-        }
-        ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
-      }
-    }
-    return content;
-  }
-  function getStylesheetsContent(vm, template) {
-    const {
-      stylesheets,
-      stylesheetToken
-    } = template;
-    let content = [];
-    if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-      content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-    }
-    return content;
-  }
-  function getNearestShadowComponent(vm) {
-    let owner = vm;
-    while (!isNull(owner)) {
-      if (owner.renderMode === 1) {
-        return owner;
-      }
-      owner = owner.owner;
-    }
-    return owner;
-  }
-  function getNearestNativeShadowComponent(vm) {
-    const owner = getNearestShadowComponent(vm);
-    if (!isNull(owner) && owner.shadowMode === 1) {
-      return null;
-    }
-    return owner;
-  }
-  function createStylesheet(vm, stylesheets) {
-    const {
-      renderMode,
-      shadowMode,
-      renderer: {
-        ssr: ssr2,
-        insertStylesheet: insertStylesheet2
-      }
-    } = vm;
-    if (renderMode === 1 && shadowMode === 1) {
-      for (let i2 = 0; i2 < stylesheets.length; i2++) {
-        insertStylesheet2(stylesheets[i2]);
-      }
-    } else if (ssr2 || vm.hydrated) {
-      return ArrayMap.call(stylesheets, createInlineStyleVNode);
-    } else {
-      const root = getNearestNativeShadowComponent(vm);
-      const target = isNull(root) ? void 0 : root.shadowRoot;
-      for (let i2 = 0; i2 < stylesheets.length; i2++) {
-        insertStylesheet2(stylesheets[i2], target);
-      }
-    }
-    return null;
-  }
   const operationIdNameMapping = ["constructor", "render", "patch", "connectedCallback", "renderedCallback", "disconnectedCallback", "errorCallback", "lwc-hydrate", "lwc-rehydrate"];
   const isUserTimingSupported = typeof performance !== "undefined" && typeof performance.mark === "function" && typeof performance.clearMarks === "function" && typeof performance.measure === "function" && typeof performance.clearMeasures === "function";
   const start = !isUserTimingSupported ? noop : (markName) => {
@@ -4203,8 +4379,8 @@ No further warnings will appear.`);
     const {
       slots = EmptyArray
     } = html;
-    for (const slotName in cmpSlots) {
-      assert.isTrue(isArray$1(cmpSlots[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots[slotName])} for slot "${slotName}" in ${vm}.`);
+    for (const slotName in cmpSlots.slotAssignments) {
+      assert.isTrue(isArray$1(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
       if (slotName !== "" && ArrayIndexOf.call(slots, slotName) === -1) {
         logError(`Ignoring unknown provided slot name "${slotName}" in ${vm}. Check for a typo on the slot attribute.`, vm);
       }
@@ -4271,17 +4447,17 @@ No further warnings will appear.`);
   }
   const parseFragment = buildParseFragmentFn((html, renderer2) => {
     const {
-      createFragment: createFragment2
+      createFragment
     } = renderer2;
-    return createFragment2(html);
+    return createFragment(html);
   });
   const parseSVGFragment = buildParseFragmentFn((html, renderer2) => {
     const {
-      createFragment: createFragment2,
-      getFirstChild: getFirstChild2
+      createFragment,
+      getFirstChild
     } = renderer2;
-    const fragment = createFragment2("<svg>" + html + "</svg>");
-    return getFirstChild2(fragment);
+    const fragment = createFragment("<svg>" + html + "</svg>");
+    return getFirstChild(fragment);
   });
   function evaluateTemplate(vm, html) {
     if (true) {
@@ -4324,6 +4500,9 @@ No further warnings will appear.`);
           validateSlots(vm, html);
           setActiveVM(vm);
         }
+        const hasRefVNodes = Boolean(html.hasRefs);
+        vm.hasRefVNodes = hasRefVNodes;
+        vm.refVNodes = hasRefVNodes ? create(null) : null;
         vm.velements = [];
         isUpdatingTemplate = true;
         vnodes = html.call(void 0, api, component, cmpSlots, context.tplCache);
@@ -4448,7 +4627,7 @@ No further warnings will appear.`);
     return signedTemplateMap.get(Ctor);
   }
   function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(() => {
+    return createReactiveObserver(() => {
       const {
         isDirty
       } = vm;
@@ -4558,13 +4737,9 @@ No further warnings will appear.`);
     } = vm;
     if (state !== 2) {
       const {
-        oar,
         tro
       } = vm;
       tro.reset();
-      for (const key in oar) {
-        oar[key].reset();
-      }
       runDisconnectedCallback(vm);
       runChildNodesDisconnectedCallback(vm);
       runLightChildNodesDisconnectedCallback(vm);
@@ -4604,13 +4779,16 @@ No further warnings will appear.`);
       tagName,
       mode,
       owner,
+      refVNodes: null,
+      hasRefVNodes: false,
       children: EmptyArray,
       aChildren: EmptyArray,
       velements: EmptyArray,
       cmpProps: create(null),
       cmpFields: create(null),
-      cmpSlots: create(null),
-      oar: create(null),
+      cmpSlots: {
+        slotAssignments: create(null)
+      },
       cmpTemplate: null,
       hydrated: Boolean(hydrated),
       renderMode: def.renderMode,
@@ -4634,13 +4812,16 @@ No further warnings will appear.`);
       getHook,
       renderer: renderer2
     };
+    if (true) {
+      vm.debugInfo = create(null);
+    }
     vm.shadowMode = computeShadowMode(vm, renderer2);
     vm.tro = getTemplateReactiveObserver(vm);
     if (true) {
       vm.toString = () => {
         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;
       }
     }
@@ -4655,15 +4836,15 @@ No further warnings will appear.`);
       def
     } = vm;
     const {
-      isSyntheticShadowDefined: isSyntheticShadowDefined2,
-      isNativeShadowDefined: isNativeShadowDefined2
+      isSyntheticShadowDefined,
+      isNativeShadowDefined
     } = renderer2;
     let shadowMode;
-    if (isSyntheticShadowDefined2) {
+    if (isSyntheticShadowDefined) {
       if (def.renderMode === 0) {
         shadowMode = 0;
-      } else if (isNativeShadowDefined2) {
-        if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+      } else if (isNativeShadowDefined) {
+        if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
           if (def.shadowSupportMode === "any") {
             shadowMode = 0;
           } else {
@@ -4741,14 +4922,8 @@ No further warnings will appear.`);
     const {
       def: {
         renderedCallback
-      },
-      renderer: {
-        ssr: ssr2
       }
     } = vm;
-    if (isTrue(ssr2)) {
-      return;
-    }
     const {
       rendered
     } = Services;
@@ -4885,13 +5060,13 @@ No further warnings will appear.`);
       children,
       renderRoot,
       renderer: {
-        remove: remove2
+        remove
       }
     } = vm;
     for (let i2 = 0, len = children.length; i2 < len; i2++) {
       const child = children[i2];
       if (!isNull(child) && !isUndefined$1(child.elm)) {
-        remove2(child.elm, renderRoot);
+        remove(child.elm, renderRoot);
       }
     }
     vm.children = EmptyArray;
@@ -4899,12 +5074,7 @@ No further warnings will appear.`);
     vm.velements = EmptyArray;
   }
   function scheduleRehydration(vm) {
-    const {
-      renderer: {
-        ssr: ssr2
-      }
-    } = vm;
-    if (isTrue(ssr2) || isTrue(vm.isScheduled)) {
+    if (isTrue(vm.isScheduled)) {
       return;
     }
     vm.isScheduled = true;
@@ -4954,6 +5124,7 @@ No further warnings will appear.`);
   }
   const DeprecatedWiredElementHost = "$$DeprecatedWiredElementHostKey$$";
   const DeprecatedWiredParamsMeta = "$$DeprecatedWiredParamsMetaKey$$";
+  const WIRE_DEBUG_ENTRY = "@wire";
   const WireMetaMap = new Map();
   class WireContextRegistrationEvent extends CustomEvent {
     constructor(adapterToken, {
@@ -4975,14 +5146,8 @@ No further warnings will appear.`);
     }
   }
   function createFieldDataCallback(vm, name) {
-    const {
-      cmpFields
-    } = vm;
     return (value) => {
-      if (value !== vm.cmpFields[name]) {
-        cmpFields[name] = value;
-        componentValueMutated(vm, name);
-      }
+      updateComponentValue(vm, name, value);
     };
   }
   function createMethodDataCallback(vm, method) {
@@ -4994,7 +5159,7 @@ No further warnings will appear.`);
   }
   function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
     let hasPendingConfig = false;
-    const ro = new ReactiveObserver(() => {
+    const ro = createReactiveObserver(() => {
       if (hasPendingConfig === false) {
         hasPendingConfig = true;
         Promise.resolve().then(() => {
@@ -5029,7 +5194,7 @@ No further warnings will appear.`);
         wiredDisconnecting
       },
       renderer: {
-        dispatchEvent: dispatchEvent2
+        dispatchEvent
       }
     } = vm;
     ArrayPush$1.call(wiredConnecting, () => {
@@ -5041,7 +5206,7 @@ No further warnings will appear.`);
           ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
         }
       });
-      dispatchEvent2(elm, contextRegistrationEvent);
+      dispatchEvent(elm, contextRegistrationEvent);
     });
   }
   function createConnector(vm, name, wireDef) {
@@ -5051,7 +5216,21 @@ No further warnings will appear.`);
       configCallback,
       dynamic
     } = wireDef;
-    const dataCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
+    let debugInfo;
+    if (true) {
+      const wiredPropOrMethod = isUndefined$1(method) ? name : method.name;
+      debugInfo = create(null);
+      debugInfo.wasDataProvisionedForConfig = false;
+      vm.debugInfo[WIRE_DEBUG_ENTRY][wiredPropOrMethod] = debugInfo;
+    }
+    const fieldOrMethodCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
+    const dataCallback = (value) => {
+      if (true) {
+        debugInfo.data = value;
+        debugInfo.wasDataProvisionedForConfig = true;
+      }
+      fieldOrMethodCallback(value);
+    };
     let context;
     let connector;
     defineProperty(dataCallback, DeprecatedWiredElementHost, {
@@ -5065,6 +5244,11 @@ No further warnings will appear.`);
     }, noop);
     const updateConnectorConfig = (config) => {
       runWithBoundaryProtection(vm, vm, noop, () => {
+        if (true) {
+          debugInfo.config = config;
+          debugInfo.context = context;
+          debugInfo.wasDataProvisionedForConfig = false;
+        }
         connector.update(config, context);
       }, noop);
     };
@@ -5126,6 +5310,9 @@ No further warnings will appear.`);
         wire: wire2
       }
     } = vm;
+    if (true) {
+      vm.debugInfo[WIRE_DEBUG_ENTRY] = create(null);
+    }
     const wiredConnecting = context.wiredConnecting = [];
     const wiredDisconnecting = context.wiredDisconnecting = [];
     for (const fieldNameOrMethod in wire2) {
@@ -5143,7 +5330,7 @@ No further warnings will appear.`);
         const hasDynamicParams = wireDef.dynamic.length > 0;
         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;
@@ -5220,7 +5407,7 @@ No further warnings will appear.`);
         assert.fail("@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.");
       }
     }
-    return reactiveMembrane.getReadOnlyProxy(obj);
+    return getReadOnlyProxy(obj);
   }
   let hasMismatch = false;
   function hydrateRoot(vm) {
@@ -5237,10 +5424,10 @@ No further warnings will appear.`);
     const {
       renderRoot: parentNode,
       renderer: {
-        getFirstChild: getFirstChild2
+        getFirstChild
       }
     } = vm;
-    hydrateChildren(getFirstChild2(parentNode), children, parentNode, vm);
+    hydrateChildren(getFirstChild(parentNode), children, parentNode, vm);
     runRenderedCallback(vm);
   }
   function hydrateNode(node, vnode, renderer2) {
@@ -5256,6 +5443,9 @@ No further warnings will appear.`);
       case 4:
         hydratedNode = hydrateStaticElement(node, vnode, renderer2);
         break;
+      case 5:
+        hydratedNode = hydrateFragment(node, vnode, renderer2);
+        break;
       case 2:
         hydratedNode = hydrateElement(node, vnode, (_a = vnode.data.renderer) !== null && _a !== void 0 ? _a : renderer2);
         break;
@@ -5265,6 +5455,7 @@ No further warnings will appear.`);
     }
     return renderer2.nextSibling(hydratedNode);
   }
+  const NODE_VALUE_PROP = "nodeValue";
   function hydrateText(node, vnode, renderer2) {
     var _a;
     if (!hasCorrectNodeType(vnode, node, 3, renderer2)) {
@@ -5272,17 +5463,17 @@ No further warnings will appear.`);
     }
     if (true) {
       const {
-        getProperty: getProperty2
+        getProperty
       } = renderer2;
-      const nodeValue = getProperty2(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);
       }
     }
     const {
-      setText: setText2
+      setText
     } = renderer2;
-    setText2(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    setText(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
     vnode.elm = node;
     return node;
   }
@@ -5293,17 +5484,17 @@ No further warnings will appear.`);
     }
     if (true) {
       const {
-        getProperty: getProperty2
+        getProperty
       } = renderer2;
-      const nodeValue = getProperty2(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: setProperty2
+      setProperty
     } = renderer2;
-    setProperty2(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;
   }
@@ -5314,6 +5505,14 @@ No further warnings will appear.`);
     vnode.elm = elm;
     return elm;
   }
+  function hydrateFragment(elm, vnode, renderer2) {
+    const {
+      children,
+      owner
+    } = vnode;
+    hydrateChildren(elm, children, renderer2.getProperty(elm, "parentNode"), owner);
+    return vnode.elm = children[children.length - 1].elm;
+  }
   function hydrateElement(elm, vnode, renderer2) {
     if (!hasCorrectNodeType(vnode, elm, 1, renderer2) || !isMatchingElement(vnode, elm, renderer2)) {
       return handleMismatch(elm, vnode, renderer2);
@@ -5333,16 +5532,16 @@ No further warnings will appear.`);
         }
       } = vnode;
       const {
-        getProperty: getProperty2
+        getProperty
       } = renderer2;
       if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-        if (getProperty2(elm, "innerHTML") === props.innerHTML) {
+        if (getProperty(elm, "innerHTML") === props.innerHTML) {
           vnode.data = Object.assign(Object.assign({}, vnode.data), {
             props: cloneAndOmitKey(props, "innerHTML")
           });
         } else {
           if (true) {
-            logWarn(`Mismatch hydrating element <${getProperty2(elm, "tagName").toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, owner);
+            logWarn(`Mismatch hydrating element <${getProperty(elm, "tagName").toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, owner);
           }
         }
       }
@@ -5350,9 +5549,9 @@ No further warnings will appear.`);
     patchElementPropsAndAttrs(vnode, renderer2);
     if (!isDomManual) {
       const {
-        getFirstChild: getFirstChild2
+        getFirstChild
       } = renderer2;
-      hydrateChildren(getFirstChild2(elm), vnode.children, elm, owner);
+      hydrateChildren(getFirstChild(elm), vnode.children, elm, owner);
     }
     return elm;
   }
@@ -5382,9 +5581,9 @@ No further warnings will appear.`);
     runConnectedCallback(vm);
     if (vm.renderMode !== 0) {
       const {
-        getFirstChild: getFirstChild2
+        getFirstChild
       } = renderer2;
-      hydrateChildren(getFirstChild2(elm), vnode.children, elm, vm);
+      hydrateChildren(getFirstChild(elm), vnode.children, elm, vm);
     }
     hydrateVM(vm);
     return elm;
@@ -5423,11 +5622,11 @@ No further warnings will appear.`);
         }
       }
       const {
-        nextSibling: nextSibling2
+        nextSibling
       } = renderer2;
       do {
         const current = nextNode;
-        nextNode = nextSibling2(nextNode);
+        nextNode = nextSibling(nextNode);
         removeNode(current, parentNode, renderer2);
       } while (nextNode);
     }
@@ -5435,9 +5634,9 @@ No further warnings will appear.`);
   function handleMismatch(node, vnode, renderer2) {
     hasMismatch = true;
     const {
-      getProperty: getProperty2
+      getProperty
     } = renderer2;
-    const parentNode = getProperty2(node, "parentNode");
+    const parentNode = getProperty(node, "parentNode");
     mount(vnode, parentNode, renderer2, node);
     removeNode(node, parentNode, renderer2);
     return vnode.elm;
@@ -5448,9 +5647,9 @@ No further warnings will appear.`);
   }
   function hasCorrectNodeType(vnode, node, nodeType, renderer2) {
     const {
-      getProperty: getProperty2
+      getProperty
     } = renderer2;
-    if (getProperty2(node, "nodeType") !== nodeType) {
+    if (getProperty(node, "nodeType") !== nodeType) {
       if (true) {
         logError("Hydration mismatch: incorrect node type received", vnode.owner);
       }
@@ -5460,11 +5659,11 @@ No further warnings will appear.`);
   }
   function isMatchingElement(vnode, elm, renderer2) {
     const {
-      getProperty: getProperty2
+      getProperty
     } = renderer2;
-    if (vnode.sel.toLowerCase() !== getProperty2(elm, "tagName").toLowerCase()) {
+    if (vnode.sel.toLowerCase() !== getProperty(elm, "tagName").toLowerCase()) {
       if (true) {
-        logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty2(elm, "tagName").toLowerCase()}".`, vnode.owner);
+        logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, "tagName").toLowerCase()}".`, vnode.owner);
       }
       return false;
     }
@@ -5485,15 +5684,15 @@ No further warnings will appear.`);
         owner
       } = vnode;
       const {
-        getAttribute: getAttribute2
+        getAttribute
       } = renderer2;
-      const elmAttrValue = getAttribute2(elm, attrName);
+      const elmAttrValue = getAttribute(elm, attrName);
       if (String(attrValue) !== elmAttrValue) {
         if (true) {
           const {
-            getProperty: getProperty2
+            getProperty
           } = renderer2;
-          logError(`Mismatch hydrating element <${getProperty2(elm, "tagName").toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, owner);
+          logError(`Mismatch hydrating element <${getProperty(elm, "tagName").toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, owner);
         }
         nodesAreCompatible = false;
       }
@@ -5502,22 +5701,46 @@ No further warnings will appear.`);
   }
   function validateClassAttr(vnode, elm, renderer2) {
     const {
-      data: {
-        className,
-        classMap
-      }
+      data,
+      owner
     } = vnode;
+    let {
+      className,
+      classMap
+    } = data;
     const {
-      getProperty: getProperty2,
-      getClassList: getClassList2
+      getProperty,
+      getClassList
     } = renderer2;
+    const scopedToken = getScopeTokenClass(owner);
+    const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
+    if (!isNull(scopedToken) || !isNull(stylesheetTokenHost)) {
+      if (!isUndefined$1(className)) {
+        const classTokens = [scopedToken, className, stylesheetTokenHost];
+        const classNames = ArrayFilter.call(classTokens, (token) => !isNull(token));
+        className = ArrayJoin.call(classNames, " ");
+      } else if (!isUndefined$1(classMap)) {
+        classMap = Object.assign(Object.assign(Object.assign({}, classMap), !isNull(scopedToken) ? {
+          [scopedToken]: true
+        } : {}), !isNull(stylesheetTokenHost) ? {
+          [stylesheetTokenHost]: true
+        } : {});
+      } else {
+        const classTokens = [scopedToken, stylesheetTokenHost];
+        const classNames = ArrayFilter.call(classTokens, (token) => !isNull(token));
+        if (classNames.length) {
+          className = ArrayJoin.call(classNames, " ");
+        }
+      }
+    }
     let nodesAreCompatible = true;
-    let vnodeClassName;
-    if (!isUndefined$1(className) && String(className) !== getProperty2(elm, "className")) {
+    let readableVnodeClassname;
+    const elmClassName = getProperty(elm, "className");
+    if (!isUndefined$1(className) && String(className) !== elmClassName) {
       nodesAreCompatible = false;
-      vnodeClassName = className;
+      readableVnodeClassname = className;
     } else if (!isUndefined$1(classMap)) {
-      const classList = getClassList2(elm);
+      const classList = getClassList(elm);
       let computedClassName = "";
       for (const name in classMap) {
         computedClassName += " " + name;
@@ -5525,14 +5748,17 @@ No further warnings will appear.`);
           nodesAreCompatible = false;
         }
       }
-      vnodeClassName = computedClassName.trim();
+      readableVnodeClassname = computedClassName.trim();
       if (classList.length > keys(classMap).length) {
         nodesAreCompatible = false;
       }
+    } else if (isUndefined$1(className) && elmClassName !== "") {
+      nodesAreCompatible = false;
+      readableVnodeClassname = "";
     }
     if (!nodesAreCompatible) {
       if (true) {
-        logError(`Mismatch hydrating element <${getProperty2(elm, "tagName").toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty2(elm, "className")}"`, vnode.owner);
+        logError(`Mismatch hydrating element <${getProperty(elm, "tagName").toLowerCase()}>: attribute "class" has different values, expected "${readableVnodeClassname}" but found "${elmClassName}"`, vnode.owner);
       }
     }
     return nodesAreCompatible;
@@ -5545,9 +5771,9 @@ No further warnings will appear.`);
       }
     } = vnode;
     const {
-      getAttribute: getAttribute2
+      getAttribute
     } = renderer2;
-    const elmStyle = getAttribute2(elm, "style") || "";
+    const elmStyle = getAttribute(elm, "style") || "";
     let vnodeStyle;
     let nodesAreCompatible = true;
     if (!isUndefined$1(style) && style !== elmStyle) {
@@ -5576,44 +5802,44 @@ No further warnings will appear.`);
     if (!nodesAreCompatible) {
       if (true) {
         const {
-          getProperty: getProperty2
+          getProperty
         } = renderer2;
-        logError(`Mismatch hydrating element <${getProperty2(elm, "tagName").toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
+        logError(`Mismatch hydrating element <${getProperty(elm, "tagName").toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
       }
     }
     return nodesAreCompatible;
   }
-  function areCompatibleNodes(client, ssr2, vnode, renderer2) {
+  function areCompatibleNodes(client, ssr, vnode, renderer2) {
     const {
-      getProperty: getProperty2,
-      getAttribute: getAttribute2
+      getProperty,
+      getAttribute
     } = renderer2;
-    if (getProperty2(client, "nodeType") === 3) {
-      if (!hasCorrectNodeType(vnode, ssr2, 3, renderer2)) {
+    if (getProperty(client, "nodeType") === 3) {
+      if (!hasCorrectNodeType(vnode, ssr, 3, renderer2)) {
         return false;
       }
-      return getProperty2(client, "nodeValue") === getProperty2(ssr2, "nodeValue");
+      return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
     }
-    if (getProperty2(client, "nodeType") === 8) {
-      if (!hasCorrectNodeType(vnode, ssr2, 8, renderer2)) {
+    if (getProperty(client, "nodeType") === 8) {
+      if (!hasCorrectNodeType(vnode, ssr, 8, renderer2)) {
         return false;
       }
-      return getProperty2(client, "nodeValue") === getProperty2(ssr2, "nodeValue");
+      return getProperty(client, NODE_VALUE_PROP) === getProperty(ssr, NODE_VALUE_PROP);
     }
-    if (!hasCorrectNodeType(vnode, ssr2, 1, renderer2)) {
+    if (!hasCorrectNodeType(vnode, ssr, 1, renderer2)) {
       return false;
     }
     let isCompatibleElements = true;
-    if (getProperty2(client, "tagName") !== getProperty2(ssr2, "tagName")) {
+    if (getProperty(client, "tagName") !== getProperty(ssr, "tagName")) {
       if (true) {
-        logError(`Hydration mismatch: expecting element with tag "${getProperty2(client, "tagName").toLowerCase()}" but found "${getProperty2(ssr2, "tagName").toLowerCase()}".`, vnode.owner);
+        logError(`Hydration mismatch: expecting element with tag "${getProperty(client, "tagName").toLowerCase()}" but found "${getProperty(ssr, "tagName").toLowerCase()}".`, vnode.owner);
       }
       return false;
     }
-    const clientAttrsNames = getProperty2(client, "getAttributeNames").call(client);
+    const clientAttrsNames = getProperty(client, "getAttributeNames").call(client);
     clientAttrsNames.forEach((attrName) => {
-      if (getAttribute2(client, attrName) !== getAttribute2(ssr2, attrName)) {
-        logError(`Mismatch hydrating element <${getProperty2(client, "tagName").toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute2(client, attrName)}" but found "${getAttribute2(ssr2, attrName)}"`, vnode.owner);
+      if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+        logError(`Mismatch hydrating element <${getProperty(client, "tagName").toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, vnode.owner);
         isCompatibleElements = false;
       }
     });
@@ -5627,6 +5853,9 @@ No further warnings will appear.`);
   }
   const TEMPLATE_PROPS = ["slots", "stylesheetToken", "stylesheets", "renderMode"];
   const ARRAY_MUTATION_METHODS = ["pop", "push", "shift", "unshift", "reverse", "sort", "fill", "splice", "copyWithin"];
+  const STYLESHEET_FUNCTION_EXPANDOS = [
+    "$scoped$"
+  ];
   function getOriginalArrayMethod(prop) {
     switch (prop) {
       case "pop":
@@ -5659,39 +5888,106 @@ No further warnings will appear.`);
       };
     }
   }
-  function freezeTemplate(tmpl) {
-    if (true) {
-      if (!isUndefined$1(tmpl.stylesheets)) {
-        warnOnArrayMutation(tmpl.stylesheets);
-      }
-      for (const prop of TEMPLATE_PROPS) {
-        let value = tmpl[prop];
-        defineProperty(tmpl, prop, {
-          enumerable: true,
-          configurable: true,
-          get() {
-            return value;
-          },
-          set(newValue) {
-            if (!mutationWarningsSilenced) {
-              logError(`Dynamically setting the "${prop}" property on a template function is deprecated and may be removed in a future version of LWC.`);
-            }
-            value = newValue;
-          }
-        });
-      }
-      const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, "stylesheetTokens");
-      defineProperty(tmpl, "stylesheetTokens", {
+  function warnOnStylesheetFunctionMutation(stylesheet) {
+    for (const prop of STYLESHEET_FUNCTION_EXPANDOS) {
+      let value = stylesheet[prop];
+      defineProperty(stylesheet, prop, {
         enumerable: true,
         configurable: true,
-        get: originalDescriptor.get,
+        get() {
+          return value;
+        },
+        set(newValue) {
+          logError(`Dynamically setting the "${prop}" property on a stylesheet function is deprecated and may be removed in a future version of LWC.`);
+          value = newValue;
+        }
+      });
+    }
+  }
+  function warnOnStylesheetsMutation(stylesheets) {
+    traverseStylesheets(stylesheets, (subStylesheets) => {
+      if (isArray$1(subStylesheets)) {
+        warnOnArrayMutation(subStylesheets);
+      } else {
+        warnOnStylesheetFunctionMutation(subStylesheets);
+      }
+    });
+  }
+  function deepFreeze(stylesheets) {
+    traverseStylesheets(stylesheets, (subStylesheets) => {
+      freeze(subStylesheets);
+    });
+  }
+  function traverseStylesheets(stylesheets, callback) {
+    callback(stylesheets);
+    for (let i2 = 0; i2 < stylesheets.length; i2++) {
+      const stylesheet = stylesheets[i2];
+      if (isArray$1(stylesheet)) {
+        traverseStylesheets(stylesheet, callback);
+      } else {
+        callback(stylesheet);
+      }
+    }
+  }
+  function freezeTemplate(tmpl) {
+    if (lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
+      freeze(tmpl);
+      if (!isUndefined$1(tmpl.stylesheets)) {
+        deepFreeze(tmpl.stylesheets);
+      }
+    } else {
+      defineProperty(tmpl, "stylesheetTokens", {
+        enumerable: true,
+        configurable: true,
+        get() {
+          const {
+            stylesheetToken
+          } = this;
+          if (isUndefined$1(stylesheetToken)) {
+            return stylesheetToken;
+          }
+          return {
+            hostAttribute: `${stylesheetToken}-host`,
+            shadowAttribute: stylesheetToken
+          };
+        },
         set(value) {
-          logError(`Dynamically setting the "stylesheetTokens" property on a template function is deprecated and may be removed in a future version of LWC.`);
-          mutationWarningsSilenced = true;
-          originalDescriptor.set.call(this, value);
-          mutationWarningsSilenced = false;
+          this.stylesheetToken = isUndefined$1(value) ? void 0 : value.shadowAttribute;
         }
       });
+      if (true) {
+        if (!isUndefined$1(tmpl.stylesheets)) {
+          warnOnStylesheetsMutation(tmpl.stylesheets);
+        }
+        for (const prop of TEMPLATE_PROPS) {
+          let value = tmpl[prop];
+          defineProperty(tmpl, prop, {
+            enumerable: true,
+            configurable: true,
+            get() {
+              return value;
+            },
+            set(newValue) {
+              if (!mutationWarningsSilenced) {
+                logError(`Dynamically setting the "${prop}" property on a template function is deprecated and may be removed in a future version of LWC.`);
+              }
+              value = newValue;
+            }
+          });
+        }
+        const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, "stylesheetTokens");
+        defineProperty(tmpl, "stylesheetTokens", {
+          enumerable: true,
+          configurable: true,
+          get: originalDescriptor.get,
+          set(value) {
+            logError(`Dynamically setting the "stylesheetTokens" property on a template function is deprecated and may be removed in a future version of LWC.`);
+            mutationWarningsSilenced = true;
+            originalDescriptor.set.call(this, value);
+            mutationWarningsSilenced = false;
+          }
+        });
+      }
     }
   }
   function getComponentConstructor(elm) {
@@ -5704,6 +6000,58 @@ No further warnings will appear.`);
     }
     return ctor;
   }
+  function getHeaderForCustomElement(ce, componentInstance) {
+    return ["div", {}, ["object", {
+      object: ce,
+      config: {
+        skip: true
+      }
+    }], ["div", {}, ["span", {
+      style: "margin: 0 5px; color: red"
+    }, "LWC:"], ["object", {
+      object: componentInstance
+    }]]];
+  }
+  function getHeaderForComponentInstance(componentInstance, debugInfo) {
+    if (keys(debugInfo).length === 0) {
+      return null;
+    }
+    return ["div", {}, ["object", {
+      object: componentInstance,
+      config: {
+        skip: true
+      }
+    }], ["div", {}, ["span", {
+      style: "margin: 0 5px; color: red"
+    }, "Debug:"], ["object", {
+      object: debugInfo
+    }]]];
+  }
+  const LightningElementFormatter = {
+    name: "LightningElementFormatter",
+    header(obj, config) {
+      const vm = getAssociatedVMIfPresent(obj);
+      if (!isUndefined$1(vm) && (isUndefined$1(config) || !config.skip)) {
+        if (obj instanceof HTMLElement) {
+          return getHeaderForCustomElement(obj, vm.component);
+        } else {
+          return getHeaderForComponentInstance(obj, vm.debugInfo);
+        }
+      }
+      return null;
+    },
+    hasBody() {
+      return false;
+    }
+  };
+  function init() {
+    const devtoolsFormatters = _globalThis.devtoolsFormatters || [];
+    ArrayPush$1.call(devtoolsFormatters, LightningElementFormatter);
+    _globalThis.devtoolsFormatters = devtoolsFormatters;
+  }
+  if (true) {
+    init();
+  }
   const supportsConstructableStylesheets = isFunction$1(CSSStyleSheet.prototype.replaceSync) && isArray$1(document.adoptedStyleSheets);
   const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets && getOwnPropertyDescriptor$1(document.adoptedStyleSheets, "length").writable;
   const isIE11 = !isUndefined$1(document.documentMode);
@@ -5713,9 +6061,6 @@ No further warnings will appear.`);
       stylesheetCache.clear();
     };
   }
-  function isDocument(target) {
-    return !isUndefined$1(target.head);
-  }
   function createFreshStyleElement(content) {
     const elm = document.createElement("style");
     elm.type = "text/css";
@@ -5724,17 +6069,17 @@ No further warnings will appear.`);
   }
   function createStyleElement(content, cacheData) {
     const {
-      stylesheet,
-      used
+      element,
+      usedElement
     } = cacheData;
-    if (used) {
+    if (usedElement) {
       if (isIE11) {
         return createFreshStyleElement(content);
       }
-      return stylesheet.cloneNode(true);
+      return element.cloneNode(true);
     }
-    cacheData.used = true;
-    return stylesheet;
+    cacheData.usedElement = true;
+    return element;
   }
   function createConstructableStylesheet(content) {
     const stylesheet = new CSSStyleSheet();
@@ -5756,39 +6101,37 @@ No further warnings will appear.`);
   }
   function insertStyleElement(content, target, cacheData) {
     const elm = createStyleElement(content, cacheData);
-    const targetAnchorPoint = isDocument(target) ? target.head : target;
-    targetAnchorPoint.appendChild(elm);
-  }
-  function doInsertStylesheet(content, target, cacheData) {
-    if (supportsConstructableStylesheets) {
-      insertConstructableStylesheet(content, target, cacheData);
-    } else {
-      insertStyleElement(content, target, cacheData);
-    }
+    target.appendChild(elm);
   }
-  function getCacheData(content) {
+  function getCacheData(content, useConstructableStylesheet) {
     let cacheData = stylesheetCache.get(content);
     if (isUndefined$1(cacheData)) {
       cacheData = {
-        stylesheet: supportsConstructableStylesheets ? createConstructableStylesheet(content) : createFreshStyleElement(content),
+        stylesheet: void 0,
+        element: void 0,
         roots: void 0,
         global: false,
-        used: false
+        usedElement: false
       };
       stylesheetCache.set(content, cacheData);
     }
+    if (useConstructableStylesheet && isUndefined$1(cacheData.stylesheet)) {
+      cacheData.stylesheet = createConstructableStylesheet(content);
+    } else if (!useConstructableStylesheet && isUndefined$1(cacheData.element)) {
+      cacheData.element = createFreshStyleElement(content);
+    }
     return cacheData;
   }
   function insertGlobalStylesheet(content) {
-    const cacheData = getCacheData(content);
+    const cacheData = getCacheData(content, false);
     if (cacheData.global) {
       return;
     }
     cacheData.global = true;
-    doInsertStylesheet(content, document, cacheData);
+    insertStyleElement(content, document.head, cacheData);
   }
   function insertLocalStylesheet(content, target) {
-    const cacheData = getCacheData(content);
+    const cacheData = getCacheData(content, supportsConstructableStylesheets);
     let {
       roots
     } = cacheData;
@@ -5798,7 +6141,11 @@ No further warnings will appear.`);
       return;
     }
     roots.add(target);
-    doInsertStylesheet(content, target, cacheData);
+    if (supportsConstructableStylesheets) {
+      insertConstructableStylesheet(content, target, cacheData);
+    } else {
+      insertStyleElement(content, target, cacheData);
+    }
   }
   function insertStylesheet(content, target) {
     if (isUndefined$1(target)) {
@@ -5807,9 +6154,6 @@ No further warnings will appear.`);
       insertLocalStylesheet(content, target);
     }
   }
-  let getCustomElement;
-  let defineCustomElement;
-  let HTMLElementConstructor;
   function isCustomElementRegistryAvailable() {
     if (typeof customElements === "undefined") {
       return false;
@@ -5825,205 +6169,688 @@ No further warnings will appear.`);
       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);
+  const hasCustomElements = isCustomElementRegistryAvailable();
+  const createCustomElementCompat = (tagName, upgradeCallback) => {
+    const elm = document.createElement(tagName);
+    upgradeCallback(elm);
+    return elm;
+  };
+  const cachedConstructors = new Map();
+  const elementsUpgradedOutsideLWC = new WeakSet();
+  let elementBeingUpgradedByLWC = false;
+  const createUpgradableConstructor = (connectedCallback, disconnectedCallback) => {
+    const hasConnectedCallback = !isUndefined$1(connectedCallback);
+    const hasDisconnectedCallback = !isUndefined$1(disconnectedCallback);
+    class UpgradableConstructor extends HTMLElement {
+      constructor(upgradeCallback) {
+        super();
+        if (elementBeingUpgradedByLWC) {
+          upgradeCallback(this);
+        } else if (hasConnectedCallback || hasDisconnectedCallback) {
+          elementsUpgradedOutsideLWC.add(this);
+        }
+      }
+    }
+    if (hasConnectedCallback) {
+      UpgradableConstructor.prototype.connectedCallback = function() {
+        if (!elementsUpgradedOutsideLWC.has(this)) {
+          connectedCallback(this);
+        }
+      };
+    }
+    if (hasDisconnectedCallback) {
+      UpgradableConstructor.prototype.disconnectedCallback = function() {
+        if (!elementsUpgradedOutsideLWC.has(this)) {
+          disconnectedCallback(this);
+        }
+      };
+    }
+    return UpgradableConstructor;
+  };
+  const createCustomElementVanilla = (tagName, upgradeCallback, connectedCallback, disconnectedCallback) => {
+    let UpgradableConstructor = cachedConstructors.get(tagName);
+    if (isUndefined$1(UpgradableConstructor)) {
+      if (!isUndefined$1(customElements.get(tagName))) {
+        throw new Error(`Unexpected tag name "${tagName}". This name is a registered custom element, preventing LWC to upgrade the element.`);
+      }
+      UpgradableConstructor = createUpgradableConstructor(connectedCallback, disconnectedCallback);
+      customElements.define(tagName, UpgradableConstructor);
+      cachedConstructors.set(tagName, UpgradableConstructor);
+    }
+    elementBeingUpgradedByLWC = true;
+    try {
+      return new UpgradableConstructor(upgradeCallback);
+    } finally {
+      elementBeingUpgradedByLWC = false;
+    }
+  };
+  function createScopedRegistry() {
+    if (!hasCustomElements) {
+      throw new Error("Custom elements are not supported in this environment.");
+    }
+    const {
+      HTMLElement: NativeHTMLElement
+    } = window;
+    const {
+      hasAttribute: nativeHasAttribute,
+      setAttribute: nativeSetAttribute,
+      removeAttribute: nativeRemoveAttribute,
+      getAttribute: nativeGetAttribute
+    } = NativeHTMLElement.prototype;
+    const definitionForElement = new WeakMap();
+    const pendingRegistryForElement = new WeakMap();
+    const definitionForConstructor = new WeakMap();
+    const registeredUserCtors = new WeakSet();
+    const registeredPivotCtors = new WeakSet();
+    const pivotCtorByTag = new Map();
+    const globalDefinitionsByTag = new Map();
+    const globalDefinitionsByClass = new Map();
+    const awaitingUpgrade = new Map();
+    const pendingWhenDefinedCallbacks = new Map();
+    const EMPTY_SET = new Set();
+    function createDefinitionRecord(constructor) {
+      var _a;
+      const {
+        connectedCallback,
+        disconnectedCallback,
+        formAssociatedCallback,
+        formDisabledCallback,
+        formResetCallback,
+        formStateRestoreCallback,
+        adoptedCallback,
+        attributeChangedCallback
+      } = constructor.prototype;
+      const formAssociated = Boolean(constructor.formAssociated);
+      const observedAttributes = new Set((_a = constructor.observedAttributes) !== null && _a !== void 0 ? _a : []);
+      return {
+        UserCtor: constructor,
+        PivotCtor: void 0,
+        connectedCallback,
+        disconnectedCallback,
+        formAssociatedCallback,
+        formDisabledCallback,
+        formResetCallback,
+        formStateRestoreCallback,
+        adoptedCallback,
+        attributeChangedCallback,
+        observedAttributes,
+        formAssociated
+      };
+    }
+    function createPivotingClass(tagName, registeredDefinition) {
+      class PivotCtor extends NativeHTMLElement {
+        constructor(UserCtor) {
+          super();
+          const userCtorIsDefined = !isUndefined$1(UserCtor);
+          if (userCtorIsDefined) {
+            if (!isConstructor(UserCtor)) {
+              throw new TypeError(`Failed to create custom element: the provided constructor is not a constructor.`);
+            }
+            if (!registeredUserCtors.has(UserCtor)) {
+              throw new Error(`Failed to create custom element: the provided constructor is unregistered: ${UserCtor.name}.`);
+            }
+          }
+          const definition = userCtorIsDefined ? getOrCreateDefinitionForConstructor(UserCtor) : globalDefinitionsByTag.get(tagName);
+          if (!isUndefined$1(definition)) {
+            internalUpgrade(this, registeredDefinition, definition);
+          } else {
+            pendingRegistryForElement.set(this, registeredDefinition);
+          }
+        }
+        connectedCallback() {
+          var _a;
+          const definition = definitionForElement.get(this);
+          if (!isUndefined$1(definition)) {
+            (_a = definition.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+          } else {
+            let awaiting = awaitingUpgrade.get(tagName);
+            if (isUndefined$1(awaiting)) {
+              awaitingUpgrade.set(tagName, awaiting = new Set());
+            }
+            awaiting.add(this);
+          }
+        }
+        disconnectedCallback() {
+          var _a;
+          const definition = definitionForElement.get(this);
+          if (!isUndefined$1(definition)) {
+            (_a = definition.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+          } else {
+            const awaiting = awaitingUpgrade.get(tagName);
+            if (!isUndefined$1(awaiting)) {
+              awaiting.delete(this);
+            }
+          }
+        }
+        formAssociatedCallback(form) {
+          var _a;
+          const definition = definitionForElement.get(this);
+          (_a = definition === null || definition === void 0 ? void 0 : definition.formAssociatedCallback) === null || _a === void 0 ? void 0 : _a.call(this, form);
+        }
+        formDisabledCallback(disabled) {
+          var _a;
+          const definition = definitionForElement.get(this);
+          (_a = definition === null || definition === void 0 ? void 0 : definition.formDisabledCallback) === null || _a === void 0 ? void 0 : _a.call(this, disabled);
+        }
+        formResetCallback() {
+          var _a;
+          const definition = definitionForElement.get(this);
+          (_a = definition === null || definition === void 0 ? void 0 : definition.formResetCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
+        formStateRestoreCallback(state, mode) {
+          var _a;
+          const definition = definitionForElement.get(this);
+          (_a = definition === null || definition === void 0 ? void 0 : definition.formStateRestoreCallback) === null || _a === void 0 ? void 0 : _a.call(this, state, mode);
+        }
+        adoptedCallback() {
+          var _a;
+          const definition = definitionForElement.get(this);
+          (_a = definition === null || definition === void 0 ? void 0 : definition.adoptedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+          var _a;
+          const definition = definitionForElement.get(this);
+          if (registeredDefinition === definition || (definition === null || definition === void 0 ? void 0 : definition.observedAttributes.has(name))) {
+            (_a = definition.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.apply(this, [name, oldValue, newValue]);
+          }
+        }
+      }
+      PivotCtor.observedAttributes = [...registeredDefinition.observedAttributes];
+      PivotCtor.formAssociated = registeredDefinition.formAssociated;
+      registeredPivotCtors.add(PivotCtor);
+      return PivotCtor;
+    }
+    function getNewObservedAttributes(registeredDefinition, pivotDefinition) {
+      const {
+        observedAttributes,
+        attributeChangedCallback
+      } = pivotDefinition;
+      if (observedAttributes.size === 0 || isUndefined$1(attributeChangedCallback)) {
+        return EMPTY_SET;
+      }
+      return new Set([...pivotDefinition.observedAttributes].filter((x) => !registeredDefinition.observedAttributes.has(x)));
+    }
+    function throwAsyncError(error) {
+      setTimeout(() => {
+        throw error;
+      });
+    }
+    function patchAttributes2(instance, registeredDefinition, pivotDefinition) {
+      const newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
+      if (newObservedAttributes.size === 0) {
+        return;
+      }
+      const {
+        attributeChangedCallback
+      } = pivotDefinition;
+      defineProperties(instance, {
+        setAttribute: {
+          value: function setAttribute(name, value) {
+            if (newObservedAttributes.has(name)) {
+              const old = nativeGetAttribute.call(this, name);
+              nativeSetAttribute.call(this, name, value);
+              try {
+                attributeChangedCallback.call(this, name, old, value + "");
+              } catch (error) {
+                throwAsyncError(error);
+              }
+            } else {
+              nativeSetAttribute.call(this, name, value);
+            }
+          },
+          writable: true,
+          enumerable: true,
+          configurable: true
+        },
+        removeAttribute: {
+          value: function removeAttribute(name) {
+            if (newObservedAttributes.has(name)) {
+              const old = nativeGetAttribute.call(this, name);
+              nativeRemoveAttribute.call(this, name);
+              try {
+                attributeChangedCallback.call(this, name, old, null);
+              } catch (error) {
+                throwAsyncError(error);
+              }
+            } else {
+              nativeRemoveAttribute.call(this, name);
+            }
+          },
+          writable: true,
+          enumerable: true,
+          configurable: true
+        }
+      });
+    }
+    function patchAttributesDuringUpgrade(instance, registeredDefinition, pivotDefinition) {
+      const newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
+      if (getNewObservedAttributes(registeredDefinition, pivotDefinition).size === 0) {
+        return;
+      }
+      const {
+        attributeChangedCallback
+      } = pivotDefinition;
+      newObservedAttributes.forEach((name) => {
+        if (nativeHasAttribute.call(instance, name)) {
+          const newValue = nativeGetAttribute.call(instance, name);
+          attributeChangedCallback.call(instance, name, null, newValue);
+        }
+      });
+    }
+    let upgradingInstance;
+    function internalUpgrade(instance, registeredDefinition, pivotDefinition) {
+      setPrototypeOf(instance, pivotDefinition.UserCtor.prototype);
+      definitionForElement.set(instance, pivotDefinition);
+      if (pivotDefinition !== registeredDefinition) {
+        patchAttributes2(instance, registeredDefinition, pivotDefinition);
+      }
+      upgradingInstance = instance;
+      new pivotDefinition.UserCtor();
+      patchAttributesDuringUpgrade(instance, registeredDefinition, pivotDefinition);
+    }
+    function isConstructor(constructor) {
+      return isFunction$1(constructor) && isObject(constructor.prototype);
+    }
+    function getOrCreateDefinitionForConstructor(constructor) {
+      if (!isConstructor(constructor)) {
+        throw new TypeError("The referenced constructor is not a constructor.");
+      }
+      const definition = definitionForConstructor.get(constructor);
+      if (!isUndefined$1(definition)) {
+        return definition;
+      }
+      return createDefinitionRecord(constructor);
+    }
+    function createPendingWhenDefinedCallback(tagName) {
+      return new Promise((resolve) => {
+        let resolvers = pendingWhenDefinedCallbacks.get(tagName);
+        if (isUndefined$1(resolvers)) {
+          resolvers = [];
+          pendingWhenDefinedCallbacks.set(tagName, resolvers);
+        }
+        resolvers.push(resolve);
+      });
+    }
+    function flushPendingWhenDefinedCallbacks(tagName, ctor) {
+      const resolvers = pendingWhenDefinedCallbacks.get(tagName);
+      if (!isUndefined$1(resolvers)) {
+        for (const resolver of resolvers) {
+          resolver(ctor);
+        }
+      }
+      pendingWhenDefinedCallbacks.delete(tagName);
+    }
+    const {
+      customElements: nativeRegistry
+    } = window;
+    const {
+      define: nativeDefine,
+      whenDefined: nativeWhenDefined,
+      get: nativeGet
+    } = nativeRegistry;
+    CustomElementRegistry.prototype.define = function define(tagName, constructor, options) {
+      if (options && options.extends) {
+        throw new DOMException('NotSupportedError: "extends" key in customElements.define() options is not supported.');
+      }
+      if (globalDefinitionsByTag.has(tagName)) {
+        throw new DOMException(`Failed to execute 'define' on 'CustomElementRegistry': the name "${tagName}" has already been used with this registry`);
+      }
+      if (!isUndefined$1(globalDefinitionsByClass.get(constructor))) {
+        throw new DOMException(`Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry`);
+      }
+      const definition = getOrCreateDefinitionForConstructor(constructor);
+      registeredUserCtors.add(constructor);
+      let PivotCtor = pivotCtorByTag.get(tagName);
+      if (isUndefined$1(PivotCtor)) {
+        PivotCtor = createPivotingClass(tagName, definition);
+        nativeDefine.call(nativeRegistry, tagName, PivotCtor);
+      }
+      definitionForConstructor.set(constructor, definition);
+      pivotCtorByTag.set(tagName, PivotCtor);
+      globalDefinitionsByTag.set(tagName, definition);
+      globalDefinitionsByClass.set(constructor, definition);
+      definition.PivotCtor = PivotCtor;
+      const awaiting = awaitingUpgrade.get(tagName);
+      if (!isUndefined$1(awaiting)) {
+        awaitingUpgrade.delete(tagName);
+        for (const element of awaiting) {
+          const registeredDefinition = pendingRegistryForElement.get(element);
+          if (!isUndefined$1(registeredDefinition)) {
+            pendingRegistryForElement.delete(element);
+            internalUpgrade(element, registeredDefinition, definition);
+          }
+        }
+      }
+      flushPendingWhenDefinedCallbacks(tagName, constructor);
     };
-    getCustomElement = function get(name) {
-      return registry[name];
+    CustomElementRegistry.prototype.get = function get(tagName) {
+      const NativeCtor = nativeGet.call(nativeRegistry, tagName);
+      if (!isUndefined$1(NativeCtor)) {
+        const definition = globalDefinitionsByTag.get(tagName);
+        if (!isUndefined$1(definition)) {
+          return definition.UserCtor;
+        }
+        if (registeredPivotCtors.has(NativeCtor)) {
+          return void 0;
+        }
+        return NativeCtor;
+      }
     };
-    HTMLElementConstructor = function HTMLElement2() {
-      if (!(this instanceof HTMLElement2)) {
-        throw new TypeError(`Invalid Invocation`);
+    CustomElementRegistry.prototype.whenDefined = function whenDefined(tagName) {
+      return nativeWhenDefined.call(nativeRegistry, tagName).then((NativeCtor) => {
+        const definition = globalDefinitionsByTag.get(tagName);
+        if (!isUndefined$1(definition)) {
+          return definition.UserCtor;
+        }
+        if (isUndefined$1(NativeCtor)) {
+          NativeCtor = nativeGet.call(nativeRegistry, tagName);
+        }
+        if (registeredPivotCtors.has(NativeCtor)) {
+          return createPendingWhenDefinedCallback(tagName);
+        }
+        return NativeCtor;
+      });
+    };
+    window.HTMLElement = function HTMLElement2() {
+      const instance = upgradingInstance;
+      if (!isUndefined$1(instance)) {
+        upgradingInstance = void 0;
+        return instance;
       }
       const {
         constructor
       } = this;
-      const name = reverseRegistry.get(constructor);
-      if (!name) {
-        throw new TypeError(`Invalid Construction`);
+      const definition = globalDefinitionsByClass.get(constructor);
+      if (isUndefined$1(definition) || isUndefined$1(definition.PivotCtor)) {
+        throw new TypeError("Illegal constructor");
       }
-      const elm = document.createElement(name);
-      setPrototypeOf(elm, constructor.prototype);
-      return elm;
+      const {
+        PivotCtor,
+        UserCtor
+      } = definition;
+      return new PivotCtor(UserCtor);
+    };
+    HTMLElement.prototype = NativeHTMLElement.prototype;
+    return function createPivotConstructor(tagName, UserCtor) {
+      tagName = StringToLowerCase.call(tagName);
+      let PivotCtor = pivotCtorByTag.get(tagName);
+      if (isUndefined$1(PivotCtor)) {
+        const definition = getOrCreateDefinitionForConstructor(UserCtor);
+        PivotCtor = createPivotingClass(tagName, definition);
+        nativeDefine.call(nativeRegistry, tagName, PivotCtor);
+        definition.PivotCtor = PivotCtor;
+        definitionForConstructor.set(UserCtor, definition);
+        pivotCtorByTag.set(tagName, PivotCtor);
+      }
+      registeredUserCtors.add(UserCtor);
+      return PivotCtor;
     };
-    HTMLElementConstructor.prototype = HTMLElement.prototype;
-  }
-  let hydrating = false;
-  function setIsHydrating(value) {
-    hydrating = value;
-  }
-  const ssr = false;
-  function isHydrating() {
-    return hydrating;
-  }
-  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 createFragment(html) {
-    return document.createRange().createContextualFragment(html).firstChild;
-  }
-  function createElement$1(tagName, namespace) {
-    return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
-  }
-  function createText(content) {
-    return document.createTextNode(content);
-  }
-  function createComment(content) {
-    return document.createComment(content);
-  }
-  function insert(node, parent, anchor) {
-    parent.insertBefore(node, anchor);
-  }
-  function remove(node, parent) {
-    parent.removeChild(node);
-  }
-  function nextSibling(node) {
-    return node.nextSibling;
   }
-  function attachShadow(element, options) {
-    if (hydrating) {
-      return element.shadowRoot;
+  let createScopedConstructor;
+  let CachedHTMLElement;
+  if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
+    if (hasCustomElements) {
+      createScopedConstructor = createScopedRegistry();
+      CachedHTMLElement = window.HTMLElement;
     }
-    return element.attachShadow(options);
-  }
-  function setText(node, content) {
-    node.nodeValue = content;
-  }
-  function getProperty(node, key) {
-    return node[key];
   }
-  function setProperty(node, key, value) {
-    if (true) {
-      if (node instanceof Element && !(key in node)) {
-        assert.fail(`Unknown public property "${key}" of element <${node.tagName}>. This is likely a typo on the corresponding attribute "${htmlPropertyToAttribute(key)}".`);
+  const createUserConstructor = (HTMLElementToExtend, upgradeCallback, connectedCallback, disconnectedCallback) => {
+    return class UserConstructor extends HTMLElementToExtend {
+      constructor() {
+        super();
+        upgradeCallback(this);
       }
+      connectedCallback() {
+        if (!isUndefined$1(connectedCallback)) {
+          connectedCallback(this);
+        }
+      }
+      disconnectedCallback() {
+        if (!isUndefined$1(disconnectedCallback)) {
+          disconnectedCallback(this);
+        }
+      }
+    };
+  };
+  function createCustomElementScoped(tagName, upgradeCallback, connectedCallback, disconnectedCallback) {
+    if (isUndefined$1(createScopedConstructor) || isUndefined$1(CachedHTMLElement)) {
+      throw new Error("The flag ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY must be set to true to use this feature");
+    }
+    const UserConstructor = createUserConstructor(CachedHTMLElement, upgradeCallback, connectedCallback, disconnectedCallback);
+    const ScopedConstructor = createScopedConstructor(tagName, UserConstructor);
+    return new ScopedConstructor(UserConstructor);
+  }
+  let createCustomElement;
+  if (hasCustomElements) {
+    if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
+      createCustomElement = createCustomElementScoped;
+    } else {
+      createCustomElement = createCustomElementVanilla;
     }
-    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);
+  } else {
+    createCustomElement = createCustomElementCompat;
   }
-  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) {
-    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 = {
-    ssr,
-    isNativeShadowDefined,
-    isSyntheticShadowDefined,
-    HTMLElementExported,
-    isHydrating,
-    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,
+  function rendererFactory(baseRenderer) {
+    const renderer2 = function(exports2) {
+      function invariant2(value, msg) {
+        if (!value) {
+          throw new Error(`Invariant Violation: ${msg}`);
+        }
+      }
+      function isTrue$12(value, msg) {
+        if (!value) {
+          throw new Error(`Assert Violation: ${msg}`);
+        }
+      }
+      function isFalse$12(value, msg) {
+        if (value) {
+          throw new Error(`Assert Violation: ${msg}`);
+        }
+      }
+      function fail2(msg) {
+        throw new Error(msg);
+      }
+      var assert2 = /* @__PURE__ */ Object.freeze({
+        __proto__: null,
+        invariant: invariant2,
+        isTrue: isTrue$12,
+        isFalse: isFalse$12,
+        fail: fail2
+      });
+      function isUndefined2(obj) {
+        return obj === void 0;
+      }
+      function isNull2(obj) {
+        return obj === null;
+      }
+      function cloneNode(node, deep) {
+        return node.cloneNode(deep);
+      }
+      function createElement2(tagName, namespace) {
+        return isUndefined2(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
+      }
+      function createText(content) {
+        return document.createTextNode(content);
+      }
+      function createComment(content) {
+        return document.createComment(content);
+      }
+      exports2.createFragment = void 0;
+      const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === "function";
+      if (SUPPORTS_TEMPLATE) {
+        exports2.createFragment = function(html) {
+          const template = document.createElement("template");
+          template.innerHTML = html;
+          return template.content.firstChild;
+        };
+      } else {
+        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"]
+        };
+        const getTagName = function(text) {
+          return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ["", ""])[1].toLowerCase();
+        };
+        exports2.createFragment = function(html) {
+          const wrapperTags = topLevelWrappingMap[getTagName(html)];
+          if (!isUndefined2(wrapperTags)) {
+            for (const wrapperTag of wrapperTags) {
+              html = `<${wrapperTag}>${html}</${wrapperTag}>`;
+            }
+          }
+          const doc = document.implementation.createHTMLDocument("");
+          doc.body.innerHTML = html;
+          let content = doc.body;
+          if (!isUndefined2(wrapperTags)) {
+            for (let i2 = 0; i2 < wrapperTags.length; i2++) {
+              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) {
+        if (!isNull2(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 isUndefined2(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
+      }
+      function setAttribute(element, name, value, namespace) {
+        return isUndefined2(namespace) ? element.setAttribute(name, value) : element.setAttributeNS(namespace, name, value);
+      }
+      function removeAttribute(element, name, namespace) {
+        if (isUndefined2(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) {
+        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) {
+        assert2.invariant(elm instanceof HTMLElement, msg);
+      }
+      exports2.addEventListener = addEventListener;
+      exports2.assertInstanceOfHTMLElement = assertInstanceOfHTMLElement;
+      exports2.attachShadow = attachShadow;
+      exports2.cloneNode = cloneNode;
+      exports2.createComment = createComment;
+      exports2.createElement = createElement2;
+      exports2.createText = createText;
+      exports2.dispatchEvent = dispatchEvent;
+      exports2.getAttribute = getAttribute;
+      exports2.getBoundingClientRect = getBoundingClientRect;
+      exports2.getChildNodes = getChildNodes;
+      exports2.getChildren = getChildren;
+      exports2.getClassList = getClassList;
+      exports2.getElementsByClassName = getElementsByClassName;
+      exports2.getElementsByTagName = getElementsByTagName;
+      exports2.getFirstChild = getFirstChild;
+      exports2.getFirstElementChild = getFirstElementChild;
+      exports2.getLastChild = getLastChild;
+      exports2.getLastElementChild = getLastElementChild;
+      exports2.getProperty = getProperty;
+      exports2.insert = insert;
+      exports2.isConnected = isConnected;
+      exports2.nextSibling = nextSibling;
+      exports2.querySelector = querySelector;
+      exports2.querySelectorAll = querySelectorAll;
+      exports2.remove = remove;
+      exports2.removeAttribute = removeAttribute;
+      exports2.removeEventListener = removeEventListener;
+      exports2.setAttribute = setAttribute;
+      exports2.setCSSStyleProperty = setCSSStyleProperty;
+      exports2.setProperty = setProperty;
+      exports2.setText = setText;
+      return exports2;
+    }({});
+    Object.setPrototypeOf(renderer2, baseRenderer);
+    return renderer2;
+  }
+  const renderer = assign(rendererFactory(null), {
     insertStylesheet,
-    assertInstanceOfHTMLElement,
-    defineCustomElement,
-    getCustomElement
-  };
+    createCustomElement,
+    isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
+    isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN)
+  });
   function resetShadowRootAndLightDom(element, Ctor) {
     if (element.shadowRoot) {
       const shadowRoot = element.shadowRoot;
@@ -6064,18 +6891,13 @@ No further warnings will appear.`);
       return;
     }
     try {
-      setIsHydrating(true);
       const vm = createVMWithProps(element, Ctor, props);
       hydrateRoot(vm);
-      setIsHydrating(false);
     } catch (e) {
       console.error("Recovering from error while hydrating: ", e);
       resetShadowRootAndLightDom(element, Ctor);
       createVMWithProps(element, Ctor, props);
-      setIsHydrating(false);
       connectRootElement(element);
-    } finally {
-      setIsHydrating(false);
     }
   }
   function deprecatedBuildCustomElementConstructor(Ctor) {
@@ -6086,8 +6908,15 @@ No further warnings will appear.`);
   }
   const hydratedCustomElements = new WeakSet();
   function buildCustomElementConstructor(Ctor) {
+    var _a;
     const HtmlPrototype = getComponentHtmlPrototype(Ctor);
-    return class extends HtmlPrototype {
+    const {
+      observedAttributes
+    } = HtmlPrototype;
+    const {
+      attributeChangedCallback
+    } = HtmlPrototype.prototype;
+    return _a = class extends HTMLElement {
       constructor() {
         super();
         if (this.isConnected) {
@@ -6111,7 +6940,10 @@ No further warnings will appear.`);
       disconnectedCallback() {
         disconnectRootElement(this);
       }
-    };
+      attributeChangedCallback(name, oldValue, newValue) {
+        attributeChangedCallback.call(this, name, oldValue, newValue);
+      }
+    }, _a.observedAttributes = observedAttributes, _a;
   }
   const _Node$1 = Node;
   const ConnectingSlot = new WeakMap();
@@ -6126,32 +6958,34 @@ No further warnings will appear.`);
     }
     return node;
   }
-  const {
-    appendChild,
-    insertBefore,
-    removeChild,
-    replaceChild
-  } = _Node$1.prototype;
-  assign(_Node$1.prototype, {
-    appendChild(newChild) {
-      const appendedNode = appendChild.call(this, newChild);
-      return callNodeSlot(appendedNode, ConnectingSlot);
-    },
-    insertBefore(newChild, referenceNode) {
-      const insertedNode = insertBefore.call(this, newChild, referenceNode);
-      return callNodeSlot(insertedNode, ConnectingSlot);
-    },
-    removeChild(oldChild) {
-      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;
-    }
-  });
+  if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+    const {
+      appendChild,
+      insertBefore,
+      removeChild,
+      replaceChild
+    } = _Node$1.prototype;
+    assign(_Node$1.prototype, {
+      appendChild(newChild) {
+        const appendedNode = appendChild.call(this, newChild);
+        return callNodeSlot(appendedNode, ConnectingSlot);
+      },
+      insertBefore(newChild, referenceNode) {
+        const insertedNode = insertBefore.call(this, newChild, referenceNode);
+        return callNodeSlot(insertedNode, ConnectingSlot);
+      },
+      removeChild(oldChild) {
+        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;
+      }
+    });
+  }
   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)}".`);
@@ -6160,21 +6994,32 @@ No further warnings will appear.`);
     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;
-    const element = new UpgradableConstructor((elm) => {
+    const {
+      createCustomElement: createCustomElement2
+    } = renderer;
+    const tagName = StringToLowerCase.call(sel);
+    const upgradeCallback = (elm) => {
       createVM(elm, Ctor, renderer, {
-        tagName: sel,
+        tagName,
         mode: options.mode !== "closed" ? "open" : "closed",
         owner: null
       });
-      ConnectingSlot.set(elm, connectRootElement);
-      DisconnectingSlot.set(elm, disconnectRootElement);
-      wasComponentUpgraded = true;
-    });
-    if (!wasComponentUpgraded) {
-      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);
+      }
+    };
+    let connectedCallback;
+    let disconnectedCallback;
+    if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+      connectedCallback = (elm) => {
+        connectRootElement(elm);
+      };
+      disconnectedCallback = (elm) => {
+        disconnectRootElement(elm);
+      };
     }
+    const element = createCustomElement2(tagName, upgradeCallback, connectedCallback, disconnectedCallback);
     return element;
   }
   const _Node = Node;
@@ -6189,7 +7034,7 @@ No further warnings will appear.`);
     if (rootNode instanceof ShadowRoot && isFalse(hasOwnProperty$1.call(getPrototypeOf$1(rootNode), "synthetic"))) {
       return true;
     }
-    return isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
+    return renderer.isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
   }
   const ComponentConstructorToCustomElementConstructorMap = new Map();
   function getCustomElementConstructor(Ctor) {
@@ -6230,6 +7075,7 @@ No further warnings will appear.`);
   exports.registerDecorators = registerDecorators;
   exports.registerTemplate = registerTemplate;
   exports.renderer = renderer;
+  exports.rendererFactory = rendererFactory;
   exports.sanitizeAttribute = sanitizeAttribute;
   exports.setFeatureFlag = setFeatureFlag;
   exports.setFeatureFlagForTest = setFeatureFlagForTest;