lwc 2.35.2 → 2.37.0

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

@@ -329,9 +329,9 @@ function htmlAttributeToProperty(attrName) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.35.2";
+const LWC_VERSION = "2.37.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.35.2 */
+/** version: 2.37.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -351,10 +351,8 @@ const features = {
     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) });
@@ -410,7 +408,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.35.2 */
+/** version: 2.37.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -474,7 +472,7 @@ function applyAriaReflection(prototype = Element.prototype) {
         }
     }
 }
-/** version: 2.35.2 */
+/** version: 2.37.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -540,7 +538,6 @@ if (process.env.NODE_ENV === 'test-karma-lwc') {
  * 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;
@@ -598,11 +595,11 @@ function onReportingEnabled(callback) {
 /**
  * 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);
     }
 }
 
@@ -877,7 +874,7 @@ function parseStyleText(cssText) {
 // 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];
         }
@@ -887,7 +884,7 @@ function cloneAndOmitKey(object, keyToOmit) {
 function flattenStylesheets(stylesheets) {
     const list = [];
     for (const stylesheet of stylesheets) {
-        if (!Array.isArray(stylesheet)) {
+        if (!isArray$1(stylesheet)) {
             list.push(stylesheet);
         }
         else {
@@ -3164,6 +3161,10 @@ function checkVersionMismatch(func, type) {
             // stylesheets and templates do not have user-meaningful names, but components do
             const friendlyName = type === 'component' ? `${type} ${func.name}` : type;
             logError(`LWC WARNING: current engine is v${LWC_VERSION}, but ${friendlyName} was compiled with v${version}.\nPlease update your compiled code or LWC engine so that the versions match.\nNo further warnings will appear.`);
+            report(1 /* ReportingEventId.CompilerRuntimeVersionMismatch */, {
+                compilerVersion: version,
+                runtimeVersion: LWC_VERSION,
+            });
         }
     }
 }
@@ -4899,7 +4900,12 @@ function allocateInSlot(vm, children, owner) {
     } 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 = {
@@ -5965,6 +5971,8 @@ function registerComponent(
 Ctor, { tmpl }) {
     if (isFunction$1(Ctor)) {
         if (process.env.NODE_ENV !== 'production') {
+            // There is no point in running this in production, because the version mismatch check relies
+            // on code comments which are stripped out in production by minifiers
             checkVersionMismatch(Ctor, 'component');
         }
         signedTemplateMap.set(Ctor, tmpl);
@@ -6229,20 +6237,37 @@ function validateComponentStylesheets(vm, stylesheets) {
 }
 // Validate and flatten any stylesheets defined as `static stylesheets`
 function computeStylesheets(vm, ctor) {
-  if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
-    const {
+  warnOnStylesheetsMutation(ctor);
+  const {
+    stylesheets
+  } = ctor;
+  if (!isUndefined$1(stylesheets)) {
+    const valid = validateComponentStylesheets(vm, stylesheets);
+    if (valid) {
+      return flattenStylesheets(stylesheets);
+    } else if (process.env.NODE_ENV !== 'production') {
+      logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+    }
+  }
+  return null;
+}
+function warnOnStylesheetsMutation(ctor) {
+  if (process.env.NODE_ENV !== 'production') {
+    let {
       stylesheets
     } = ctor;
-    if (!isUndefined$1(stylesheets)) {
-      const valid = validateComponentStylesheets(vm, stylesheets);
-      if (valid) {
-        return flattenStylesheets(stylesheets);
-      } else if (process.env.NODE_ENV !== 'production') {
-        logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+    defineProperty(ctor, 'stylesheets', {
+      enumerable: true,
+      configurable: true,
+      get() {
+        return stylesheets;
+      },
+      set(newValue) {
+        logWarnOnce(`Dynamically setting the "stylesheets" static property on ${ctor.name} ` + 'will not affect the stylesheets injected.');
+        stylesheets = newValue;
       }
-    }
+    });
   }
-  return null;
 }
 function computeShadowMode(vm, renderer) {
   const {
@@ -6615,7 +6640,7 @@ function forceRehydration(vm) {
 // 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];
@@ -6623,7 +6648,7 @@ const querySelectorAll = _globalThis[KEY__NATIVE_QUERY_SELECTOR_ALL];
 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);
@@ -6634,12 +6659,15 @@ function reportViolation(source, target, attrName) {
         // 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,
+    });
     if (process.env.NODE_ENV !== 'production') {
         // Avoid excessively logging to the console in the case of duplicates.
         logWarnOnce(`Element <${source.tagName.toLowerCase()}> uses attribute "${attrName}" to reference element ` +
             `<${target.tagName.toLowerCase()}>, which is not in the same shadow root. This will break in native shadow DOM. ` +
-            `For details, see: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates`, vm);
+            `For details, see: https://sfdc.co/synthetic-aria`, vm);
     }
 }
 function parseIdRefAttributeValue(attrValue) {
@@ -6666,7 +6694,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
                 const sourceElement = sourceElements[i];
                 const sourceRoot = sourceElement.getRootNode();
                 if (sourceRoot !== root) {
-                    reportViolation(sourceElement, elm, idRefAttrName);
+                    reportViolation$1(sourceElement, elm, idRefAttrName);
                     break;
                 }
             }
@@ -6681,7 +6709,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
                 const targetRoot = target.getRootNode();
                 if (targetRoot !== root) {
                     // target element's shadow root is not the same as ours
-                    reportViolation(elm, target, attrName);
+                    reportViolation$1(elm, target, attrName);
                 }
             }
         }
@@ -6690,7 +6718,7 @@ function detectSyntheticCrossRootAria(elm, attrName, attrValue) {
 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
     }
@@ -6742,12 +6770,110 @@ function isSyntheticShadowLoaded() {
 if (supportsCssEscape() && isSyntheticShadowLoaded()) {
     // Always run detection in dev mode, so we can at least print to the console
     if (process.env.NODE_ENV !== 'production') {
-        enableDetection();
+        enableDetection$1();
     }
     else {
         // 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);
+    if (process.env.NODE_ENV !== 'production') {
+      logWarnOnce(`Element <${elm.tagName.toLowerCase()}> ` + (isUndefined$1(vm) ? '' : `owned by <${vm.elm.tagName.toLowerCase()}> `) + `uses non-standard property "${prop}". This will be removed in a future version of LWC. ` + `See https://sfdc.co/deprecated-aria`);
+    }
+    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);
+    // The descriptor should exist because the @lwc/aria-reflection polyfill has run by now.
+    // This happens automatically because of the ordering of imports.
+    if (process.env.NODE_ENV !== 'production') {
+      /* istanbul ignore if */
+      if (isUndefined$1(descriptor) || isUndefined$1(descriptor.get) || isUndefined$1(descriptor.set)) {
+        // should never happen
+        throw new Error('detect-non-standard-aria.ts loaded before @lwc/aria-reflection');
+      }
+    }
+    // @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
+    if (process.env.NODE_ENV !== 'production') {
+      enableDetection();
+    } else {
+      // In prod mode, only enable detection if reporting is enabled
+      onReportingEnabled(enableDetection);
     }
+  }
 }
 
 /*
@@ -7234,12 +7360,13 @@ function setHooks(hooks) {
  */
 // See @lwc/engine-core/src/framework/template.ts
 const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
-// Via https://www.npmjs.com/package/object-observer
-const ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
 // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
-const STYLESHEET_FUNCTION_EXPANDOS = [
+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':
@@ -7262,7 +7389,20 @@ function getOriginalArrayMethod(prop) {
       return ArrayCopyWithin;
   }
 }
-let mutationWarningsSilenced = false;
+function reportViolation(type, eventId, prop) {
+  if (process.env.NODE_ENV !== 'production') {
+    logWarnOnce(`Mutating the "${prop}" property on a ${type} ` + `is deprecated and will be removed in a future version of LWC. ` + `See: https://sfdc.co/template-mutation`);
+  }
+  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) {
@@ -7271,7 +7411,7 @@ function warnOnArrayMutation(stylesheets) {
   for (const prop of ARRAY_MUTATION_METHODS) {
     const originalArrayMethod = getOriginalArrayMethod(prop);
     stylesheets[prop] = function arrayMutationWarningWrapper() {
-      logError(`Mutating the "stylesheets" array on a template function ` + `is deprecated and may be removed in a future version of LWC.`);
+      reportTemplateViolation('stylesheets');
       // @ts-ignore
       return originalArrayMethod.apply(this, arguments);
     };
@@ -7280,8 +7420,7 @@ function warnOnArrayMutation(stylesheets) {
 // Warn if the user tries to mutate a stylesheet factory function, e.g.:
 // `stylesheet.$scoped$ = true`
 function warnOnStylesheetFunctionMutation(stylesheet) {
-  // We could warn on other properties, but in practice only certain expandos are meaningful to LWC at runtime
-  for (const prop of STYLESHEET_FUNCTION_EXPANDOS) {
+  for (const prop of STYLESHEET_PROPS) {
     let value = stylesheet[prop];
     defineProperty(stylesheet, prop, {
       enumerable: true,
@@ -7290,14 +7429,14 @@ function warnOnStylesheetFunctionMutation(stylesheet) {
         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.`);
+        reportStylesheetViolation(prop);
         value = newValue;
       }
     });
   }
 }
 // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
-function warnOnStylesheetsMutation(stylesheets) {
+function trackStylesheetsMutation(stylesheets) {
   traverseStylesheets(stylesheets, subStylesheets => {
     if (isArray$1(subStylesheets)) {
       warnOnArrayMutation(subStylesheets);
@@ -7324,7 +7463,70 @@ function traverseStylesheets(stylesheets, callback) {
     }
   }
 }
+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);
@@ -7332,66 +7534,16 @@ function freezeTemplate(tmpl) {
       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;
-      }
-    });
-    // When ENABLE_FROZEN_TEMPLATE is false, warn in dev mode whenever someone is mutating the template
+    // 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
     if (process.env.NODE_ENV !== 'production') {
-      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.`);
-          // Avoid logging twice (for both stylesheetToken and stylesheetTokens)
-          mutationWarningsSilenced = true;
-          originalDescriptor.set.call(this, value);
-          mutationWarningsSilenced = false;
-        }
+      trackMutations(tmpl);
+    } else {
+      // In prod mode, we only track mutations if reporting is enabled
+      onReportingEnabled(() => {
+        trackMutations(tmpl);
       });
     }
   }
@@ -7419,7 +7571,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.35.2 */
+/* version: 2.37.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7762,545 +7914,6 @@ const createCustomElementUsingUpgradableConstructor = (tagName, upgradeCallback,
     }
 };
 
-/*
- * 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.
@@ -8308,29 +7921,22 @@ function createCustomElementScoped(tagName, upgradeCallback, connectedCallback,
  * 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;
 }
 
 /*
@@ -8393,7 +7999,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.35.2 */
+    /** version: 2.37.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -8954,6 +8560,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.35.2 */
+/* version: 2.37.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };