lwc 2.35.1 → 2.36.0

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

@@ -29,10 +29,10 @@ function fail(msg) {
 
 var assert = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    fail: fail,
     invariant: invariant,
-    isTrue: isTrue$1,
     isFalse: isFalse$1,
-    fail: fail
+    isTrue: isTrue$1
 });
 
 /*
@@ -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.1";
+const LWC_VERSION = "2.36.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.35.1 */
+/** version: 2.36.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -410,7 +410,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.35.1 */
+/** version: 2.36.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -474,7 +474,7 @@ function applyAriaReflection(prototype = Element.prototype) {
         }
     }
 }
-/** version: 2.35.1 */
+/** version: 2.36.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -540,7 +540,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 +597,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 +876,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 +886,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 +3163,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 +4902,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 +5973,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);
@@ -6230,6 +6240,7 @@ function validateComponentStylesheets(vm, stylesheets) {
 // Validate and flatten any stylesheets defined as `static stylesheets`
 function computeStylesheets(vm, ctor) {
   if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
+    warnOnStylesheetsMutation(ctor);
     const {
       stylesheets
     } = ctor;
@@ -6244,6 +6255,24 @@ function computeStylesheets(vm, ctor) {
   }
   return null;
 }
+function warnOnStylesheetsMutation(ctor) {
+  if (process.env.NODE_ENV !== 'production') {
+    let {
+      stylesheets
+    } = ctor;
+    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;
+      }
+    });
+  }
+}
 function computeShadowMode(vm, renderer) {
   const {
     def
@@ -6623,7 +6652,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,7 +6663,10 @@ 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 ` +
@@ -6666,7 +6698,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 +6713,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 +6722,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,14 +6774,112 @@ 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://lwc.dev/guide/accessibility#deprecated-aria-reflected-properties`);
+    }
+    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);
+    }
+  }
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -7234,12 +7364,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 +7393,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://lwc.dev/guide/css#deprecated-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 +7415,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 +7424,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 +7433,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 +7467,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 +7538,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 +7575,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.35.1 */
+/* version: 2.36.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7697,7 +7853,7 @@ const createCustomElementCompat = (tagName, upgradeCallback) => {
 const cachedConstructors = new Map();
 const elementsUpgradedOutsideLWC = new WeakSet();
 let elementBeingUpgradedByLWC = false;
-// Creates a constructor that is intended to be used as a vanilla custom element, except that the upgradeCallback is
+// Creates a constructor that is intended to be used directly as a custom element, except that the upgradeCallback is
 // passed in to the constructor so LWC can reuse the same custom element constructor for multiple components.
 // Another benefit is that only LWC can create components that actually do anything – if you do
 // `customElements.define('x-foo')`, then you don't have access to the upgradeCallback, so it's a dummy custom element.
@@ -7742,7 +7898,7 @@ const createUpgradableConstructor = (connectedCallback, disconnectedCallback) =>
     }
     return UpgradableConstructor;
 };
-const createCustomElementVanilla = (tagName, upgradeCallback, connectedCallback, disconnectedCallback) => {
+const createCustomElementUsingUpgradableConstructor = (tagName, upgradeCallback, connectedCallback, disconnectedCallback) => {
     // use global custom elements registry
     let UpgradableConstructor = cachedConstructors.get(tagName);
     if (isUndefined$1(UpgradableConstructor)) {
@@ -7770,7 +7926,7 @@ const createCustomElementVanilla = (tagName, upgradeCallback, connectedCallback,
  */
 /**
  * Create a scoped registry, i.e. a function that can create custom elements whose tag names
- * do not conflict with vanilla custom elements having the same tag name.
+ * do not conflict with third-party custom elements having the same tag name.
  */
 function createScopedRegistry() {
     if (!hasCustomElements) {
@@ -8311,10 +8467,10 @@ function createCustomElementScoped(tagName, upgradeCallback, connectedCallback,
  * We have three modes for creating custom elements:
  *
  * 1. Compat (legacy) browser support (e.g. IE11). Totally custom, doesn't rely on native browser APIs.
- * 2. "Vanilla" custom elements registry. This system actually still allows us to have two LWC components with the
- *    same tag name, via a simple 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, which allows us to have completely customized functionality for different components.
+ * 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
@@ -8325,8 +8481,8 @@ if (hasCustomElements) {
   if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
     createCustomElement = createCustomElementScoped;
   } else {
-    // use global custom elements registry (vanilla)
-    createCustomElement = createCustomElementVanilla;
+    // use the global registry, with an upgradable constructor for the defined custom element
+    createCustomElement = createCustomElementUsingUpgradableConstructor;
   }
 } else {
   // no registry available here
@@ -8382,10 +8538,10 @@ function rendererFactory(baseRenderer) {
 
     var assert = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        fail: fail,
         invariant: invariant,
-        isTrue: isTrue$1,
         isFalse: isFalse$1,
-        fail: fail
+        isTrue: isTrue$1
     });
     function isUndefined(obj) {
         return obj === undefined;
@@ -8393,7 +8549,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.35.1 */
+    /** version: 2.36.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -8954,6 +9110,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.35.1 */
+/* version: 2.36.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 };