lwc 2.35.2 → 2.37.0

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

@@ -321,7 +321,7 @@ var LWC = (function (exports) {
       CACHED_ATTRIBUTE_PROPERTY_MAPPING.set(attrName, propertyName);
       return propertyName;
   }
-  /** version: 2.35.2 */
+  /** version: 2.37.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -341,10 +341,8 @@ var LWC = (function (exports) {
       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,
-      ENABLE_PROGRAMMATIC_STYLESHEETS: null,
   };
   if (!_globalThis.lwcRuntimeFlags) {
       Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -389,7 +387,7 @@ var LWC = (function (exports) {
    */
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.35.2 */
+  /** version: 2.37.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -453,7 +451,7 @@ var LWC = (function (exports) {
           }
       }
   }
-  /** version: 2.35.2 */
+  /** version: 2.37.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -473,7 +471,6 @@ var LWC = (function (exports) {
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  /** Callbacks to invoke when reporting is enabled **/
   const onReportingEnabledCallbacks = [];
   /** The currently assigned reporting dispatcher. */
   let currentDispatcher$1 = noop;
@@ -531,11 +528,11 @@ var LWC = (function (exports) {
   /**
    * Report to the current dispatcher, if there is one.
    * @param reportingEventId
-   * @param vm
+   * @param payload - data to report
    */
-  function report(reportingEventId, vm) {
+  function report(reportingEventId, payload) {
       if (enabled$1) {
-          currentDispatcher$1(reportingEventId, vm.tagName, vm.idx);
+          currentDispatcher$1(reportingEventId, payload);
       }
   }
 
@@ -781,7 +778,7 @@ var LWC = (function (exports) {
   // Make a shallow copy of an object but omit the given key
   function cloneAndOmitKey(object, keyToOmit) {
       const result = {};
-      for (const key of Object.keys(object)) {
+      for (const key of keys(object)) {
           if (key !== keyToOmit) {
               result[key] = object[key];
           }
@@ -791,7 +788,7 @@ var LWC = (function (exports) {
   function flattenStylesheets(stylesheets) {
       const list = [];
       for (const stylesheet of stylesheets) {
-          if (!Array.isArray(stylesheet)) {
+          if (!isArray$1(stylesheet)) {
               list.push(stylesheet);
           }
           else {
@@ -3756,7 +3753,12 @@ var LWC = (function (exports) {
       } else if (isVScopedSlotFragment(vnode)) {
         slotName = vnode.slotName;
       }
-      const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
+      // Can't use toString here because Symbol(1).toString() is 'Symbol(1)'
+      // but elm.setAttribute('slot', Symbol(1)) is an error.
+      // the following line also throws same error for symbols
+      // Similar for Object.create(null)
+      const normalizedSlotName = '' + slotName;
+      const vnodes = cmpSlotsMapping[normalizedSlotName] = cmpSlotsMapping[normalizedSlotName] || [];
       ArrayPush$1.call(vnodes, vnode);
     }
     vm.cmpSlots = {
@@ -4832,15 +4834,13 @@ var LWC = (function (exports) {
   }
   // Validate and flatten any stylesheets defined as `static stylesheets`
   function computeStylesheets(vm, ctor) {
-    if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
-      const {
-        stylesheets
-      } = ctor;
-      if (!isUndefined$1(stylesheets)) {
-        const valid = validateComponentStylesheets(vm, stylesheets);
-        if (valid) {
-          return flattenStylesheets(stylesheets);
-        }
+    const {
+      stylesheets
+    } = ctor;
+    if (!isUndefined$1(stylesheets)) {
+      const valid = validateComponentStylesheets(vm, stylesheets);
+      if (valid) {
+        return flattenStylesheets(stylesheets);
       }
     }
     return null;
@@ -5181,7 +5181,7 @@ var LWC = (function (exports) {
   // The goal of this code is to detect invalid cross-root ARIA references in synthetic shadow DOM.
   // These invalid references should be fixed before the offending components can be migrated to native shadow DOM.
   // When invalid usage is detected, we warn in dev mode and call the reporting API if enabled.
-  // See: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates
+  // See: https://sfdc.co/synthetic-aria
   //
   // Use the unpatched native getElementById/querySelectorAll rather than the synthetic one
   const getElementById = _globalThis[KEY__NATIVE_GET_ELEMENT_BY_ID];
@@ -5189,7 +5189,7 @@ var LWC = (function (exports) {
   function isSyntheticShadowRootInstance(rootNode) {
       return rootNode !== document && isTrue(rootNode.synthetic);
   }
-  function reportViolation(source, target, attrName) {
+  function reportViolation$1(source, target, attrName) {
       // The vm is either for the source, the target, or both. Either one or both must be using synthetic
       // shadow for a violation to be detected.
       let vm = getAssociatedVMIfPresent(source.getRootNode().host);
@@ -5200,7 +5200,10 @@ var LWC = (function (exports) {
           // vm should never be undefined here, but just to be safe, bail out and don't report
           return;
       }
-      report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, vm);
+      report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, {
+          tagName: vm.tagName,
+          attributeName: attrName,
+      });
   }
   function parseIdRefAttributeValue(attrValue) {
       // split on whitespace and skip empty strings after splitting
@@ -5226,7 +5229,7 @@ var LWC = (function (exports) {
                   const sourceElement = sourceElements[i];
                   const sourceRoot = sourceElement.getRootNode();
                   if (sourceRoot !== root) {
-                      reportViolation(sourceElement, elm);
+                      reportViolation$1(sourceElement, elm, idRefAttrName);
                       break;
                   }
               }
@@ -5241,7 +5244,7 @@ var LWC = (function (exports) {
                   const targetRoot = target.getRootNode();
                   if (targetRoot !== root) {
                       // target element's shadow root is not the same as ours
-                      reportViolation(elm, target);
+                      reportViolation$1(elm, target, attrName);
                   }
               }
           }
@@ -5250,7 +5253,7 @@ var LWC = (function (exports) {
   let enabled = false;
   // We want to avoid patching globals whenever possible, so this should be tree-shaken out in prod-mode and if
   // reporting is not enabled. It should also only run once
-  function enableDetection() {
+  function enableDetection$1() {
       if (enabled) {
           return; // don't double-apply the patches
       }
@@ -5303,8 +5306,92 @@ var LWC = (function (exports) {
       // Always run detection in dev mode, so we can at least print to the console
       {
           // In prod mode, only enable detection if reporting is enabled
-          onReportingEnabled(enableDetection);
+          onReportingEnabled(enableDetection$1);
+      }
+  }
+
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  //
+  // The goal of this code is to detect usages of non-standard reflected ARIA properties. These are caused by
+  // legacy non-standard Element.prototype extensions added by the @lwc/aria-reflection package.
+  //
+  // See the README for @lwc/aria-reflection
+  const NON_STANDARD_ARIA_PROPS = ['ariaActiveDescendant', 'ariaControls', 'ariaDescribedBy', 'ariaDetails', 'ariaErrorMessage', 'ariaFlowTo', 'ariaLabelledBy', 'ariaOwns'];
+  function isLightningElement(elm) {
+    // The former case is for `this.prop` (inside component) and the latter is for `element.prop` (outside component).
+    // In both cases, we apply the non-standard prop even when the global polyfill is disabled, so this is kosher.
+    return elm instanceof LightningElement || elm instanceof BaseBridgeElement;
+  }
+  function findVM(elm) {
+    // If it's a shadow DOM component, then it has a host
+    const {
+      host
+    } = elm.getRootNode();
+    const vm = isUndefined$1(host) ? undefined : getAssociatedVMIfPresent(host);
+    if (!isUndefined$1(vm)) {
+      return vm;
+    }
+    // Else it might be a light DOM component. Walk up the tree trying to find the owner
+    let parentElement = elm;
+    while (!isNull(parentElement = parentElement.parentElement)) {
+      if (isLightningElement(parentElement)) {
+        const vm = getAssociatedVMIfPresent(parentElement);
+        if (!isUndefined$1(vm)) {
+          return vm;
+        }
+      }
+    }
+    // If we return undefined, it's because the element was rendered wholly outside a LightningElement
+  }
+
+  function checkAndReportViolation(elm, prop) {
+    if (!isLightningElement(elm)) {
+      const vm = findVM(elm);
+      report(2 /* ReportingEventId.NonStandardAriaReflection */, {
+        tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
+        propertyName: prop
+      });
+    }
+  }
+  function enableDetection() {
+    const {
+      prototype
+    } = Element;
+    for (const prop of NON_STANDARD_ARIA_PROPS) {
+      const descriptor = getOwnPropertyDescriptor$1(prototype, prop);
+      // @ts-ignore
+      const {
+        get,
+        set
+      } = descriptor;
+      defineProperty(prototype, prop, {
+        get() {
+          checkAndReportViolation(this, prop);
+          return get.call(this);
+        },
+        set(val) {
+          checkAndReportViolation(this, prop);
+          return set.call(this, val);
+        },
+        configurable: true,
+        enumerable: true
+      });
+    }
+  }
+  // No point in running this code if we're not in a browser, or if the global polyfill is not loaded
+  {
+    if (!lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
+      // Always run detection in dev mode, so we can at least print to the console
+      {
+        // In prod mode, only enable detection if reporting is enabled
+        onReportingEnabled(enableDetection);
       }
+    }
   }
 
   /*
@@ -5711,6 +5798,97 @@ var LWC = (function (exports) {
       hooksAreSet = true;
       setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
+
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  // See @lwc/engine-core/src/framework/template.ts
+  const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
+  // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
+  const STYLESHEET_PROPS = [
+  // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
+  '$scoped$'];
+  // Via https://www.npmjs.com/package/object-observer
+  const ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
+  let mutationTrackingDisabled = false;
+  function getOriginalArrayMethod(prop) {
+    switch (prop) {
+      case 'pop':
+        return ArrayPop;
+      case 'push':
+        return ArrayPush$1;
+      case 'shift':
+        return ArrayShift;
+      case 'unshift':
+        return ArrayUnshift;
+      case 'reverse':
+        return ArrayReverse;
+      case 'sort':
+        return ArraySort;
+      case 'fill':
+        return ArrayFill;
+      case 'splice':
+        return ArraySplice;
+      case 'copyWithin':
+        return ArrayCopyWithin;
+    }
+  }
+  function reportViolation(type, eventId, prop) {
+    report(eventId, {
+      propertyName: prop
+    });
+  }
+  function reportTemplateViolation(prop) {
+    reportViolation('template', 3 /* ReportingEventId.TemplateMutation */, prop);
+  }
+  function reportStylesheetViolation(prop) {
+    reportViolation('stylesheet', 4 /* ReportingEventId.StylesheetMutation */, prop);
+  }
+  // Warn if the user tries to mutate a stylesheets array, e.g.:
+  // `tmpl.stylesheets.push(someStylesheetFunction)`
+  function warnOnArrayMutation(stylesheets) {
+    // We can't handle users calling Array.prototype.slice.call(tmpl.stylesheets), but
+    // we can at least warn when they use the most common mutation methods.
+    for (const prop of ARRAY_MUTATION_METHODS) {
+      const originalArrayMethod = getOriginalArrayMethod(prop);
+      stylesheets[prop] = function arrayMutationWarningWrapper() {
+        reportTemplateViolation('stylesheets');
+        // @ts-ignore
+        return originalArrayMethod.apply(this, arguments);
+      };
+    }
+  }
+  // Warn if the user tries to mutate a stylesheet factory function, e.g.:
+  // `stylesheet.$scoped$ = true`
+  function warnOnStylesheetFunctionMutation(stylesheet) {
+    for (const prop of STYLESHEET_PROPS) {
+      let value = stylesheet[prop];
+      defineProperty(stylesheet, prop, {
+        enumerable: true,
+        configurable: true,
+        get() {
+          return value;
+        },
+        set(newValue) {
+          reportStylesheetViolation(prop);
+          value = newValue;
+        }
+      });
+    }
+  }
+  // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
+  function trackStylesheetsMutation(stylesheets) {
+    traverseStylesheets(stylesheets, subStylesheets => {
+      if (isArray$1(subStylesheets)) {
+        warnOnArrayMutation(subStylesheets);
+      } else {
+        warnOnStylesheetFunctionMutation(subStylesheets);
+      }
+    });
+  }
   // Deeply freeze the entire array (of arrays) of stylesheet factory functions
   function deepFreeze(stylesheets) {
     traverseStylesheets(stylesheets, subStylesheets => {
@@ -5729,7 +5907,70 @@ var LWC = (function (exports) {
       }
     }
   }
+  function trackMutations(tmpl) {
+    if (!isUndefined$1(tmpl.stylesheets)) {
+      trackStylesheetsMutation(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 (!mutationTrackingDisabled) {
+            reportTemplateViolation(prop);
+          }
+          value = newValue;
+        }
+      });
+    }
+    const originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
+    defineProperty(tmpl, 'stylesheetTokens', {
+      enumerable: true,
+      configurable: true,
+      get: originalDescriptor.get,
+      set(value) {
+        reportTemplateViolation('stylesheetTokens');
+        // Avoid logging/reporting twice (for both stylesheetToken and stylesheetTokens)
+        mutationTrackingDisabled = true;
+        originalDescriptor.set.call(this, value);
+        mutationTrackingDisabled = false;
+      }
+    });
+  }
+  function addLegacyStylesheetTokensShim(tmpl) {
+    // When ENABLE_FROZEN_TEMPLATE is false, then we shim stylesheetTokens on top of stylesheetToken for anyone who
+    // is accessing the old internal API (backwards compat). Details: https://salesforce.quip.com/v1rmAFu2cKAr
+    defineProperty(tmpl, 'stylesheetTokens', {
+      enumerable: true,
+      configurable: true,
+      get() {
+        const {
+          stylesheetToken
+        } = this;
+        if (isUndefined$1(stylesheetToken)) {
+          return stylesheetToken;
+        }
+        // Shim for the old `stylesheetTokens` property
+        // See https://github.com/salesforce/lwc/pull/2332/files#diff-7901555acef29969adaa6583185b3e9bce475cdc6f23e799a54e0018cb18abaa
+        return {
+          hostAttribute: `${stylesheetToken}-host`,
+          shadowAttribute: stylesheetToken
+        };
+      },
+      set(value) {
+        // If the value is null or some other exotic object, you would be broken anyway in the past
+        // because the engine would try to access hostAttribute/shadowAttribute, which would throw an error.
+        // However it may be undefined in newer versions of LWC, so we need to guard against that case.
+        this.stylesheetToken = isUndefined$1(value) ? undefined : value.shadowAttribute;
+      }
+    });
+  }
   function freezeTemplate(tmpl) {
+    // TODO [#2782]: remove this flag and delete the legacy behavior
     if (lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
       // Deep freeze the template
       freeze(tmpl);
@@ -5737,33 +5978,16 @@ var LWC = (function (exports) {
         deepFreeze(tmpl.stylesheets);
       }
     } else {
-      // TODO [#2782]: remove this flag and delete the legacy behavior
-      // When ENABLE_FROZEN_TEMPLATE is false, then we shim stylesheetTokens on top of stylesheetToken for anyone who
-      // is accessing the old internal API (backwards compat). Details: https://salesforce.quip.com/v1rmAFu2cKAr
-      defineProperty(tmpl, 'stylesheetTokens', {
-        enumerable: true,
-        configurable: true,
-        get() {
-          const {
-            stylesheetToken
-          } = this;
-          if (isUndefined$1(stylesheetToken)) {
-            return stylesheetToken;
-          }
-          // Shim for the old `stylesheetTokens` property
-          // See https://github.com/salesforce/lwc/pull/2332/files#diff-7901555acef29969adaa6583185b3e9bce475cdc6f23e799a54e0018cb18abaa
-          return {
-            hostAttribute: `${stylesheetToken}-host`,
-            shadowAttribute: stylesheetToken
-          };
-        },
-        set(value) {
-          // If the value is null or some other exotic object, you would be broken anyway in the past
-          // because the engine would try to access hostAttribute/shadowAttribute, which would throw an error.
-          // However it may be undefined in newer versions of LWC, so we need to guard against that case.
-          this.stylesheetToken = isUndefined$1(value) ? undefined : value.shadowAttribute;
-        }
-      });
+      // template is not frozen - shim, report, and warn
+      // this shim should be applied in both dev and prod
+      addLegacyStylesheetTokensShim(tmpl);
+      // When ENABLE_FROZEN_TEMPLATE is false, we want to warn in dev mode whenever someone is mutating the template
+      {
+        // In prod mode, we only track mutations if reporting is enabled
+        onReportingEnabled(() => {
+          trackMutations(tmpl);
+        });
+      }
     }
   }
 
@@ -6041,545 +6265,6 @@ var LWC = (function (exports) {
       }
   };
 
-  /*
-   * Copyright (c) 2020, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  /**
-   * Create a scoped registry, i.e. a function that can create custom elements whose tag names
-   * do not conflict with third-party custom elements having the same tag name.
-   */
-  function createScopedRegistry() {
-      if (!hasCustomElements) {
-          // This code should never be reached, because we don't use the pivot registry if
-          // custom elements are unavailable.
-          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: undefined,
-              connectedCallback,
-              disconnectedCallback,
-              formAssociatedCallback,
-              formDisabledCallback,
-              formResetCallback,
-              formStateRestoreCallback,
-              adoptedCallback,
-              attributeChangedCallback,
-              observedAttributes,
-              formAssociated,
-          };
-      }
-      // Helper to create stand-in element for each tagName registered that delegates out to the registry for the given
-      // element. Note that the `registeredDefinition` represents the constructor that was used to register during
-      // `customElements.define()`. Whereas the `pivotDefinition` represents the constructor that is passed when the pivot
-      // constructor is invoked with another constructor.
-      function createPivotingClass(tagName, registeredDefinition) {
-          class PivotCtor extends NativeHTMLElement {
-              constructor(UserCtor) {
-                  // This constructor can only be invoked by:
-                  // a) the browser instantiating  an element from parsing or via document.createElement.
-                  // b) LWC new PivotClass (This constructor is NOT observable/accessible in user-land).
-                  // b) new UserClass.
-                  // When LWC instantiates it, it will pass the upgrading definition as an argument
-                  // If the caller signals via UserCtor that this is in fact a controlled
-                  // definition, we use that one, otherwise fallback to the global
-                  // internal registry.
-                  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 {
-                      // This is the case in which there is no global definition, and
-                      // it is not handled by LWC (otherwise it will have a valid UserCtor)
-                      // so we need to add it to the pending queue just in case it eventually
-                      // gets defined in the global registry.
-                      pendingRegistryForElement.set(this, registeredDefinition);
-                  }
-              }
-              connectedCallback() {
-                  var _a;
-                  const definition = definitionForElement.get(this);
-                  if (!isUndefined$1(definition)) {
-                      // Delegate out to user callback
-                      (_a = definition.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-                  }
-                  else {
-                      // Register for upgrade when defined (only when connected, so we don't leak)
-                      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)) {
-                      // Delegate out to user callback
-                      (_a = definition.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-                  }
-                  else {
-                      // Un-register for upgrade when defined (so we don't leak)
-                      const awaiting = awaitingUpgrade.get(tagName);
-                      // At this point, awaiting should never be undefined, because connectedCallback
-                      // must have been called before disconnectedCallback. But just to be safe, we check
-                      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 both definitions are the same, then the observedAttributes is the same,
-                  // but if they are different, only if the runtime definition has the attribute
-                  // marked as observed, then it should invoke attributeChangedCallback.
-                  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];
-          // TODO [#3000]: support case where registeredDefinition is not form-associated, but later definition is.
-          PivotCtor.formAssociated = registeredDefinition.formAssociated;
-          registeredPivotCtors.add(PivotCtor);
-          return PivotCtor;
-      }
-      function getNewObservedAttributes(registeredDefinition, pivotDefinition) {
-          const { observedAttributes, attributeChangedCallback } = pivotDefinition;
-          if (observedAttributes.size === 0 || isUndefined$1(attributeChangedCallback)) {
-              // This instance does not need to observe any attributes, no need to patch
-              return EMPTY_SET;
-          }
-          // Natively, the attributes observed by the registered definition are going to be taken
-          // care of by the browser, only the difference between the two sets has to be taken
-          // care by the patched version.
-          return new Set([...pivotDefinition.observedAttributes].filter((x) => !registeredDefinition.observedAttributes.has(x)));
-      }
-      function throwAsyncError(error) {
-          // Per native custom element behavior, errors thrown in attributeChangedCallback
-          // become unhandled async errors. We use setTimeout() instead of Promise.resolve()
-          // to make it an unhandled error rather than an unhandled rejection.
-          setTimeout(() => {
-              throw error;
-          });
-      }
-      // Helper to patch `setAttribute`/`getAttribute` to implement `attributeChangedCallback`.
-      // Why is this necessary? Well basically, you can't change the `observedAttributes` after
-      // a custom element is defined. So with pivots, if two classes share the same tag name,
-      // and the second class observes attributes that aren't observed by the first one,
-      // then those attributes can never be observed by the native `observedAttributes` system.
-      // So we have to simulate it by patching `getAttribute`/`removeAttribute`. Note that
-      // we only do this when absolutely necessary, though; i.e. because we've determined
-      // that we aren't observing the attributes we need to.
-      function patchAttributes(instance, registeredDefinition, pivotDefinition) {
-          const newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
-          if (newObservedAttributes.size === 0) {
-              return;
-          }
-          const { attributeChangedCallback } = pivotDefinition;
-          // Patch the instance.
-          // Note we use the native `getAttribute` rather than the super's `getAttribute` because
-          // we don't actually want it to be observable that we're calling `getAttribute` from
-          // `setAttribute` and `removeAttribute`.
-          // TODO [#2994]: this should handle reflected properties such as `ariaLabel` and `role`.
-          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) {
-          // The below case patches observed attributes for the case where the HTML element is upgraded
-          // from a pre-existing one in the DOM.
-          const newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
-          if (getNewObservedAttributes(registeredDefinition, pivotDefinition).size === 0) {
-              return;
-          }
-          const { attributeChangedCallback } = pivotDefinition;
-          // Approximate observedAttributes from the user class, but only for the new observed attributes
-          newObservedAttributes.forEach((name) => {
-              if (nativeHasAttribute.call(instance, name)) {
-                  const newValue = nativeGetAttribute.call(instance, name);
-                  attributeChangedCallback.call(instance, name, null, newValue);
-              }
-          });
-      }
-      // User extends this HTMLElement, which returns the CE being upgraded
-      let upgradingInstance;
-      // Helper to upgrade an instance with a CE definition using "constructor call trick"
-      function internalUpgrade(instance, registeredDefinition, pivotDefinition) {
-          setPrototypeOf(instance, pivotDefinition.UserCtor.prototype);
-          definitionForElement.set(instance, pivotDefinition);
-          // attributes patches when needed
-          if (pivotDefinition !== registeredDefinition) {
-              patchAttributes(instance, registeredDefinition, pivotDefinition);
-          }
-          // Tricking the construction path to believe that a new instance is being created,
-          // that way it will execute the super initialization mechanism but the HTMLElement
-          // constructor will reuse the instance by returning the upgradingInstance.
-          // This is by far the most important piece of the puzzle
-          upgradingInstance = instance;
-          // By `new`ing the UserCtor, we now jump to the constructor for the overridden global HTMLElement
-          // The reason this happens is that the UserCtor extends HTMLElement, so it calls the `super()`.
-          // Note that `upgradingInstance` is explicitly handled in the HTMLElement constructor.
-          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);
-      }
-      // Defer a `whenDefined()` callback until an externally-visible custom element is defined
-      function createPendingWhenDefinedCallback(tagName) {
-          return new Promise((resolve) => {
-              let resolvers = pendingWhenDefinedCallbacks.get(tagName);
-              if (isUndefined$1(resolvers)) {
-                  resolvers = [];
-                  pendingWhenDefinedCallbacks.set(tagName, resolvers);
-              }
-              resolvers.push(resolve);
-          });
-      }
-      // Call any pending `whenDefined()` callbacks
-      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;
-      // patch for the global registry define mechanism
-      CustomElementRegistry.prototype.define = function define(tagName, constructor, options) {
-          if (options && options.extends) {
-              // TODO [#2983]: should we support `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);
-              // Register a pivoting class which will handle global registry initializations
-              nativeDefine.call(nativeRegistry, tagName, PivotCtor);
-          }
-          // Only cache after nativeDefine has been called, because if it throws an error
-          // (e.g. for an invalid tag name), then we don't want to cache anything.
-          definitionForConstructor.set(constructor, definition);
-          pivotCtorByTag.set(tagName, PivotCtor);
-          globalDefinitionsByTag.set(tagName, definition);
-          globalDefinitionsByClass.set(constructor, definition);
-          // For globally defined custom elements, the definition associated
-          // to the UserCtor has a back-pointer to PivotCtor in case the user
-          // new the UserCtor, so we know how to create the underlying element.
-          definition.PivotCtor = PivotCtor;
-          // Upgrade any elements created in this scope before customElements.define
-          // was called, which should be exhibited by the following steps:
-          // 1) LWC registers a tagName for an LWC component.
-          // 2) Element with same tagName is created with document.createElement()
-          //    and inserted into DOM.
-          // 3) customElements.define() is called with tagName and non-LWC constructor.
-          // This requires immediate upgrade when the new global tagName is defined.
-          const awaiting = awaitingUpgrade.get(tagName);
-          if (!isUndefined$1(awaiting)) {
-              awaitingUpgrade.delete(tagName);
-              for (const element of awaiting) {
-                  const registeredDefinition = pendingRegistryForElement.get(element);
-                  // At this point, registeredDefinition should never be undefined because awaitingUpgrade
-                  // is only populated when we haven't run internalUpgrade yet, and we only populate
-                  // pendingRegistryForElement when internalUpgrade hasn't run yet.
-                  // But just to be safe, we check.
-                  if (!isUndefined$1(registeredDefinition)) {
-                      pendingRegistryForElement.delete(element);
-                      internalUpgrade(element, registeredDefinition, definition);
-                  }
-              }
-          }
-          // If anyone called customElements.whenDefined() and is still waiting for a promise resolution, resolve now
-          flushPendingWhenDefinedCallbacks(tagName, constructor);
-      };
-      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; // defined by the patched custom elements registry
-              }
-              if (registeredPivotCtors.has(NativeCtor)) {
-                  return undefined; // pivot constructors should not be observable, return undefined
-              }
-              return NativeCtor; // constructor that existed before patching
-          }
-      };
-      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;
-              }
-              // In this case, the custom element must have been defined before the registry patches
-              // were applied. So return the non-pivot constructor
-              if (isUndefined$1(NativeCtor)) {
-                  // Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1335247
-                  // We can patch the correct behavior using customElements.get()
-                  NativeCtor = nativeGet.call(nativeRegistry, tagName);
-              }
-              if (registeredPivotCtors.has(NativeCtor)) {
-                  // Pivot constructors should not be observable. Wait to resolve the promise
-                  // if a constructor is ever defined in userland
-                  return createPendingWhenDefinedCallback(tagName);
-              }
-              return NativeCtor;
-          });
-      };
-      // This constructor is invoked when we call `new pivotDefinition.UserCtor()`
-      // @ts-ignore
-      window.HTMLElement = function HTMLElement() {
-          // Upgrading case: the pivoting class constructor was run by the browser's
-          // native custom elements and we're in the process of running the
-          // "constructor-call trick" on the natively constructed instance, so just
-          // return that here.
-          // This code path is also called when LWC `new`s a PivotCtor.
-          const instance = upgradingInstance;
-          if (!isUndefined$1(instance)) {
-              upgradingInstance = undefined;
-              return instance;
-          }
-          // Construction case: we need to construct the pivoting instance and return it.
-          // This is possible when the user register it via global registry and instantiate
-          // it via `new Ctor()`.
-          const { constructor } = this;
-          const definition = globalDefinitionsByClass.get(constructor);
-          if (isUndefined$1(definition) || isUndefined$1(definition.PivotCtor)) {
-              // This code path is hit if someone `new`s a class that extends `HTMLElement` without
-              // doing `customElements.define()` first. This matches native browser behavior:
-              // https://stackoverflow.com/a/61883392
-              throw new TypeError('Illegal constructor');
-          }
-          // This constructor is ONLY invoked when it is the user instantiating
-          // an element via new Ctor while Ctor is a registered global constructor.
-          const { PivotCtor, UserCtor } = definition;
-          return new PivotCtor(UserCtor);
-      };
-      HTMLElement.prototype = NativeHTMLElement.prototype;
-      /**
-       * Create a new PivotConstructor for the given tagName, which is capable of being constructed
-       * with a UserConstructor defining the behavior. Passing in the UserConstructor here
-       * is a hint that can be used when registering a custom element with the global custom elements
-       * registry for the first time, which provides certain optimizations. It also marks the UserConstructor
-       * as "safe" to be used when passed in to a PivotConstructor.
-       *
-       * @param tagName - element tag name
-       * @param UserCtor - userland custom element constructor
-       * @returns a new custom element constructor
-       */
-      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);
-              // Register a pivoting class as a global custom element
-              nativeDefine.call(nativeRegistry, tagName, PivotCtor);
-              definition.PivotCtor = PivotCtor;
-              // Only cache after nativeDefine has been called, because if it throws an error
-              // (e.g. for an invalid tag name), then we don't want to cache anything.
-              definitionForConstructor.set(UserCtor, definition);
-              pivotCtorByTag.set(tagName, PivotCtor);
-          }
-          // Register a UserConstructor as "safe" to be used within a PivotConstructor
-          registeredUserCtors.add(UserCtor);
-          return PivotCtor;
-      };
-  }
-
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  let createScopedConstructor;
-  let CachedHTMLElement;
-  // We only call `createScopedRegistry()` if the browser supports custom elements and
-  // ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is enabled, because we don't want to patch eagerly if the flag is disabled
-  // or we're in a legacy browser.
-  if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
-    if (hasCustomElements) {
-      // If ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is true, then we eagerly initialize the scoped registry.
-      // It's assumed that ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is set *before* LWC loads, and never changes.
-      //
-      // Why not lazily patch in `createCustomElement`? Well, this could lead to subtle bugs, e.g.:
-      //
-      // 1. LWC loads
-      // 2. `const Ctor = class extends HTMLElement {}`
-      // 3. `lwc.createElement(...)` // here we lazily patch
-      // 4. `customElements.define('x-foo', Ctor)` // throws error because class is bound to stale HTMLElement
-      //
-      // To reduce the risk of this, it's safer to patch the registry eagerly.
-      createScopedConstructor = createScopedRegistry();
-      // It's important to cache window.HTMLElement here. Otherwise, someone else could overwrite window.HTMLElement (e.g.
-      // another copy of the engine, or another scoping implementation) and we would get "Illegal constructor" errors
-      // because the HTMLElement prototypes are mixed up.
-      //
-      // The reason this happens is that the scoping implementation overwrites window.HTMLElement and expects to work
-      // with that version of HTMLElement. So if you load two copies of the scoping implementation in the same environment,
-      // the second one may accidentally grab window.HTMLElement from the first (when doing `class extends HTMLElement`).
-      // Caching avoids this problem.
-      CachedHTMLElement = window.HTMLElement;
-    }
-  }
-  // Creates a constructor that is intended to be used as the UserConstructor in a scoped (pivots) registry.
-  // In this case, the upgradeCallback only needs to be defined once because we create these on-demand,
-  // multiple times per tag name.
-  const createUserConstructor = (HTMLElementToExtend, upgradeCallback, connectedCallback, disconnectedCallback) => {
-    // TODO [#2972]: this class should expose observedAttributes as necessary
-    return class UserConstructor extends HTMLElementToExtend {
-      constructor() {
-        super();
-        upgradeCallback(this);
-      }
-      // Note that there is no need to do the "avoid defining connectedCallback/disconnectedCallback" optimization
-      // here, because in create-scoped-registry.ts, the registered class will always have these callbacks anyway.
-      // See: https://github.com/salesforce/lwc/pull/3162#issuecomment-1311851174
-      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)) {
-      // This error should be impossible to hit
-      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);
-  }
-
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6587,29 +6272,22 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   /**
-   * We have three modes for creating custom elements:
+   * We have two modes for creating custom elements:
    *
    * 1. Compat (legacy) browser support (e.g. IE11). Totally custom, doesn't rely on native browser APIs.
    * 2. "Upgradable constructor" custom element. This allows us to have two LWC components with the same tag name,
    *    via a trick: every custom element constructor we define in the registry is basically the same. It's essentially
    *    a dummy `class extends HTMLElement` that accepts an `upgradeCallback` in its constructor ("upgradable
    *    constructor"), which allows us to have completely customized functionality for different components.
-   * 3. "Scoped" (or "pivot") custom elements. This relies on a sophisticated system that emulates the "scoped custom
-   *    elements registry" proposal, with support for avoiding conflicts in tag names both between LWC components and
-   *    between LWC components and third-party elements. This uses a similar trick to #2, but is much more complex
-   *    because it must patch the global `customElements` and `HTMLElement` objects.
    */
   let createCustomElement;
   if (hasCustomElements) {
-    if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
-      createCustomElement = createCustomElementScoped;
-    } else {
       // use the global registry, with an upgradable constructor for the defined custom element
       createCustomElement = createCustomElementUsingUpgradableConstructor;
-    }
-  } else {
-    // no registry available here
-    createCustomElement = createCustomElementCompat;
+  }
+  else {
+      // no registry available here
+      createCustomElement = createCustomElementCompat;
   }
 
   /*
@@ -6672,7 +6350,7 @@ var LWC = (function (exports) {
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.35.2 */
+      /** version: 2.37.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -7225,7 +6903,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.35.2 */
+  /* version: 2.37.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;