lwc 2.35.2 → 2.37.0

package/dist/engine-dom/iife/es5/engine-dom.js

@@ -327,9 +327,9 @@ var LWC = (function (exports) {
    * 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
-  var LWC_VERSION = "2.35.2";
+  var LWC_VERSION = "2.37.0";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.35.2 */
+  /** version: 2.37.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -349,10 +349,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
+    DISABLE_ARIA_REFLECTION_POLYFILL: null
   };
   if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', {
@@ -410,7 +408,7 @@ var LWC = (function (exports) {
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.35.2 */
+  /** version: 2.37.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -474,7 +472,7 @@ var LWC = (function (exports) {
       }
     }
   }
-  /** version: 2.35.2 */
+  /** version: 2.37.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -540,7 +538,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 **/
   var onReportingEnabledCallbacks = [];
   /** The currently assigned reporting dispatcher. */
   var currentDispatcher$1 = noop;
@@ -597,11 +594,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);
     }
   }
 
@@ -894,31 +891,39 @@ var LWC = (function (exports) {
   // Make a shallow copy of an object but omit the given key
   function cloneAndOmitKey(object, keyToOmit) {
     var result = {};
-    for (var _i7 = 0, _Object$keys = Object.keys(object); _i7 < _Object$keys.length; _i7++) {
-      var key = _Object$keys[_i7];
-      if (key !== keyToOmit) {
-        result[key] = object[key];
+    var _iterator2 = _createForOfIteratorHelper(keys(object)),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var key = _step2.value;
+        if (key !== keyToOmit) {
+          result[key] = object[key];
+        }
       }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
     }
     return result;
   }
   function flattenStylesheets(stylesheets) {
     var list = [];
-    var _iterator2 = _createForOfIteratorHelper(stylesheets),
-      _step2;
+    var _iterator3 = _createForOfIteratorHelper(stylesheets),
+      _step3;
     try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var stylesheet = _step2.value;
-        if (!Array.isArray(stylesheet)) {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var stylesheet = _step3.value;
+        if (!isArray$1(stylesheet)) {
           list.push(stylesheet);
         } else {
           list.push.apply(list, _toConsumableArray(flattenStylesheets(stylesheet)));
         }
       }
     } catch (err) {
-      _iterator2.e(err);
+      _iterator3.e(err);
     } finally {
-      _iterator2.f();
+      _iterator3.f();
     }
     return list;
   }
@@ -2397,17 +2402,17 @@ var LWC = (function (exports) {
       var refs = refsCache.get(refVNodes);
       if (isUndefined$1(refs)) {
         refs = create(null);
-        var _iterator3 = _createForOfIteratorHelper(keys(refVNodes)),
-          _step3;
+        var _iterator4 = _createForOfIteratorHelper(keys(refVNodes)),
+          _step4;
         try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var key = _step3.value;
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var key = _step4.value;
             refs[key] = refVNodes[key].elm;
           }
         } catch (err) {
-          _iterator3.e(err);
+          _iterator4.e(err);
         } finally {
-          _iterator3.f();
+          _iterator4.f();
         }
         freeze(refs);
         refsCache.set(refVNodes, refs);
@@ -2489,7 +2494,7 @@ var LWC = (function (exports) {
   var queryMethods = ['getElementsByClassName', 'getElementsByTagName', 'querySelector', 'querySelectorAll'];
   // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
   var _loop = function _loop() {
-    var queryMethod = _queryMethods[_i8];
+    var queryMethod = _queryMethods[_i7];
     queryAndChildGetterDescriptors[queryMethod] = {
       value: function value(arg) {
         var vm = getAssociatedVM(this);
@@ -2505,7 +2510,7 @@ var LWC = (function (exports) {
       writable: true
     };
   };
-  for (var _i8 = 0, _queryMethods = queryMethods; _i8 < _queryMethods.length; _i8++) {
+  for (var _i7 = 0, _queryMethods = queryMethods; _i7 < _queryMethods.length; _i7++) {
     _loop();
   }
   defineProperties(LightningElement.prototype, queryAndChildGetterDescriptors);
@@ -2818,16 +2823,16 @@ var LWC = (function (exports) {
   }
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
-    for (var _i9 = 0, len = wiredConnecting.length; _i9 < len; _i9 += 1) {
-      wiredConnecting[_i9]();
+    for (var _i8 = 0, len = wiredConnecting.length; _i8 < len; _i8 += 1) {
+      wiredConnecting[_i8]();
     }
   }
   function disconnectWireAdapters(vm) {
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i10 = 0, len = wiredDisconnecting.length; _i10 < len; _i10 += 1) {
-        wiredDisconnecting[_i10]();
+      for (var _i9 = 0, len = wiredDisconnecting.length; _i9 < len; _i9 += 1) {
+        wiredDisconnecting[_i9]();
       }
     }, noop);
   }
@@ -3161,8 +3166,8 @@ var LWC = (function (exports) {
       }
     }
     if (!isUndefined$1(fields)) {
-      for (var _i11 = 0, n = fields.length; _i11 < n; _i11++) {
-        var _fieldName2 = fields[_i11];
+      for (var _i10 = 0, n = fields.length; _i10 < n; _i10++) {
+        var _fieldName2 = fields[_i10];
         descriptor = getOwnPropertyDescriptor$1(proto, _fieldName2);
         if (process.env.NODE_ENV !== 'production') {
           validateObservedField(Ctor, _fieldName2, descriptor);
@@ -3234,6 +3239,10 @@ var LWC = (function (exports) {
         // stylesheets and templates do not have user-meaningful names, but components do
         var friendlyName = type === 'component' ? "".concat(type, " ").concat(func.name) : type;
         logError("LWC WARNING: current engine is v".concat(LWC_VERSION, ", but ").concat(friendlyName, " was compiled with v").concat(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
+        });
       }
     }
   }
@@ -3384,8 +3393,8 @@ var LWC = (function (exports) {
       superObservedAttributes = _SuperClass$observedA === void 0 ? [] : _SuperClass$observedA;
     var descriptors = create(null);
     // expose getters and setters for each public props on the new Element Bridge
-    for (var _i12 = 0, len = props.length; _i12 < len; _i12 += 1) {
-      var _propName = props[_i12];
+    for (var _i11 = 0, len = props.length; _i11 < len; _i11 += 1) {
+      var _propName = props[_i11];
       attributeToPropMap[htmlPropertyToAttribute(_propName)] = _propName;
       descriptors[_propName] = {
         get: createGetter(_propName),
@@ -3395,8 +3404,8 @@ var LWC = (function (exports) {
       };
     }
     // expose public methods as props on the new Element Bridge
-    for (var _i13 = 0, _len = methods.length; _i13 < _len; _i13 += 1) {
-      var methodName = methods[_i13];
+    for (var _i12 = 0, _len = methods.length; _i12 < _len; _i12 += 1) {
+      var methodName = methods[_i12];
       descriptors[methodName] = {
         value: createMethodCaller(methodName),
         writable: true,
@@ -3925,8 +3934,8 @@ var LWC = (function (exports) {
   function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     var content = [];
     var root;
-    for (var _i14 = 0; _i14 < stylesheets.length; _i14++) {
-      var stylesheet = stylesheets[_i14];
+    for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
+      var stylesheet = stylesheets[_i13];
       if (isArray$1(stylesheet)) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
       } else {
@@ -4034,8 +4043,8 @@ var LWC = (function (exports) {
       shadowMode = vm.shadowMode,
       insertStylesheet = vm.renderer.insertStylesheet;
     if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-      for (var _i15 = 0; _i15 < stylesheets.length; _i15++) {
-        insertStylesheet(stylesheets[_i15]);
+      for (var _i14 = 0; _i14 < stylesheets.length; _i14++) {
+        insertStylesheet(stylesheets[_i14]);
       }
     } else if (vm.hydrated) {
       // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
@@ -4048,8 +4057,8 @@ var LWC = (function (exports) {
       var root = getNearestNativeShadowComponent(vm);
       // null root means a global style
       var target = isNull(root) ? undefined : root.shadowRoot;
-      for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
-        insertStylesheet(stylesheets[_i16], target);
+      for (var _i15 = 0; _i15 < stylesheets.length; _i15++) {
+        insertStylesheet(stylesheets[_i15], target);
       }
     }
     return null;
@@ -4363,8 +4372,8 @@ var LWC = (function (exports) {
       return;
     }
     var setCSSStyleProperty = renderer.setCSSStyleProperty;
-    for (var _i17 = 0; _i17 < styleDecls.length; _i17++) {
-      var _styleDecls$_i = _slicedToArray(styleDecls[_i17], 3),
+    for (var _i16 = 0; _i16 < styleDecls.length; _i16++) {
+      var _styleDecls$_i = _slicedToArray(styleDecls[_i16], 3),
         prop = _styleDecls$_i[0],
         value = _styleDecls$_i[1],
         important = _styleDecls$_i[2];
@@ -4846,8 +4855,8 @@ var LWC = (function (exports) {
     // If no VFragment is found in children, we don't need to traverse anything or mark the children dynamic and can return early.
     var nodeStack = [];
     var fragmentFound = false;
-    for (var _i18 = children.length - 1; _i18 > -1; _i18 -= 1) {
-      var child = children[_i18];
+    for (var _i17 = children.length - 1; _i17 > -1; _i17 -= 1) {
+      var child = children[_i17];
       ArrayPush$1.call(nodeStack, child);
       fragmentFound = fragmentFound || !!(child && isVFragment(child));
     }
@@ -4859,8 +4868,8 @@ var LWC = (function (exports) {
       if (!isNull(currentNode) && isVFragment(currentNode)) {
         var fChildren = currentNode.children;
         // Ignore the start and end text node delimiters
-        for (var _i19 = fChildren.length - 2; _i19 > 0; _i19 -= 1) {
-          ArrayPush$1.call(nodeStack, fChildren[_i19]);
+        for (var _i18 = fChildren.length - 2; _i18 > 0; _i18 -= 1) {
+          ArrayPush$1.call(nodeStack, fChildren[_i18]);
         }
       } else {
         ArrayPush$1.call(flattenedChildren, currentNode);
@@ -4899,8 +4908,8 @@ var LWC = (function (exports) {
     var oldSlotsMapping = vm.cmpSlots.slotAssignments;
     var cmpSlotsMapping = create(null);
     // Collect all slots into cmpSlotsMapping
-    for (var _i20 = 0, len = children.length; _i20 < len; _i20 += 1) {
-      var vnode = children[_i20];
+    for (var _i19 = 0, len = children.length; _i19 < len; _i19 += 1) {
+      var vnode = children[_i19];
       if (isNull(vnode)) {
         continue;
       }
@@ -4910,7 +4919,12 @@ var LWC = (function (exports) {
       } else if (isVScopedSlotFragment(vnode)) {
         slotName = vnode.slotName;
       }
-      var 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)
+      var normalizedSlotName = '' + slotName;
+      var vnodes = cmpSlotsMapping[normalizedSlotName] = cmpSlotsMapping[normalizedSlotName] || [];
       ArrayPush$1.call(vnodes, vnode);
     }
     vm.cmpSlots = {
@@ -4925,8 +4939,8 @@ var LWC = (function (exports) {
         markComponentAsDirty(vm);
         return;
       }
-      for (var _i21 = 0, _len2 = oldKeys.length; _i21 < _len2; _i21 += 1) {
-        var key = oldKeys[_i21];
+      for (var _i20 = 0, _len2 = oldKeys.length; _i20 < _len2; _i20 += 1) {
+        var key = oldKeys[_i20];
         if (isUndefined$1(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
           markComponentAsDirty(vm);
           return;
@@ -5049,11 +5063,11 @@ var LWC = (function (exports) {
       if (oldStartIdx > oldEndIdx) {
         // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
         // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-        var _i22 = newEndIdx;
+        var _i21 = newEndIdx;
         var n;
         do {
-          n = newCh[++_i22];
-        } while (!isVNode(n) && _i22 < newChEnd);
+          n = newCh[++_i21];
+        } while (!isVNode(n) && _i21 < newChEnd);
         before = isVNode(n) ? n.elm : null;
         mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
       } else {
@@ -5078,9 +5092,9 @@ var LWC = (function (exports) {
     // if the old list is not empty, the new list MUST have the same
     // amount of nodes, that's why we call this static children
     var anchor = null;
-    for (var _i23 = c2Length - 1; _i23 >= 0; _i23 -= 1) {
-      var n1 = c1[_i23];
-      var n2 = c2[_i23];
+    for (var _i22 = c2Length - 1; _i22 >= 0; _i22 -= 1) {
+      var n1 = c1[_i22];
+      var n2 = c2[_i22];
       if (n2 !== n1) {
         if (isVNode(n1)) {
           if (isVNode(n2)) {
@@ -5205,8 +5219,8 @@ var LWC = (function (exports) {
     if (!isUndefined$1(slotset) && !isUndefined$1(slotset.slotAssignments) && !isUndefined$1(slotset.slotAssignments[slotName]) && slotset.slotAssignments[slotName].length !== 0) {
       var newChildren = [];
       var slotAssignments = slotset.slotAssignments[slotName];
-      for (var _i24 = 0; _i24 < slotAssignments.length; _i24++) {
-        var vnode = slotAssignments[_i24];
+      for (var _i23 = 0; _i23 < slotAssignments.length; _i23++) {
+        var vnode = slotAssignments[_i23];
         if (!isNull(vnode)) {
           var assignedNodeIsScopedSlot = isVScopedSlotFragment(vnode);
           // The only sniff test for a scoped <slot> element is the presence of `slotData`
@@ -5728,23 +5742,23 @@ var LWC = (function (exports) {
         var classAttrToken = hasScopedStyles && hasStyleToken ? " class=\"".concat(stylesheetToken, "\"") : '';
         var attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
         var htmlFragment = '';
-        for (var _i25 = 0, n = keys.length; _i25 < n; _i25++) {
-          switch (keys[_i25]) {
+        for (var _i24 = 0, n = keys.length; _i24 < n; _i24++) {
+          switch (keys[_i24]) {
             case 0:
               // styleToken in existing class attr
-              htmlFragment += strings[_i25] + classToken;
+              htmlFragment += strings[_i24] + classToken;
               break;
             case 1:
               // styleToken for added class attr
-              htmlFragment += strings[_i25] + classAttrToken;
+              htmlFragment += strings[_i24] + classAttrToken;
               break;
             case 2:
               // styleToken as attr
-              htmlFragment += strings[_i25] + attrToken;
+              htmlFragment += strings[_i24] + attrToken;
               break;
             case 3:
               // ${1}${2}
-              htmlFragment += strings[_i25] + classAttrToken + attrToken;
+              htmlFragment += strings[_i24] + classAttrToken + attrToken;
               break;
           }
         }
@@ -5849,8 +5863,8 @@ var LWC = (function (exports) {
   }
   function computeHasScopedStylesInStylesheets(stylesheets) {
     if (hasStyles(stylesheets)) {
-      for (var _i26 = 0; _i26 < stylesheets.length; _i26++) {
-        if (isTrue(stylesheets[_i26][KEY__SCOPED_CSS])) {
+      for (var _i25 = 0; _i25 < stylesheets.length; _i25++) {
+        if (isTrue(stylesheets[_i25][KEY__SCOPED_CSS])) {
           return true;
         }
       }
@@ -5974,6 +5988,8 @@ var LWC = (function (exports) {
     var tmpl = _ref4.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);
@@ -6046,8 +6062,8 @@ var LWC = (function (exports) {
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
-    for (var _i27 = 0; _i27 < hooks.length; ++_i27) {
-      var hookName = hooks[_i27];
+    for (var _i26 = 0; _i26 < hooks.length; ++_i26) {
+      var hookName = hooks[_i26];
       if (hookName in service) {
         var l = Services[hookName];
         if (isUndefined$1(l)) {
@@ -6064,8 +6080,8 @@ var LWC = (function (exports) {
     var component = vm.component,
       def = vm.def,
       context = vm.context;
-    for (var _i28 = 0, len = cbs.length; _i28 < len; ++_i28) {
-      cbs[_i28].call(undefined, component, {}, def, context);
+    for (var _i27 = 0, len = cbs.length; _i27 < len; ++_i27) {
+      cbs[_i27].call(undefined, component, {}, def, context);
     }
   }
 
@@ -6219,8 +6235,8 @@ var LWC = (function (exports) {
     var valid = true;
     var validate = function validate(arrayOrStylesheet) {
       if (isArray$1(arrayOrStylesheet)) {
-        for (var _i29 = 0; _i29 < arrayOrStylesheet.length; _i29++) {
-          validate(arrayOrStylesheet[_i29]);
+        for (var _i28 = 0; _i28 < arrayOrStylesheet.length; _i28++) {
+          validate(arrayOrStylesheet[_i28]);
         }
       } else if (!isFunction$1(arrayOrStylesheet)) {
         // function assumed to be a stylesheet factory
@@ -6236,19 +6252,34 @@ var LWC = (function (exports) {
   }
   // Validate and flatten any stylesheets defined as `static stylesheets`
   function computeStylesheets(vm, ctor) {
-    if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
-      var stylesheets = ctor.stylesheets;
-      if (!isUndefined$1(stylesheets)) {
-        var 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 <".concat(vm.tagName, ">"), vm);
-        }
+    warnOnStylesheetsMutation(ctor);
+    var stylesheets = ctor.stylesheets;
+    if (!isUndefined$1(stylesheets)) {
+      var 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 <".concat(vm.tagName, ">"), vm);
       }
     }
     return null;
   }
+  function warnOnStylesheetsMutation(ctor) {
+    if (process.env.NODE_ENV !== 'production') {
+      var stylesheets = ctor.stylesheets;
+      defineProperty(ctor, 'stylesheets', {
+        enumerable: true,
+        configurable: true,
+        get: function get() {
+          return stylesheets;
+        },
+        set: function set(newValue) {
+          logWarnOnce("Dynamically setting the \"stylesheets\" static property on ".concat(ctor.name, " ") + 'will not affect the stylesheets injected.');
+          stylesheets = newValue;
+        }
+      });
+    }
+  }
   function computeShadowMode(vm, renderer) {
     var def = vm.def;
     var isSyntheticShadowDefined = renderer.isSyntheticShadowDefined,
@@ -6373,17 +6404,17 @@ var LWC = (function (exports) {
       return a.idx - b.idx;
     });
     rehydrateQueue = []; // reset to a new queue
-    for (var _i30 = 0, len = vms.length; _i30 < len; _i30 += 1) {
-      var vm = vms[_i30];
+    for (var _i29 = 0, len = vms.length; _i29 < len; _i29 += 1) {
+      var vm = vms[_i29];
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i30 + 1 < len) {
+        if (_i29 + 1 < len) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i30 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i29 + 1));
         }
         // we need to end the measure before throwing.
         logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
@@ -6452,8 +6483,8 @@ var LWC = (function (exports) {
     var vCustomElementCollection = vm.velements;
     // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
-    for (var _i31 = vCustomElementCollection.length - 1; _i31 >= 0; _i31 -= 1) {
-      var elm = vCustomElementCollection[_i31].elm;
+    for (var _i30 = vCustomElementCollection.length - 1; _i30 >= 0; _i30 -= 1) {
+      var elm = vCustomElementCollection[_i30].elm;
       // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
@@ -6484,8 +6515,8 @@ var LWC = (function (exports) {
    * defined on its shadow.
    */
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i32 = 0, len = vnodes.length; _i32 < len; _i32 += 1) {
-      var vnode = vnodes[_i32];
+    for (var _i31 = 0, len = vnodes.length; _i31 < len; _i31 += 1) {
+      var vnode = vnodes[_i31];
       if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
         switch (vnode.type) {
           case 2 /* VNodeType.Element */:
@@ -6509,8 +6540,8 @@ var LWC = (function (exports) {
     var children = vm.children,
       renderRoot = vm.renderRoot,
       remove = vm.renderer.remove;
-    for (var _i33 = 0, len = children.length; _i33 < len; _i33++) {
-      var child = children[_i33];
+    for (var _i32 = 0, len = children.length; _i32 < len; _i32++) {
+      var child = children[_i32];
       if (!isNull(child) && !isUndefined$1(child.elm)) {
         remove(child.elm, renderRoot);
       }
@@ -6592,7 +6623,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
   var getElementById = _globalThis[KEY__NATIVE_GET_ELEMENT_BY_ID];
@@ -6600,7 +6631,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.
     var vm = getAssociatedVMIfPresent(source.getRootNode().host);
@@ -6611,10 +6642,13 @@ 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
+    });
     if (process.env.NODE_ENV !== 'production') {
       // Avoid excessively logging to the console in the case of duplicates.
-      logWarnOnce("Element <".concat(source.tagName.toLowerCase(), "> uses attribute \"").concat(attrName, "\" to reference element ") + "<".concat(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);
+      logWarnOnce("Element <".concat(source.tagName.toLowerCase(), "> uses attribute \"").concat(attrName, "\" to reference element ") + "<".concat(target.tagName.toLowerCase(), ">, which is not in the same shadow root. This will break in native shadow DOM. ") + "For details, see: https://sfdc.co/synthetic-aria", vm);
     }
   }
   function parseIdRefAttributeValue(attrValue) {
@@ -6632,57 +6666,57 @@ var LWC = (function (exports) {
         // if our id is null or empty, nobody can reference us
         return;
       }
-      var _iterator4 = _createForOfIteratorHelper(ID_REFERENCING_ATTRIBUTES_SET),
-        _step4;
+      var _iterator5 = _createForOfIteratorHelper(ID_REFERENCING_ATTRIBUTES_SET),
+        _step5;
       try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var idRefAttrName = _step4.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var idRefAttrName = _step5.value;
           // Query all global elements with this attribute. The attribute selector syntax `~=` is for values
           // that reference multiple IDs, separated by whitespace.
           var query = "[".concat(idRefAttrName, "~=\"").concat(CSS.escape(attrValue), "\"]");
           var sourceElements = querySelectorAll.call(document, query);
-          for (var _i34 = 0; _i34 < sourceElements.length; _i34++) {
-            var sourceElement = sourceElements[_i34];
+          for (var _i33 = 0; _i33 < sourceElements.length; _i33++) {
+            var sourceElement = sourceElements[_i33];
             var sourceRoot = sourceElement.getRootNode();
             if (sourceRoot !== root) {
-              reportViolation(sourceElement, elm, idRefAttrName);
+              reportViolation$1(sourceElement, elm, idRefAttrName);
               break;
             }
           }
         }
       } catch (err) {
-        _iterator4.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator4.f();
+        _iterator5.f();
       }
     } else {
       // elm is the source, find the target
       var ids = parseIdRefAttributeValue(attrValue);
-      var _iterator5 = _createForOfIteratorHelper(ids),
-        _step5;
+      var _iterator6 = _createForOfIteratorHelper(ids),
+        _step6;
       try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var id = _step5.value;
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          var id = _step6.value;
           var target = getElementById.call(document, id);
           if (!isNull(target)) {
             var 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);
             }
           }
         }
       } catch (err) {
-        _iterator5.e(err);
+        _iterator6.e(err);
       } finally {
-        _iterator5.f();
+        _iterator6.f();
       }
     }
   }
   var 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
     }
@@ -6736,10 +6770,116 @@ var LWC = (function (exports) {
   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
+  var 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
+    var _elm$getRootNode = elm.getRootNode(),
+      host = _elm$getRootNode.host;
+    var 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
+    var parentElement = elm;
+    while (!isNull(parentElement = parentElement.parentElement)) {
+      if (isLightningElement(parentElement)) {
+        var _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)) {
+      var vm = findVM(elm);
+      if (process.env.NODE_ENV !== 'production') {
+        logWarnOnce("Element <".concat(elm.tagName.toLowerCase(), "> ") + (isUndefined$1(vm) ? '' : "owned by <".concat(vm.elm.tagName.toLowerCase(), "> ")) + "uses non-standard property \"".concat(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() {
+    var _Element = Element,
+      prototype = _Element.prototype;
+    var _iterator7 = _createForOfIteratorHelper(NON_STANDARD_ARIA_PROPS),
+      _step7;
+    try {
+      var _loop3 = function _loop3() {
+        var prop = _step7.value;
+        var 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
+        var _get4 = descriptor.get,
+          _set4 = descriptor.set;
+        defineProperty(prototype, prop, {
+          get: function get() {
+            checkAndReportViolation(this, prop);
+            return _get4.call(this);
+          },
+          set: function set(val) {
+            checkAndReportViolation(this, prop);
+            return _set4.call(this, val);
+          },
+          configurable: true,
+          enumerable: true
+        });
+      };
+      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+        _loop3();
+      }
+    } catch (err) {
+      _iterator7.e(err);
+    } finally {
+      _iterator7.f();
+    }
+  }
+  // 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);
+      }
     }
   }
 
@@ -6977,8 +7117,8 @@ var LWC = (function (exports) {
     var nextNode = node;
     var anchor = null;
     var renderer = owner.renderer;
-    for (var _i35 = 0; _i35 < children.length; _i35++) {
-      var childVnode = children[_i35];
+    for (var _i34 = 0; _i34 < children.length; _i34++) {
+      var childVnode = children[_i34];
       if (!isNull(childVnode)) {
         if (nextNode) {
           nextNode = hydrateNode(nextNode, childVnode, renderer);
@@ -7056,8 +7196,8 @@ var LWC = (function (exports) {
     var nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
-    for (var _i36 = 0, _Object$entries = Object.entries(attrs); _i36 < _Object$entries.length; _i36++) {
-      var _Object$entries$_i = _slicedToArray(_Object$entries[_i36], 2),
+    for (var _i35 = 0, _Object$entries = Object.entries(attrs); _i35 < _Object$entries.length; _i35++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i35], 2),
         attrName = _Object$entries$_i[0],
         attrValue = _Object$entries$_i[1];
       var owner = vnode.owner;
@@ -7158,8 +7298,8 @@ var LWC = (function (exports) {
       var parsedVnodeStyle = parseStyleText(elmStyle);
       var expectedStyle = [];
       // styleMap is used when style is set to static value.
-      for (var _i37 = 0, n = styleDecls.length; _i37 < n; _i37++) {
-        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i37], 3),
+      for (var _i36 = 0, n = styleDecls.length; _i36 < n; _i36++) {
+        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i36], 3),
           prop = _styleDecls$_i2[0],
           value = _styleDecls$_i2[1],
           important = _styleDecls$_i2[2];
@@ -7242,12 +7382,13 @@ var LWC = (function (exports) {
    */
   // See @lwc/engine-core/src/framework/template.ts
   var TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
-  // Via https://www.npmjs.com/package/object-observer
-  var 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
-  var STYLESHEET_FUNCTION_EXPANDOS = [
+  var STYLESHEET_PROPS = [
   // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
   '$scoped$'];
+  // Via https://www.npmjs.com/package/object-observer
+  var ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
+  var mutationTrackingDisabled = false;
   function getOriginalArrayMethod(prop) {
     switch (prop) {
       case 'pop':
@@ -7270,42 +7411,54 @@ var LWC = (function (exports) {
         return ArrayCopyWithin;
     }
   }
-  var mutationWarningsSilenced = false;
+  function reportViolation(type, eventId, prop) {
+    if (process.env.NODE_ENV !== 'production') {
+      logWarnOnce("Mutating the \"".concat(prop, "\" property on a ").concat(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) {
     // 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.
-    var _iterator6 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
-      _step6;
+    var _iterator8 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
+      _step8;
     try {
-      var _loop3 = function _loop3() {
-        var prop = _step6.value;
+      var _loop4 = function _loop4() {
+        var prop = _step8.value;
         var 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);
         };
       };
-      for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-        _loop3();
+      for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+        _loop4();
       }
     } catch (err) {
-      _iterator6.e(err);
+      _iterator8.e(err);
     } finally {
-      _iterator6.f();
+      _iterator8.f();
     }
   }
   // 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
-    var _iterator7 = _createForOfIteratorHelper(STYLESHEET_FUNCTION_EXPANDOS),
-      _step7;
+    var _iterator9 = _createForOfIteratorHelper(STYLESHEET_PROPS),
+      _step9;
     try {
-      var _loop4 = function _loop4() {
-        var prop = _step7.value;
+      var _loop5 = function _loop5() {
+        var prop = _step9.value;
         var value = stylesheet[prop];
         defineProperty(stylesheet, prop, {
           enumerable: true,
@@ -7314,22 +7467,22 @@ var LWC = (function (exports) {
             return value;
           },
           set: function set(newValue) {
-            logError("Dynamically setting the \"".concat(prop, "\" property on a stylesheet function ") + "is deprecated and may be removed in a future version of LWC.");
+            reportStylesheetViolation(prop);
             value = newValue;
           }
         });
       };
-      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-        _loop4();
+      for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+        _loop5();
       }
     } catch (err) {
-      _iterator7.e(err);
+      _iterator9.e(err);
     } finally {
-      _iterator7.f();
+      _iterator9.f();
     }
   }
   // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
-  function warnOnStylesheetsMutation(stylesheets) {
+  function trackStylesheetsMutation(stylesheets) {
     traverseStylesheets(stylesheets, function (subStylesheets) {
       if (isArray$1(subStylesheets)) {
         warnOnArrayMutation(subStylesheets);
@@ -7347,8 +7500,8 @@ var LWC = (function (exports) {
   // Deep-traverse an array (of arrays) of stylesheet factory functions, and call the callback for every array/function
   function traverseStylesheets(stylesheets, callback) {
     callback(stylesheets);
-    for (var _i38 = 0; _i38 < stylesheets.length; _i38++) {
-      var stylesheet = stylesheets[_i38];
+    for (var _i37 = 0; _i37 < stylesheets.length; _i37++) {
+      var stylesheet = stylesheets[_i37];
       if (isArray$1(stylesheet)) {
         traverseStylesheets(stylesheet, callback);
       } else {
@@ -7356,7 +7509,80 @@ var LWC = (function (exports) {
       }
     }
   }
+  function trackMutations(tmpl) {
+    if (!isUndefined$1(tmpl.stylesheets)) {
+      trackStylesheetsMutation(tmpl.stylesheets);
+    }
+    var _iterator10 = _createForOfIteratorHelper(TEMPLATE_PROPS),
+      _step10;
+    try {
+      var _loop6 = function _loop6() {
+        var prop = _step10.value;
+        var value = tmpl[prop];
+        defineProperty(tmpl, prop, {
+          enumerable: true,
+          configurable: true,
+          get: function get() {
+            return value;
+          },
+          set: function set(newValue) {
+            if (!mutationTrackingDisabled) {
+              reportTemplateViolation(prop);
+            }
+            value = newValue;
+          }
+        });
+      };
+      for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+        _loop6();
+      }
+    } catch (err) {
+      _iterator10.e(err);
+    } finally {
+      _iterator10.f();
+    }
+    var originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
+    defineProperty(tmpl, 'stylesheetTokens', {
+      enumerable: true,
+      configurable: true,
+      get: originalDescriptor.get,
+      set: function 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: function get() {
+        var stylesheetToken = this.stylesheetToken;
+        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: "".concat(stylesheetToken, "-host"),
+          shadowAttribute: stylesheetToken
+        };
+      },
+      set: function 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);
@@ -7364,76 +7590,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: function get() {
-          var stylesheetToken = this.stylesheetToken;
-          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: "".concat(stylesheetToken, "-host"),
-            shadowAttribute: stylesheetToken
-          };
-        },
-        set: function 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);
-        }
-        var _iterator8 = _createForOfIteratorHelper(TEMPLATE_PROPS),
-          _step8;
-        try {
-          var _loop5 = function _loop5() {
-            var prop = _step8.value;
-            var value = tmpl[prop];
-            defineProperty(tmpl, prop, {
-              enumerable: true,
-              configurable: true,
-              get: function get() {
-                return value;
-              },
-              set: function set(newValue) {
-                if (!mutationWarningsSilenced) {
-                  logError("Dynamically setting the \"".concat(prop, "\" property on a template function ") + "is deprecated and may be removed in a future version of LWC.");
-                }
-                value = newValue;
-              }
-            });
-          };
-          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-            _loop5();
-          }
-        } catch (err) {
-          _iterator8.e(err);
-        } finally {
-          _iterator8.f();
-        }
-        var originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
-        defineProperty(tmpl, 'stylesheetTokens', {
-          enumerable: true,
-          configurable: true,
-          get: originalDescriptor.get,
-          set: function 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(function () {
+          trackMutations(tmpl);
         });
       }
     }
@@ -7461,7 +7627,7 @@ var LWC = (function (exports) {
     }
     return ctor;
   }
-  /* version: 2.35.2 */
+  /* version: 2.37.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7805,610 +7971,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.');
-    }
-    var _window = window,
-      NativeHTMLElement = _window.HTMLElement;
-    var _NativeHTMLElement$pr = NativeHTMLElement.prototype,
-      nativeHasAttribute = _NativeHTMLElement$pr.hasAttribute,
-      nativeSetAttribute = _NativeHTMLElement$pr.setAttribute,
-      nativeRemoveAttribute = _NativeHTMLElement$pr.removeAttribute,
-      nativeGetAttribute = _NativeHTMLElement$pr.getAttribute;
-    var definitionForElement = new WeakMap();
-    var pendingRegistryForElement = new WeakMap();
-    var definitionForConstructor = new WeakMap();
-    var registeredUserCtors = new WeakSet();
-    var registeredPivotCtors = new WeakSet();
-    var pivotCtorByTag = new Map();
-    var globalDefinitionsByTag = new Map();
-    var globalDefinitionsByClass = new Map();
-    var awaitingUpgrade = new Map();
-    var pendingWhenDefinedCallbacks = new Map();
-    var EMPTY_SET = new Set();
-    function createDefinitionRecord(constructor) {
-      var _a;
-      var _constructor$prototyp = constructor.prototype,
-        connectedCallback = _constructor$prototyp.connectedCallback,
-        disconnectedCallback = _constructor$prototyp.disconnectedCallback,
-        formAssociatedCallback = _constructor$prototyp.formAssociatedCallback,
-        formDisabledCallback = _constructor$prototyp.formDisabledCallback,
-        formResetCallback = _constructor$prototyp.formResetCallback,
-        formStateRestoreCallback = _constructor$prototyp.formStateRestoreCallback,
-        adoptedCallback = _constructor$prototyp.adoptedCallback,
-        attributeChangedCallback = _constructor$prototyp.attributeChangedCallback;
-      var formAssociated = Boolean(constructor.formAssociated);
-      var observedAttributes = new Set((_a = constructor.observedAttributes) !== null && _a !== void 0 ? _a : []);
-      return {
-        UserCtor: constructor,
-        PivotCtor: undefined,
-        connectedCallback: connectedCallback,
-        disconnectedCallback: disconnectedCallback,
-        formAssociatedCallback: formAssociatedCallback,
-        formDisabledCallback: formDisabledCallback,
-        formResetCallback: formResetCallback,
-        formStateRestoreCallback: formStateRestoreCallback,
-        adoptedCallback: adoptedCallback,
-        attributeChangedCallback: attributeChangedCallback,
-        observedAttributes: observedAttributes,
-        formAssociated: 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) {
-      var PivotCtor = /*#__PURE__*/function (_NativeHTMLElement) {
-        _inherits(PivotCtor, _NativeHTMLElement);
-        var _super7 = _createSuper(PivotCtor);
-        function PivotCtor(UserCtor) {
-          var _this4;
-          _classCallCheck(this, PivotCtor);
-          // 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.
-          _this4 = _super7.call(this);
-          var 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: ".concat(UserCtor.name, "."));
-            }
-          }
-          var definition = userCtorIsDefined ? getOrCreateDefinitionForConstructor(UserCtor) : globalDefinitionsByTag.get(tagName);
-          if (!isUndefined$1(definition)) {
-            internalUpgrade(_assertThisInitialized(_this4), 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(_assertThisInitialized(_this4), registeredDefinition);
-          }
-          return _this4;
-        }
-        _createClass(PivotCtor, [{
-          key: "connectedCallback",
-          value: function connectedCallback() {
-            var _a;
-            var 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)
-              var awaiting = awaitingUpgrade.get(tagName);
-              if (isUndefined$1(awaiting)) {
-                awaitingUpgrade.set(tagName, awaiting = new Set());
-              }
-              awaiting.add(this);
-            }
-          }
-        }, {
-          key: "disconnectedCallback",
-          value: function disconnectedCallback() {
-            var _a;
-            var 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)
-              var 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);
-              }
-            }
-          }
-        }, {
-          key: "formAssociatedCallback",
-          value: function formAssociatedCallback(form) {
-            var _a;
-            var definition = definitionForElement.get(this);
-            (_a = definition === null || definition === void 0 ? void 0 : definition.formAssociatedCallback) === null || _a === void 0 ? void 0 : _a.call(this, form);
-          }
-        }, {
-          key: "formDisabledCallback",
-          value: function formDisabledCallback(disabled) {
-            var _a;
-            var definition = definitionForElement.get(this);
-            (_a = definition === null || definition === void 0 ? void 0 : definition.formDisabledCallback) === null || _a === void 0 ? void 0 : _a.call(this, disabled);
-          }
-        }, {
-          key: "formResetCallback",
-          value: function formResetCallback() {
-            var _a;
-            var definition = definitionForElement.get(this);
-            (_a = definition === null || definition === void 0 ? void 0 : definition.formResetCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-          }
-        }, {
-          key: "formStateRestoreCallback",
-          value: function formStateRestoreCallback(state, mode) {
-            var _a;
-            var 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);
-          }
-        }, {
-          key: "adoptedCallback",
-          value: function adoptedCallback() {
-            var _a;
-            var definition = definitionForElement.get(this);
-            (_a = definition === null || definition === void 0 ? void 0 : definition.adoptedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-          }
-        }, {
-          key: "attributeChangedCallback",
-          value: function attributeChangedCallback(name, oldValue, newValue) {
-            var _a;
-            var 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]);
-            }
-          }
-        }]);
-        return PivotCtor;
-      }(NativeHTMLElement);
-      PivotCtor.observedAttributes = _toConsumableArray(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) {
-      var observedAttributes = pivotDefinition.observedAttributes,
-        attributeChangedCallback = pivotDefinition.attributeChangedCallback;
-      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(_toConsumableArray(pivotDefinition.observedAttributes).filter(function (x) {
-        return !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(function () {
-        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) {
-      var newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
-      if (newObservedAttributes.size === 0) {
-        return;
-      }
-      var attributeChangedCallback = pivotDefinition.attributeChangedCallback;
-      // 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)) {
-              var 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)) {
-              var 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.
-      var newObservedAttributes = getNewObservedAttributes(registeredDefinition, pivotDefinition);
-      if (getNewObservedAttributes(registeredDefinition, pivotDefinition).size === 0) {
-        return;
-      }
-      var attributeChangedCallback = pivotDefinition.attributeChangedCallback;
-      // Approximate observedAttributes from the user class, but only for the new observed attributes
-      newObservedAttributes.forEach(function (name) {
-        if (nativeHasAttribute.call(instance, name)) {
-          var newValue = nativeGetAttribute.call(instance, name);
-          attributeChangedCallback.call(instance, name, null, newValue);
-        }
-      });
-    }
-    // User extends this HTMLElement, which returns the CE being upgraded
-    var 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.');
-      }
-      var 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(function (resolve) {
-        var 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) {
-      var resolvers = pendingWhenDefinedCallbacks.get(tagName);
-      if (!isUndefined$1(resolvers)) {
-        var _iterator9 = _createForOfIteratorHelper(resolvers),
-          _step9;
-        try {
-          for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-            var resolver = _step9.value;
-            resolver(ctor);
-          }
-        } catch (err) {
-          _iterator9.e(err);
-        } finally {
-          _iterator9.f();
-        }
-      }
-      pendingWhenDefinedCallbacks.delete(tagName);
-    }
-    var _window2 = window,
-      nativeRegistry = _window2.customElements;
-    var nativeDefine = nativeRegistry.define,
-      nativeWhenDefined = nativeRegistry.whenDefined,
-      nativeGet = nativeRegistry.get;
-    // 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 \"".concat(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");
-      }
-      var definition = getOrCreateDefinitionForConstructor(constructor);
-      registeredUserCtors.add(constructor);
-      var 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.
-      var awaiting = awaitingUpgrade.get(tagName);
-      if (!isUndefined$1(awaiting)) {
-        awaitingUpgrade.delete(tagName);
-        var _iterator10 = _createForOfIteratorHelper(awaiting),
-          _step10;
-        try {
-          for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-            var element = _step10.value;
-            var 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);
-            }
-          }
-        } catch (err) {
-          _iterator10.e(err);
-        } finally {
-          _iterator10.f();
-        }
-      }
-      // If anyone called customElements.whenDefined() and is still waiting for a promise resolution, resolve now
-      flushPendingWhenDefinedCallbacks(tagName, constructor);
-    };
-    CustomElementRegistry.prototype.get = function get(tagName) {
-      var NativeCtor = nativeGet.call(nativeRegistry, tagName);
-      if (!isUndefined$1(NativeCtor)) {
-        var 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(function (NativeCtor) {
-        var 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.
-      var 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()`.
-      var constructor = this.constructor;
-      var 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.
-      var PivotCtor = definition.PivotCtor,
-        UserCtor = definition.UserCtor;
-      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);
-      var PivotCtor = pivotCtorByTag.get(tagName);
-      if (isUndefined$1(PivotCtor)) {
-        var 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
-   */
-  var createScopedConstructor;
-  var 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.
-  var createUserConstructor = function createUserConstructor(HTMLElementToExtend, upgradeCallback, _connectedCallback, _disconnectedCallback) {
-    // TODO [#2972]: this class should expose observedAttributes as necessary
-    return /*#__PURE__*/function (_HTMLElementToExtend) {
-      _inherits(UserConstructor, _HTMLElementToExtend);
-      var _super8 = _createSuper(UserConstructor);
-      function UserConstructor() {
-        var _this5;
-        _classCallCheck(this, UserConstructor);
-        _this5 = _super8.call(this);
-        upgradeCallback(_assertThisInitialized(_this5));
-        return _this5;
-      }
-      // 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
-      _createClass(UserConstructor, [{
-        key: "connectedCallback",
-        value: function connectedCallback() {
-          if (!isUndefined$1(_connectedCallback)) {
-            _connectedCallback(this);
-          }
-        }
-      }, {
-        key: "disconnectedCallback",
-        value: function disconnectedCallback() {
-          if (!isUndefined$1(_disconnectedCallback)) {
-            _disconnectedCallback(this);
-          }
-        }
-      }]);
-      return UserConstructor;
-    }(HTMLElementToExtend);
-  };
-  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');
-    }
-    var UserConstructor = createUserConstructor(CachedHTMLElement, upgradeCallback, connectedCallback, disconnectedCallback);
-    var ScopedConstructor = createScopedConstructor(tagName, UserConstructor);
-    return new ScopedConstructor(UserConstructor);
-  }
-
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -8416,26 +7978,18 @@ 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.
    */
   var 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;
-    }
+    // use the global registry, with an upgradable constructor for the defined custom element
+    createCustomElement = createCustomElementUsingUpgradableConstructor;
   } else {
     // no registry available here
     createCustomElement = createCustomElementCompat;
@@ -8499,7 +8053,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.
@@ -8577,7 +8131,7 @@ var LWC = (function (exports) {
           doc.body.innerHTML = html;
           var content = doc.body;
           if (!isUndefined(wrapperTags)) {
-            for (var _i39 = 0; _i39 < wrapperTags.length; _i39++) {
+            for (var _i38 = 0; _i38 < wrapperTags.length; _i38++) {
               content = content.firstChild;
             }
           }
@@ -8770,8 +8324,8 @@ var LWC = (function (exports) {
       tagName: element.tagName.toLowerCase(),
       hydrated: true
     });
-    for (var _i40 = 0, _Object$entries2 = Object.entries(props); _i40 < _Object$entries2.length; _i40++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i40], 2),
+    for (var _i39 = 0, _Object$entries2 = Object.entries(props); _i39 < _Object$entries2.length; _i39++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i39], 2),
         key = _Object$entries2$_i[0],
         value = _Object$entries2$_i[1];
       element[key] = value;
@@ -8848,23 +8402,23 @@ var LWC = (function (exports) {
     var _attributeChangedCallback = HtmlPrototype.prototype.attributeChangedCallback;
     return _a = /*#__PURE__*/function (_HTMLElement2) {
       _inherits(_a, _HTMLElement2);
-      var _super9 = _createSuper(_a);
+      var _super7 = _createSuper(_a);
       function _a() {
-        var _this6;
+        var _this4;
         _classCallCheck(this, _a);
-        _this6 = _super9.call(this);
-        if (_this6.isConnected) {
+        _this4 = _super7.call(this);
+        if (_this4.isConnected) {
           // this if block is hit when there's already an un-upgraded element in the DOM with the same tag name.
-          hydrateComponent(_assertThisInitialized(_this6), Ctor, {});
-          hydratedCustomElements.add(_assertThisInitialized(_this6));
+          hydrateComponent(_assertThisInitialized(_this4), Ctor, {});
+          hydratedCustomElements.add(_assertThisInitialized(_this4));
         } else {
-          createVM(_assertThisInitialized(_this6), Ctor, renderer, {
+          createVM(_assertThisInitialized(_this4), Ctor, renderer, {
             mode: 'open',
             owner: null,
-            tagName: _this6.tagName
+            tagName: _this4.tagName
           });
         }
-        return _this6;
+        return _this4;
       }
       _createClass(_a, [{
         key: "connectedCallback",
@@ -9065,7 +8619,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;