@lwrjs/everywhere 0.10.0-alpha.2 → 0.10.0-alpha.20

package/build/__generated_site_amd_modules__/1/module/amd/1/l/en-US/mi/lwc/v/{2_38_1/s/8cf6b94d9c0b398c70c97fdca2759caa → 2_50_0/s/b40440e2e29d782101f05d6085a324e9}/lwc.js

@@ -1,8 +1,12 @@
-LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
+LWR.define('lwc/v/2_50_0', ['exports'], (function (exports) { 'use strict';
 
   /* proxy-compat-disable */
   /**
-   * Copyright (C) 2018 salesforce.com, inc.
+   * Copyright (C) 2023 salesforce.com, inc.
+   */
+  /* proxy-compat-disable */
+  /**
+   * Copyright (C) 2023 salesforce.com, inc.
    */
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -63,9 +67,12 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
   const {
     concat: ArrayConcat$1,
     copyWithin: ArrayCopyWithin,
+    every: ArrayEvery,
     fill: ArrayFill,
     filter: ArrayFilter,
     find: ArrayFind,
+    findIndex: ArrayFindIndex,
+    includes: ArrayIncludes,
     indexOf: ArrayIndexOf,
     join: ArrayJoin,
     map: ArrayMap,
@@ -81,6 +88,15 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     unshift: ArrayUnshift,
     forEach
   } = Array.prototype;
+  // The type of the return value of Array.prototype.every is `this is T[]`. However, once this
+  // Array method is pulled out of the prototype, the function is now referencing `this` where
+  // `this` is meaningless, resulting in a TypeScript compilation error.
+  //
+  // Exposing this helper function is the closest we can get to preserving the usage patterns
+  // of Array.prototype methods used elsewhere in the codebase.
+  function arrayEvery(arr, predicate) {
+    return ArrayEvery.call(arr, predicate);
+  }
   const {
     fromCharCode: StringFromCharCode
   } = String;
@@ -185,7 +201,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
   })();
   // These attributes take either an ID or a list of IDs as values.
   // This includes aria-* attributes as well as the special non-ARIA "for" attribute
-  const ID_REFERENCING_ATTRIBUTES_SET = new Set(['aria-activedescendant', 'aria-controls', 'aria-describedby', 'aria-details', 'aria-errormessage', 'aria-flowto', 'aria-labelledby', 'aria-owns', 'for']);
+  const ID_REFERENCING_ATTRIBUTES_SET = /*@__PURE__*/new Set(['aria-activedescendant', 'aria-controls', 'aria-describedby', 'aria-details', 'aria-errormessage', 'aria-flowto', 'aria-labelledby', 'aria-owns', 'for']);
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -224,40 +240,18 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   const CAMEL_REGEX = /-([a-z])/g;
-  // Convoluted map generation so that @lwc/shared remains fully tree-shakable (verify-treeshakable)
-  const {
-    NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING,
-    NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING
-  } = /*#__PURE__*/(() => {
-    /**
-     * Map composed of properties to attributes not following the HTML property to attribute mapping
-     * convention.
-     */
-    const NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING = new Map([['accessKey', 'accesskey'], ['readOnly', 'readonly'], ['tabIndex', 'tabindex'], ['bgColor', 'bgcolor'], ['colSpan', 'colspan'], ['rowSpan', 'rowspan'], ['contentEditable', 'contenteditable'], ['crossOrigin', 'crossorigin'], ['dateTime', 'datetime'], ['formAction', 'formaction'], ['isMap', 'ismap'], ['maxLength', 'maxlength'], ['minLength', 'minlength'], ['noValidate', 'novalidate'], ['useMap', 'usemap'], ['htmlFor', 'for']]);
-    /**
-     * Inverted map with attribute name key and property name value.
-     */
-    const NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING = new Map();
-    NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING.forEach((value, key) => NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING.set(value, key));
-    return {
-      NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING,
-      NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING
-    };
-  })();
+  // These are HTML standard prop/attribute IDL mappings, but are not predictable based on camel/kebab-case conversion
+  const SPECIAL_PROPERTY_ATTRIBUTE_MAPPING = /*@__PURE__@*/new Map([['accessKey', 'accesskey'], ['readOnly', 'readonly'], ['tabIndex', 'tabindex'], ['bgColor', 'bgcolor'], ['colSpan', 'colspan'], ['rowSpan', 'rowspan'], ['contentEditable', 'contenteditable'], ['crossOrigin', 'crossorigin'], ['dateTime', 'datetime'], ['formAction', 'formaction'], ['isMap', 'ismap'], ['maxLength', 'maxlength'], ['minLength', 'minlength'], ['noValidate', 'novalidate'], ['useMap', 'usemap'], ['htmlFor', 'for']]);
   /**
    * Map associating previously transformed HTML property into HTML attribute.
    */
-  const CACHED_PROPERTY_ATTRIBUTE_MAPPING = new Map();
-  /**
-   * Map associating previously transformed HTML attribute into HTML property.
-   */
-  const CACHED_ATTRIBUTE_PROPERTY_MAPPING = new Map();
+  const CACHED_PROPERTY_ATTRIBUTE_MAPPING = /*@__PURE__@*/new Map();
   function htmlPropertyToAttribute(propName) {
     const ariaAttributeName = AriaPropNameToAttrNameMap[propName];
     if (!isUndefined$1(ariaAttributeName)) {
       return ariaAttributeName;
     }
-    const specialAttributeName = NO_STANDARD_PROPERTY_ATTRIBUTE_MAPPING.get(propName);
+    const specialAttributeName = SPECIAL_PROPERTY_ATTRIBUTE_MAPPING.get(propName);
     if (!isUndefined$1(specialAttributeName)) {
       return specialAttributeName;
     }
@@ -280,40 +274,17 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  function htmlAttributeToProperty(attrName) {
-    const ariaPropertyName = AriaAttrNameToPropNameMap[attrName];
-    if (!isUndefined$1(ariaPropertyName)) {
-      return ariaPropertyName;
-    }
-    const specialPropertyName = NO_STANDARD_ATTRIBUTE_PROPERTY_MAPPING.get(attrName);
-    if (!isUndefined$1(specialPropertyName)) {
-      return specialPropertyName;
-    }
-    const cachedPropertyName = CACHED_ATTRIBUTE_PROPERTY_MAPPING.get(attrName);
-    if (!isUndefined$1(cachedPropertyName)) {
-      return cachedPropertyName;
-    }
-    const propertyName = StringReplace.call(attrName, CAMEL_REGEX, g => g[1].toUpperCase());
-    CACHED_ATTRIBUTE_PROPERTY_MAPPING.set(attrName, propertyName);
-    return propertyName;
-  }
-
-  /*
-   * 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
+  /**
+   * Map associating previously transformed kabab-case attributes into camel-case props.
    */
-  const ESCAPED_CHARS = {
-    '"': '"',
-    "'": ''',
-    '<': '&lt;',
-    '>': '&gt;',
-    '&': '&amp;'
-  };
-  function htmlEscape(str, attrMode = false) {
-    const searchValue = attrMode ? /["&]/g : /["'<>&]/g;
-    return str.replace(searchValue, char => ESCAPED_CHARS[char]);
+  const CACHED_KEBAB_CAMEL_MAPPING = /*@__PURE__@*/new Map();
+  function kebabCaseToCamelCase(attrName) {
+    let result = CACHED_KEBAB_CAMEL_MAPPING.get(attrName);
+    if (isUndefined$1(result)) {
+      result = StringReplace.call(attrName, CAMEL_REGEX, g => g[1].toUpperCase());
+      CACHED_KEBAB_CAMEL_MAPPING.set(attrName, result);
+    }
+    return result;
   }
 
   /*
@@ -323,12 +294,13 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * 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.38.1";
+  const LWC_VERSION = "2.50.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.38.1 */
+  /** version: 2.50.0 */
 
+  /* proxy-compat-disable */
   /**
-   * Copyright (C) 2018 salesforce.com, inc.
+   * Copyright (C) 2023 salesforce.com, inc.
    */
 
   /*
@@ -343,7 +315,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     ENABLE_MIXED_SHADOW_MODE: null,
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: null,
     ENABLE_WIRE_SYNC_EMIT: null,
-    ENABLE_LIGHT_GET_ROOT_NODE_PATCH: null,
     DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
     ENABLE_FROZEN_TEMPLATE: null,
     DISABLE_ARIA_REFLECTION_POLYFILL: null
@@ -404,10 +375,11 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.38.1 */
+  /** version: 2.50.0 */
 
+  /* proxy-compat-disable */
   /**
-   * Copyright (C) 2018 salesforce.com, inc.
+   * Copyright (C) 2023 salesforce.com, inc.
    */
 
   /*
@@ -467,7 +439,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       }
     }
   }
-  /** version: 2.38.1 */
+  /** version: 2.50.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -482,6 +454,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
   }
 
   /* proxy-compat-disable */
+  /**
+   * Copyright (C) 2023 salesforce.com, inc.
+   */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -895,114 +870,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    */
   // These properties get added to LWCElement.prototype publicProps automatically
   const defaultDefHTMLPropertyNames = ['accessKey', 'dir', 'draggable', 'hidden', 'id', 'lang', 'spellcheck', 'tabIndex', 'title'];
-  function offsetPropertyErrorMessage(name) {
-    return `Using the \`${name}\` property is an anti-pattern because it rounds the value to an integer. Instead, use the \`getBoundingClientRect\` method to obtain fractional values for the size of an element and its position relative to the viewport.`;
-  }
-  // Global HTML Attributes & Properties
-  // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
-  //
-  // If you update this list, check for test files that recapitulate the same list. Searching the codebase
-  // for e.g. "dropzone" should suffice.
-  const globalHTMLProperties = {
-    accessKey: {
-      attribute: 'accesskey'
-    },
-    accessKeyLabel: {
-      readOnly: true
-    },
-    className: {
-      attribute: 'class',
-      error: 'Using the `className` property is an anti-pattern because of slow runtime behavior and potential conflicts with classes provided by the owner element. Use the `classList` API instead.'
-    },
-    contentEditable: {
-      attribute: 'contenteditable'
-    },
-    dataset: {
-      readOnly: true,
-      error: "Using the `dataset` property is an anti-pattern because it can't be statically analyzed. Expose each property individually using the `@api` decorator instead."
-    },
-    dir: {
-      attribute: 'dir'
-    },
-    draggable: {
-      attribute: 'draggable'
-    },
-    dropzone: {
-      attribute: 'dropzone',
-      readOnly: true
-    },
-    hidden: {
-      attribute: 'hidden'
-    },
-    id: {
-      attribute: 'id'
-    },
-    inputMode: {
-      attribute: 'inputmode'
-    },
-    lang: {
-      attribute: 'lang'
-    },
-    slot: {
-      attribute: 'slot',
-      error: 'Using the `slot` property is an anti-pattern.'
-    },
-    spellcheck: {
-      attribute: 'spellcheck'
-    },
-    style: {
-      attribute: 'style'
-    },
-    tabIndex: {
-      attribute: 'tabindex'
-    },
-    title: {
-      attribute: 'title'
-    },
-    translate: {
-      attribute: 'translate'
-    },
-    // additional "global attributes" that are not present in the link above.
-    isContentEditable: {
-      readOnly: true
-    },
-    offsetHeight: {
-      readOnly: true,
-      error: offsetPropertyErrorMessage('offsetHeight')
-    },
-    offsetLeft: {
-      readOnly: true,
-      error: offsetPropertyErrorMessage('offsetLeft')
-    },
-    offsetParent: {
-      readOnly: true
-    },
-    offsetTop: {
-      readOnly: true,
-      error: offsetPropertyErrorMessage('offsetTop')
-    },
-    offsetWidth: {
-      readOnly: true,
-      error: offsetPropertyErrorMessage('offsetWidth')
-    },
-    role: {
-      attribute: 'role'
-    }
-  };
-  let controlledElement = null;
-  let controlledAttributeName;
-  function isAttributeLocked(elm, attrName) {
-    return elm !== controlledElement || attrName !== controlledAttributeName;
-  }
-  function lockAttribute(_elm, _key) {
-    controlledElement = null;
-    controlledAttributeName = undefined;
-  }
-  function unlockAttribute(elm, key) {
-    controlledElement = elm;
-    controlledAttributeName = key;
-  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1041,6 +908,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  /* eslint @lwc/lwc-internal/no-production-assert: "off" */
   function generateDataDescriptor(options) {
     return assign({
       configurable: true,
@@ -1074,8 +942,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         get() {
           return originalOuterHTMLDescriptor.get.call(this);
         },
-        set(_value) {
-          throw new TypeError(`Invalid attempt to set outerHTML on Element.`);
+        set(value) {
+          logError(`Invalid attempt to set outerHTML on Element.`);
+          return originalOuterHTMLDescriptor.set.call(this, value);
         }
       })
     };
@@ -1165,22 +1034,23 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         get() {
           return originalInnerHTMLDescriptor.get.call(this);
         },
-        set(_value) {
-          throw new TypeError(`Invalid attempt to set innerHTML on ShadowRoot.`);
+        set(value) {
+          logError(`Invalid attempt to set innerHTML on ShadowRoot.`);
+          return originalInnerHTMLDescriptor.set.call(this, value);
         }
       }),
       textContent: generateAccessorDescriptor({
         get() {
           return originalTextContentDescriptor.get.call(this);
         },
-        set(_value) {
-          throw new TypeError(`Invalid attempt to set textContent on ShadowRoot.`);
+        set(value) {
+          logError(`Invalid attempt to set textContent on ShadowRoot.`);
+          return originalTextContentDescriptor.set.call(this, value);
         }
       }),
       addEventListener: generateDataDescriptor({
         value(type, listener, options) {
-          // TODO [#420]: this is triggered when the component author attempts to add a listener
-          // programmatically into its Component's shadow root
+          // TODO [#1824]: Potentially relax this restriction
           if (!isUndefined$1(options)) {
             logError('The `addEventListener` method on ShadowRoot does not support any options.', getAssociatedVMIfPresent(this));
           }
@@ -1204,30 +1074,32 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         get() {
           return originalInnerHTMLDescriptor.get.call(this);
         },
-        set(_value) {
-          throw new TypeError(`Invalid attempt to set innerHTML on HTMLElement.`);
+        set(value) {
+          logError(`Invalid attempt to set innerHTML on HTMLElement.`);
+          return originalInnerHTMLDescriptor.set.call(this, value);
         }
       }),
       outerHTML: generateAccessorDescriptor({
         get() {
           return originalOuterHTMLDescriptor.get.call(this);
         },
-        set(_value) {
-          throw new TypeError(`Invalid attempt to set outerHTML on HTMLElement.`);
+        set(value) {
+          logError(`Invalid attempt to set outerHTML on HTMLElement.`);
+          return originalOuterHTMLDescriptor.set.call(this, value);
         }
       }),
       textContent: generateAccessorDescriptor({
         get() {
           return originalTextContentDescriptor.get.call(this);
         },
-        set(_value) {
-          throw new TypeError(`Invalid attempt to set textContent on HTMLElement.`);
+        set(value) {
+          logError(`Invalid attempt to set textContent on HTMLElement.`);
+          return originalTextContentDescriptor.set.call(this, value);
         }
       }),
       addEventListener: generateDataDescriptor({
         value(type, listener, options) {
-          // TODO [#420]: this is triggered when the component author attempts to add a listener
-          // programmatically into a lighting element node
+          // TODO [#1824]: Potentially relax this restriction
           if (!isUndefined$1(options)) {
             logError('The `addEventListener` method in `LightningElement` does not support any options.', getAssociatedVMIfPresent(this));
           }
@@ -1238,23 +1110,10 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       })
     };
   }
-  function getComponentRestrictionsDescriptors() {
-    assertNotProd(); // this method should never leak to prod
-    return {
-      tagName: generateAccessorDescriptor({
-        get() {
-          throw new Error(`Usage of property \`tagName\` is disallowed because the component itself does` + ` not know which tagName will be used to create the element, therefore writing` + ` code that check for that value is error prone.`);
-        },
-        configurable: true,
-        enumerable: false // no enumerable properties on component
-      })
-    };
-  }
-
   function getLightningElementPrototypeRestrictionsDescriptors(proto) {
     assertNotProd(); // this method should never leak to prod
     const originalDispatchEvent = proto.dispatchEvent;
-    const descriptors = {
+    return {
       dispatchEvent: generateDataDescriptor({
         value(event) {
           const vm = getAssociatedVM(this);
@@ -1272,37 +1131,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         }
       })
     };
-    forEach.call(getOwnPropertyNames$1(globalHTMLProperties), propName => {
-      if (propName in proto) {
-        return; // no need to redefine something that we are already exposing
-      }
-
-      descriptors[propName] = generateAccessorDescriptor({
-        get() {
-          const {
-            error,
-            attribute
-          } = globalHTMLProperties[propName];
-          const msg = [];
-          msg.push(`Accessing the global HTML property "${propName}" is disabled.`);
-          if (error) {
-            msg.push(error);
-          } else if (attribute) {
-            msg.push(`Instead access it via \`this.getAttribute("${attribute}")\`.`);
-          }
-          logError(msg.join('\n'), getAssociatedVM(this));
-        },
-        set() {
-          const {
-            readOnly
-          } = globalHTMLProperties[propName];
-          if (readOnly) {
-            logError(`The global HTML property \`${propName}\` is read-only.`, getAssociatedVM(this));
-          }
-        }
-      });
-    });
-    return descriptors;
   }
   // This routine will prevent access to certain properties on a shadow root instance to guarantee
   // that all components will work fine in IE11 and other browsers without shadow dom support.
@@ -1314,9 +1142,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     const elmProto = getPrototypeOf$1(elm);
     setPrototypeOf(elm, create(elmProto, restrictionsDescriptors));
   }
-  function patchComponentWithRestrictions(cmp) {
-    defineProperties(cmp, getComponentRestrictionsDescriptors());
-  }
   function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
   }
@@ -1697,7 +1522,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       valueMutated(originalTarget, key);
       return true;
     }
-    /*LWC compiler v2.38.1*/
+    /*LWC compiler v2.50.0*/
   }
   const getterMap = new WeakMap();
   const setterMap = new WeakMap();
@@ -1790,7 +1615,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       /* istanbul ignore next */
       return false;
     }
-    /*LWC compiler v2.38.1*/
+    /*LWC compiler v2.50.0*/
   }
   function extract(objectOrArray) {
     if (isArray(objectOrArray)) {
@@ -2004,6 +1829,14 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  /**
+   * This module is responsible for producing the ComponentDef object that is always
+   * accessible via `vm.def`. This is lazily created during the creation of the first
+   * instance of a component class, and shared across all instances.
+   *
+   * This structure can be used to synthetically create proxies, and understand the
+   * shape of a component. It is also used internally to apply extra optimizations.
+   */
   /**
    * This operation is called with a descriptor of an standard html property
    * that a Custom Element can support (including AOM properties), which
@@ -2018,16 +1851,10 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       configurable
     } = descriptor;
     if (!isFunction$1(get)) {
-      if (process.env.NODE_ENV !== 'production') {
-        assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
-      }
-      throw new TypeError();
+      throw new TypeError(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
     }
     if (!isFunction$1(set)) {
-      if (process.env.NODE_ENV !== 'production') {
-        assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
-      }
-      throw new TypeError();
+      throw new TypeError(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
     }
     return {
       enumerable,
@@ -2047,10 +1874,18 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         const vm = getAssociatedVM(this);
         if (process.env.NODE_ENV !== 'production') {
           const vmBeingRendered = getVMBeingRendered();
-          assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
-          assert.invariant(!isUpdatingTemplate, `When updating the template of ${vmBeingRendered}, one of the accessors used by the template has side effects on the state of ${vm}.${propName}`);
-          assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
-          assert.invariant(!isObject(newValue) || isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
+          if (isInvokingRender) {
+            logError(`${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
+          }
+          if (isUpdatingTemplate) {
+            logError(`When updating the template of ${vmBeingRendered}, one of the accessors used by the template has side effects on the state of ${vm}.${propName}`);
+          }
+          if (isBeingConstructed(vm)) {
+            logError(`Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+          }
+          if (isObject(newValue) && !isNull(newValue)) {
+            logError(`Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
+          }
         }
         updateComponentValue(vm, propName, newValue);
         return set.call(vm.elm, newValue);
@@ -2113,7 +1948,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     // Adding extra guard rails in DEV mode.
     if (process.env.NODE_ENV !== 'production') {
       patchCustomElementWithRestrictions(elm);
-      patchComponentWithRestrictions(component);
     }
     return this;
   };
@@ -2169,9 +2003,15 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       } = vm;
       if (process.env.NODE_ENV !== 'production') {
         const vmBeingRendered = getVMBeingRendered();
-        assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-        assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-        assert.invariant(isFunction$1(listener), `Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
+        if (isInvokingRender) {
+          logError(`${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
+        }
+        if (isUpdatingTemplate) {
+          logError(`Updating the template of ${vmBeingRendered} has side effects on the state of ${vm} by adding an event listener for "${type}".`);
+        }
+        if (!isFunction$1(listener)) {
+          logError(`Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
+        }
       }
       const wrappedListener = getWrappedComponentsListener(vm, listener);
       addEventListener(elm, type, wrappedListener, options);
@@ -2215,9 +2055,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
           removeAttribute
         }
       } = vm;
-      unlockAttribute(elm, name);
       removeAttribute(elm, name);
-      lockAttribute();
     },
     removeAttributeNS(namespace, name) {
       const {
@@ -2226,9 +2064,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
           removeAttribute
         }
       } = getAssociatedVM(this);
-      unlockAttribute(elm, name);
       removeAttribute(elm, name, namespace);
-      lockAttribute();
     },
     getAttribute(name) {
       const vm = getAssociatedVM(this);
@@ -2259,11 +2095,11 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         }
       } = vm;
       if (process.env.NODE_ENV !== 'production') {
-        assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+        if (isBeingConstructed(vm)) {
+          logError(`Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+        }
       }
-      unlockAttribute(elm, name);
       setAttribute(elm, name, value);
-      lockAttribute();
     },
     setAttributeNS(namespace, name, value) {
       const vm = getAssociatedVM(this);
@@ -2274,11 +2110,11 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         }
       } = vm;
       if (process.env.NODE_ENV !== 'production') {
-        assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+        if (isBeingConstructed(vm)) {
+          logError(`Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+        }
       }
-      unlockAttribute(elm, name);
       setAttribute(elm, name, value, namespace);
-      lockAttribute();
     },
     getBoundingClientRect() {
       const vm = getAssociatedVM(this);
@@ -2312,9 +2148,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         }
       } = vm;
       if (process.env.NODE_ENV !== 'production') {
-        // TODO [#1290]: this still fails in dev but works in production, eventually, we should
-        // just throw in all modes
-        assert.isFalse(isBeingConstructed(vm), `Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
+        if (isBeingConstructed(vm)) {
+          logError(`Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
+        }
       }
       return getClassList(elm);
     },
@@ -2692,7 +2528,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     });
     runWithBoundaryProtection(vm, vm, noop, () => {
       // job
-      connector = new adapter(dataCallback);
+      connector = new adapter(dataCallback, {
+        tagName: vm.tagName
+      });
     }, noop);
     const updateConnectorConfig = config => {
       // every time the config is recomputed due to tracking,
@@ -2853,8 +2691,12 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         const vm = getAssociatedVM(this);
         if (process.env.NODE_ENV !== 'production') {
           const vmBeingRendered = getVMBeingRendered();
-          assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
-          assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+          if (isInvokingRender) {
+            logError(`render() method has side effects on the state of property "${toString$1(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
+          }
+          if (isUpdatingTemplate) {
+            logError(`Updating the template has side effects on the state of property "${toString$1(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
+          }
         }
         vm.cmpProps[key] = newValue;
         componentValueMutated(vm, key);
@@ -2870,12 +2712,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       enumerable,
       configurable
     } = descriptor;
-    if (!isFunction$1(get)) {
-      if (process.env.NODE_ENV !== 'production') {
-        assert.invariant(isFunction$1(get), `Invalid compiler output for public accessor ${toString$1(key)} decorated with @api`);
-      }
-      throw new Error();
-    }
+    assert.invariant(isFunction$1(get), `Invalid public accessor ${toString$1(key)} decorated with @api. The property is missing a getter.`);
     return {
       get() {
         if (process.env.NODE_ENV !== 'production') {
@@ -2888,13 +2725,17 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         const vm = getAssociatedVM(this);
         if (process.env.NODE_ENV !== 'production') {
           const vmBeingRendered = getVMBeingRendered();
-          assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
-          assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+          if (isInvokingRender) {
+            logError(`render() method has side effects on the state of property "${toString$1(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
+          }
+          if (isUpdatingTemplate) {
+            logError(`Updating the template has side effects on the state of property "${toString$1(key)}"`, isNull(vmBeingRendered) ? vm : vmBeingRendered);
+          }
         }
         if (set) {
           set.call(this, newValue);
         } else if (process.env.NODE_ENV !== 'production') {
-          assert.fail(`Invalid attempt to set a new value for property ${toString$1(key)} of ${vm} that does not has a setter decorated with @api.`);
+          logError(`Invalid attempt to set a new value for property "${toString$1(key)}" that does not has a setter decorated with @api.`, vm);
         }
       },
       enumerable,
@@ -2928,8 +2769,12 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         const vm = getAssociatedVM(this);
         if (process.env.NODE_ENV !== 'production') {
           const vmBeingRendered = getVMBeingRendered();
-          assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
-          assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+          if (isInvokingRender) {
+            logError(`${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
+          }
+          if (isUpdatingTemplate) {
+            logError(`Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
+          }
         }
         const reactiveOrAnyValue = getReactiveProxy(newValue);
         updateComponentValue(vm, key, reactiveOrAnyValue);
@@ -2995,60 +2840,63 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
   }
 
   function validateObservedField(Ctor, fieldName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (!isUndefined$1(descriptor)) {
       const type = getClassDescriptorType(descriptor);
       const message = `Invalid observed ${fieldName} field. Found a duplicate ${type} with the same name.`;
-      // [W-9927596] Ideally we always throw an error when detecting duplicate observed field.
-      // This branch is only here for backward compatibility reasons.
-      if (type === "accessor" /* DescriptorType.Accessor */) {
-        logError(message);
-      } else {
-        assert.fail(message);
-      }
+      // TODO [#3408]: this should throw, not log
+      logError(message);
     }
   }
   function validateFieldDecoratedWithTrack(Ctor, fieldName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (!isUndefined$1(descriptor)) {
       const type = getClassDescriptorType(descriptor);
-      assert.fail(`Invalid @track ${fieldName} field. Found a duplicate ${type} with the same name.`);
+      // TODO [#3408]: this should throw, not log
+      logError(`Invalid @track ${fieldName} field. Found a duplicate ${type} with the same name.`);
     }
   }
   function validateFieldDecoratedWithWire(Ctor, fieldName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (!isUndefined$1(descriptor)) {
       const type = getClassDescriptorType(descriptor);
-      assert.fail(`Invalid @wire ${fieldName} field. Found a duplicate ${type} with the same name.`);
+      // TODO [#3408]: this should throw, not log
+      logError(`Invalid @wire ${fieldName} field. Found a duplicate ${type} with the same name.`);
     }
   }
   function validateMethodDecoratedWithWire(Ctor, methodName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (isUndefined$1(descriptor) || !isFunction$1(descriptor.value) || isFalse(descriptor.writable)) {
-      assert.fail(`Invalid @wire ${methodName} method.`);
+      // TODO [#3441]: This line of code does not seem possible to reach.
+      logError(`Invalid @wire ${methodName} field. The field should have a valid writable descriptor.`);
     }
   }
   function validateFieldDecoratedWithApi(Ctor, fieldName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (!isUndefined$1(descriptor)) {
       const type = getClassDescriptorType(descriptor);
       const message = `Invalid @api ${fieldName} field. Found a duplicate ${type} with the same name.`;
-      // [W-9927596] Ideally we always throw an error when detecting duplicate public properties.
-      // This branch is only here for backward compatibility reasons.
-      if (type === "accessor" /* DescriptorType.Accessor */) {
-        logError(message);
-      } else {
-        assert.fail(message);
-      }
+      // TODO [#3408]: this should throw, not log
+      logError(message);
     }
   }
   function validateAccessorDecoratedWithApi(Ctor, fieldName, descriptor) {
-    if (isUndefined$1(descriptor)) {
-      assert.fail(`Invalid @api get ${fieldName} accessor.`);
-    } else if (isFunction$1(descriptor.set)) {
-      assert.isTrue(isFunction$1(descriptor.get), `Missing getter for property ${fieldName} decorated with @api in ${Ctor}. You cannot have a setter without the corresponding getter.`);
+    assertNotProd(); // this method should never leak to prod
+    if (isFunction$1(descriptor.set)) {
+      if (!isFunction$1(descriptor.get)) {
+        // TODO [#3441]: This line of code does not seem possible to reach.
+        logError(`Missing getter for property ${fieldName} decorated with @api in ${Ctor}. You cannot have a setter without the corresponding getter.`);
+      }
     } else if (!isFunction$1(descriptor.get)) {
-      assert.fail(`Missing @api get ${fieldName} accessor.`);
+      // TODO [#3441]: This line of code does not seem possible to reach.
+      logError(`Missing @api get ${fieldName} accessor.`);
     }
   }
   function validateMethodDecoratedWithApi(Ctor, methodName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (isUndefined$1(descriptor) || !isFunction$1(descriptor.value) || isFalse(descriptor.writable)) {
-      assert.fail(`Invalid @api ${methodName} method.`);
+      // TODO [#3441]: This line of code does not seem possible to reach.
+      logError(`Invalid @api ${methodName} method.`);
     }
   }
   /**
@@ -3077,13 +2925,14 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         apiFieldsConfig[fieldName] = propConfig.config;
         descriptor = getOwnPropertyDescriptor$1(proto, fieldName);
         if (propConfig.config > 0) {
+          if (isUndefined$1(descriptor)) {
+            // TODO [#3441]: This line of code does not seem possible to reach.
+            throw new Error();
+          }
           // accessor declaration
           if (process.env.NODE_ENV !== 'production') {
             validateAccessorDecoratedWithApi(Ctor, fieldName, descriptor);
           }
-          if (isUndefined$1(descriptor)) {
-            throw new Error();
-          }
           descriptor = createPublicAccessorDescriptor(fieldName, descriptor);
         } else {
           // field declaration
@@ -3126,7 +2975,10 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         descriptor = getOwnPropertyDescriptor$1(proto, fieldOrMethodName);
         if (method === 1) {
           if (process.env.NODE_ENV !== 'production') {
-            assert.isTrue(adapter, `@wire on method "${fieldOrMethodName}": adapter id must be truthy.`);
+            if (!adapter) {
+              // TODO [#3408]: this should throw, not log
+              logError(`@wire on method "${fieldOrMethodName}": adapter id must be truthy.`);
+            }
             validateMethodDecoratedWithWire(Ctor, fieldOrMethodName, descriptor);
           }
           if (isUndefined$1(descriptor)) {
@@ -3136,7 +2988,10 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
           storeWiredMethodMeta(descriptor, adapter, configCallback, dynamic);
         } else {
           if (process.env.NODE_ENV !== 'production') {
-            assert.isTrue(adapter, `@wire on field "${fieldOrMethodName}": adapter id must be truthy.`);
+            if (!adapter) {
+              // TODO [#3408]: this should throw, not log
+              logError(`@wire on field "${fieldOrMethodName}": adapter id must be truthy.`);
+            }
             validateFieldDecoratedWithWire(Ctor, fieldOrMethodName, descriptor);
           }
           descriptor = internalWireFieldDecorator(fieldOrMethodName);
@@ -3268,6 +3123,10 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  /**
+   * This module is responsible for creating the base bridge class BaseBridgeElement
+   * that represents the HTMLElement extension used for any LWC inserted in the DOM.
+   */
   // A bridge descriptor is a descriptor whose job is just to get the component instance
   // from the element instance, and get the value or set a new value on the component.
   // This means that across different elements, similar names can get the exact same
@@ -3328,14 +3187,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         }
         return;
       }
-      if (!isAttributeLocked(this, attrName)) {
-        // Ignore changes triggered by the engine itself during:
-        // * diffing when public props are attempting to reflect to the DOM
-        // * component via `this.setAttribute()`, should never update the prop
-        // Both cases, the setAttribute call is always wrapped by the unlocking of the
-        // attribute to be changed
-        return;
-      }
       // Reflect attribute change to the corresponding property when changed from outside.
       this[propName] = newValue;
     };
@@ -3353,7 +3204,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
      */
     if (isFunction$1(SuperClass)) {
       HTMLBridgeElement = class extends SuperClass {
-        /*LWC compiler v2.38.1*/
+        /*LWC compiler v2.50.0*/
       };
     } else {
       HTMLBridgeElement = function () {
@@ -3435,6 +3286,94 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
   freeze(BaseBridgeElement);
   seal(BaseBridgeElement.prototype);
 
+  /*
+   * Copyright (c) 2023, 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
+   */
+  const supportsWeakRefs = typeof WeakRef === 'function' && typeof FinalizationRegistry === 'function';
+  // In browsers that doesn't support WeakRefs, the values will still leak, but at least the keys won't
+  class LegacyWeakMultiMap {
+    constructor() {
+      this._map = new WeakMap();
+    }
+    _getValues(key) {
+      let values = this._map.get(key);
+      if (isUndefined$1(values)) {
+        values = new Set();
+        this._map.set(key, values);
+      }
+      return values;
+    }
+    get(key) {
+      return this._getValues(key);
+    }
+    add(key, vm) {
+      const set = this._getValues(key);
+      set.add(vm);
+    }
+    delete(key) {
+      this._map.delete(key);
+    }
+  }
+  // This implementation relies on the WeakRef/FinalizationRegistry proposal.
+  // For some background, see: https://github.com/tc39/proposal-weakrefs
+  class ModernWeakMultiMap {
+    constructor() {
+      this._map = new WeakMap();
+      this._registry = new FinalizationRegistry(weakRefs => {
+        // This should be considered an optional cleanup method to remove GC'ed values from their respective arrays.
+        // JS VMs are not obligated to call FinalizationRegistry callbacks.
+        // Work backwards, removing stale VMs
+        for (let i = weakRefs.length - 1; i >= 0; i--) {
+          const vm = weakRefs[i].deref();
+          if (isUndefined$1(vm)) {
+            ArraySplice.call(weakRefs, i, 1); // remove
+          }
+        }
+      });
+    }
+
+    _getWeakRefs(key) {
+      let weakRefs = this._map.get(key);
+      if (isUndefined$1(weakRefs)) {
+        weakRefs = [];
+        this._map.set(key, weakRefs);
+      }
+      return weakRefs;
+    }
+    get(key) {
+      const weakRefs = this._getWeakRefs(key);
+      const result = new Set();
+      for (const weakRef of weakRefs) {
+        const vm = weakRef.deref();
+        if (!isUndefined$1(vm)) {
+          result.add(vm);
+        }
+      }
+      return result;
+    }
+    add(key, value) {
+      const weakRefs = this._getWeakRefs(key);
+      // We could check for duplicate values here, but it doesn't seem worth it.
+      // We transform the output into a Set anyway
+      ArrayPush$1.call(weakRefs, new WeakRef(value));
+      // It's important here not to leak the second argument, which is the "held value." The FinalizationRegistry
+      // effectively creates a strong reference between the first argument (the "target") and the held value. When
+      // the target is GC'ed, the callback is called, and then the held value is GC'ed.
+      // Putting the key here would mean the key is not GC'ed until the value is GC'ed, which defeats the purpose
+      // of the WeakMap. Whereas putting the weakRefs array here is fine, because it doesn't have a strong reference
+      // to anything. See also this example:
+      // https://gist.github.com/nolanlawson/79a3d36e8e6cc25c5048bb17c1795aea
+      this._registry.register(value, weakRefs);
+    }
+    delete(key) {
+      this._map.delete(key);
+    }
+  }
+  const WeakMultiMap = supportsWeakRefs ? ModernWeakMultiMap : LegacyWeakMultiMap;
+
   /*
    * Copyright (c) 2020, salesforce.com, inc.
    * All rights reserved.
@@ -3444,68 +3383,63 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
   const swappedTemplateMap = new WeakMap();
   const swappedComponentMap = new WeakMap();
   const swappedStyleMap = new WeakMap();
-  const activeTemplates = new WeakMap();
-  const activeComponents = new WeakMap();
-  const activeStyles = new WeakMap();
+  // The important thing here is the weak values – VMs are transient (one per component instance) and should be GC'ed,
+  // so we don't want to create strong references to them.
+  // The weak keys are kind of useless, because Templates, LightningElementConstructors, and StylesheetFactories are
+  // never GC'ed. But maybe they will be someday, so we may as well use weak keys too.
+  const activeTemplates = new WeakMultiMap();
+  const activeComponents = new WeakMultiMap();
+  const activeStyles = new WeakMultiMap();
   function rehydrateHotTemplate(tpl) {
     const list = activeTemplates.get(tpl);
-    if (!isUndefined$1(list)) {
-      list.forEach(vm => {
-        if (isFalse(vm.isDirty)) {
-          // forcing the vm to rehydrate in the micro-task:
-          markComponentAsDirty(vm);
-          scheduleRehydration(vm);
-        }
-      });
-      // resetting the Set to release the memory of those vm references
-      // since they are not longer related to this template, instead
-      // they will get re-associated once these instances are rehydrated.
-      list.clear();
+    for (const vm of list) {
+      if (isFalse(vm.isDirty)) {
+        // forcing the vm to rehydrate in the micro-task:
+        markComponentAsDirty(vm);
+        scheduleRehydration(vm);
+      }
     }
+    // Resetting the Set since these VMs are no longer related to this template, instead
+    // they will get re-associated once these instances are rehydrated.
+    activeTemplates.delete(tpl);
     return true;
   }
   function rehydrateHotStyle(style) {
     const list = activeStyles.get(style);
-    if (!isUndefined$1(list)) {
-      list.forEach(vm => {
-        // if a style definition is swapped, we must reset
-        // vm's template content in the next micro-task:
-        forceRehydration(vm);
-      });
-      // resetting the Set to release the memory of those vm references
-      // since they are not longer related to this style, instead
-      // they will get re-associated once these instances are rehydrated.
-      list.clear();
-    }
+    for (const vm of list) {
+      // if a style definition is swapped, we must reset
+      // vm's template content in the next micro-task:
+      forceRehydration(vm);
+    }
+    // Resetting the Set since these VMs are no longer related to this style, instead
+    // they will get re-associated once these instances are rehydrated.
+    activeStyles.delete(style);
     return true;
   }
   function rehydrateHotComponent(Ctor) {
     const list = activeComponents.get(Ctor);
     let canRefreshAllInstances = true;
-    if (!isUndefined$1(list)) {
-      list.forEach(vm => {
-        const {
-          owner
-        } = vm;
-        if (!isNull(owner)) {
-          // if a component class definition is swapped, we must reset
-          // owner's template content in the next micro-task:
-          forceRehydration(owner);
-        } else {
-          // the hot swapping for components only work for instances of components
-          // created from a template, root elements can't be swapped because we
-          // don't have a way to force the creation of the element with the same state
-          // of the current element.
-          // Instead, we can report the problem to the caller so it can take action,
-          // for example: reload the entire page.
-          canRefreshAllInstances = false;
-        }
-      });
-      // resetting the Set to release the memory of those vm references
-      // since they are not longer related to this constructor, instead
-      // they will get re-associated once these instances are rehydrated.
-      list.clear();
-    }
+    for (const vm of list) {
+      const {
+        owner
+      } = vm;
+      if (!isNull(owner)) {
+        // if a component class definition is swapped, we must reset
+        // owner's template content in the next micro-task:
+        forceRehydration(owner);
+      } else {
+        // the hot swapping for components only work for instances of components
+        // created from a template, root elements can't be swapped because we
+        // don't have a way to force the creation of the element with the same state
+        // of the current element.
+        // Instead, we can report the problem to the caller so it can take action,
+        // for example: reload the entire page.
+        canRefreshAllInstances = false;
+      }
+    }
+    // resetting the Set since these VMs are no longer related to this constructor, instead
+    // they will get re-associated once these instances are rehydrated.
+    activeComponents.delete(Ctor);
     return canRefreshAllInstances;
   }
   function getTemplateOrSwappedTemplate(tpl) {
@@ -3539,72 +3473,27 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     assertNotProd(); // this method should never leak to prod
     // tracking active component
     const Ctor = vm.def.ctor;
-    let componentVMs = activeComponents.get(Ctor);
-    if (isUndefined$1(componentVMs)) {
-      componentVMs = new Set();
-      activeComponents.set(Ctor, componentVMs);
-    }
     // this will allow us to keep track of the hot components
-    componentVMs.add(vm);
+    activeComponents.add(Ctor, vm);
     // tracking active template
     const tpl = vm.cmpTemplate;
     if (tpl) {
-      let templateVMs = activeTemplates.get(tpl);
-      if (isUndefined$1(templateVMs)) {
-        templateVMs = new Set();
-        activeTemplates.set(tpl, templateVMs);
-      }
       // this will allow us to keep track of the templates that are
       // being used by a hot component
-      templateVMs.add(vm);
+      activeTemplates.add(tpl, vm);
       // tracking active styles associated to template
       const stylesheets = tpl.stylesheets;
       if (!isUndefined$1(stylesheets)) {
-        flattenStylesheets(stylesheets).forEach(stylesheet => {
+        for (const stylesheet of flattenStylesheets(stylesheets)) {
           // this is necessary because we don't hold the list of styles
           // in the vm, we only hold the selected (already swapped template)
           // but the styles attached to the template might not be the actual
           // active ones, but the swapped versions of those.
-          stylesheet = getStyleOrSwappedStyle(stylesheet);
-          let stylesheetVMs = activeStyles.get(stylesheet);
-          if (isUndefined$1(stylesheetVMs)) {
-            stylesheetVMs = new Set();
-            activeStyles.set(stylesheet, stylesheetVMs);
-          }
+          const swappedStylesheet = getStyleOrSwappedStyle(stylesheet);
           // this will allow us to keep track of the stylesheet that are
           // being used by a hot component
-          stylesheetVMs.add(vm);
-        });
-      }
-    }
-  }
-  function removeActiveVM(vm) {
-    assertNotProd(); // this method should never leak to prod
-    // tracking inactive component
-    const Ctor = vm.def.ctor;
-    let list = activeComponents.get(Ctor);
-    if (!isUndefined$1(list)) {
-      // deleting the vm from the set to avoid leaking memory
-      list.delete(vm);
-    }
-    // removing inactive template
-    const tpl = vm.cmpTemplate;
-    if (tpl) {
-      list = activeTemplates.get(tpl);
-      if (!isUndefined$1(list)) {
-        // deleting the vm from the set to avoid leaking memory
-        list.delete(vm);
-      }
-      // removing active styles associated to template
-      const styles = tpl.stylesheets;
-      if (!isUndefined$1(styles)) {
-        flattenStylesheets(styles).forEach(style => {
-          list = activeStyles.get(style);
-          if (!isUndefined$1(list)) {
-            // deleting the vm from the set to avoid leaking memory
-            list.delete(vm);
-          }
-        });
+          activeStyles.add(swappedStylesheet, vm);
+        }
       }
     }
   }
@@ -3646,6 +3535,14 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  /**
+   * This module is responsible for producing the ComponentDef object that is always
+   * accessible via `vm.def`. This is lazily created during the creation of the first
+   * instance of a component class, and shared across all instances.
+   *
+   * This structure can be used to synthetically create proxies, and understand the
+   * shape of a component. It is also used internally to apply extra optimizations.
+   */
   const CtorToDefMap = new WeakMap();
   function getCtorProto(Ctor) {
     let proto = getPrototypeOf$1(Ctor);
@@ -3677,12 +3574,16 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       const ctorName = Ctor.name;
       // Removing the following assert until https://bugs.webkit.org/show_bug.cgi?id=190140 is fixed.
       // assert.isTrue(ctorName && isString(ctorName), `${toString(Ctor)} should have a "name" property with string value, but found ${ctorName}.`);
-      assert.isTrue(Ctor.constructor, `Missing ${ctorName}.constructor, ${ctorName} should have a "constructor" property.`);
-      if (!isUndefined$1(ctorShadowSupportMode)) {
-        assert.invariant(ctorShadowSupportMode === "any" /* ShadowSupportMode.Any */ || ctorShadowSupportMode === "reset" /* ShadowSupportMode.Default */, `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
+      if (!Ctor.constructor) {
+        // This error seems impossible to hit, due to an earlier check in `isComponentConstructor()`.
+        // But we keep it here just in case.
+        logError(`Missing ${ctorName}.constructor, ${ctorName} should have a "constructor" property.`);
       }
-      if (!isUndefined$1(ctorRenderMode)) {
-        assert.invariant(ctorRenderMode === 'light' || ctorRenderMode === 'shadow', `Invalid value for static property renderMode: '${ctorRenderMode}'. renderMode must be either 'light' or 'shadow'.`);
+      if (!isUndefined$1(ctorShadowSupportMode) && ctorShadowSupportMode !== "any" /* ShadowSupportMode.Any */ && ctorShadowSupportMode !== "reset" /* ShadowSupportMode.Default */) {
+        logError(`Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
+      }
+      if (!isUndefined$1(ctorRenderMode) && ctorRenderMode !== 'light' && ctorRenderMode !== 'shadow') {
+        logError(`Invalid value for static property renderMode: '${ctorRenderMode}'. renderMode must be either 'light' or 'shadow'.`);
       }
     }
     const decoratorsMeta = getDecoratorsMeta(Ctor);
@@ -3867,6 +3768,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   function makeHostToken(token) {
+    // Note: if this ever changes, update the `cssScopeTokens` returned by `@lwc/compiler`
     return `${token}-host`;
   }
   function createInlineStyleVNode(content) {
@@ -4120,15 +4022,17 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  const ColonCharCode$1 = 58;
+  const ColonCharCode = 58;
   function patchAttributes(oldVnode, vnode, renderer) {
     const {
-      attrs
+      attrs,
+      external
     } = vnode.data;
     if (isUndefined$1(attrs)) {
       return;
     }
     const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
+    // Attrs may be the same due to the static content optimization, so we can skip diffing
     if (oldAttrs === attrs) {
       return;
     }
@@ -4137,17 +4041,23 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     } = vnode;
     const {
       setAttribute,
-      removeAttribute
+      removeAttribute,
+      setProperty
     } = renderer;
     for (const key in attrs) {
       const cur = attrs[key];
       const old = oldAttrs[key];
       if (old !== cur) {
-        unlockAttribute(elm, key);
-        if (StringCharCodeAt.call(key, 3) === ColonCharCode$1) {
+        let propName;
+        // For external custom elements, sniff to see if the attr should be considered a prop.
+        // Use kebabCaseToCamelCase directly because we don't want to set props like `ariaLabel` or `tabIndex`
+        // on a custom element versus just using the more reliable attribute format.
+        if (external && (propName = kebabCaseToCamelCase(key)) in elm) {
+          setProperty(elm, propName, cur);
+        } else if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
           // Assume xml namespace
           setAttribute(elm, key, cur, XML_NAMESPACE);
-        } else if (StringCharCodeAt.call(key, 5) === ColonCharCode$1) {
+        } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
           // Assume xlink namespace
           setAttribute(elm, key, cur, XLINK_NAMESPACE);
         } else if (isNull(cur) || isUndefined$1(cur)) {
@@ -4155,52 +4065,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         } else {
           setAttribute(elm, key, cur);
         }
-        lockAttribute();
-      }
-    }
-  }
-
-  /*
-   * 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
-   */
-  const ColonCharCode = 58;
-  function patchAttrUnlessProp(oldVnode, vnode, renderer) {
-    const {
-      data: {
-        attrs
-      },
-      elm
-    } = vnode;
-    if (isUndefined$1(attrs)) {
-      return;
-    }
-    const {
-      removeAttribute,
-      setAttribute,
-      setProperty
-    } = renderer;
-    const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
-    for (const name in attrs) {
-      const cur = attrs[name];
-      const old = oldAttrs[name];
-      if (old !== cur) {
-        const propName = htmlAttributeToProperty(name);
-        if (propName in elm) {
-          setProperty(elm, name, cur);
-        } else if (StringCharCodeAt.call(name, 3) === ColonCharCode) {
-          // Assume xml namespace
-          setAttribute(elm, name, cur, XML_NAMESPACE);
-        } else if (StringCharCodeAt.call(name, 5) === ColonCharCode) {
-          // Assume xlink namespace
-          setAttribute(elm, name, cur, XLINK_NAMESPACE);
-        } else if (isNull(cur) || isUndefined$1(cur)) {
-          removeAttribute(elm, name);
-        } else {
-          setAttribute(elm, name, cur);
-        }
       }
     }
   }
@@ -4230,6 +4094,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     if (!isNull(oldVnode)) {
       oldProps = oldVnode.data.props;
       const oldSpread = oldVnode.data.spread;
+      // Props may be the same due to the static content optimization, so we can skip diffing
       if (oldProps === props && oldSpread === spread) {
         return;
       }
@@ -4378,12 +4243,11 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   function applyEventListeners(vnode, renderer) {
+    var _a;
     const {
-      elm,
-      data: {
-        on
-      }
+      elm
     } = vnode;
+    const on = (_a = vnode.data) === null || _a === void 0 ? void 0 : _a.on;
     if (isUndefined$1(on)) {
       return;
     }
@@ -4471,7 +4335,12 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       return;
     }
     if (process.env.NODE_ENV !== 'production') {
-      if (!isSameVnode(n1, n2)) {
+      if (!isSameVnode(n1, n2) &&
+      // Currently the only scenario when patch does not receive the same vnodes are for
+      // dynamic components. When a dynamic component's constructor changes, the value of its
+      // tag name (sel) will be different. The engine will unmount the previous element
+      // and mount the new one using the new constructor in patchCustomElement.
+      !(isVCustomElement(n1) && isVCustomElement(n2))) {
         throw new Error('Expected these VNodes to be the same: ' + JSON.stringify({
           sel: n1.sel,
           key: n1.key
@@ -4573,8 +4442,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       children
     } = vnode;
     mountVNodes(children, parent, renderer, anchor);
-    // children of a fragment will always have at least the two delimiters.
-    vnode.elm = children[children.length - 1].elm;
+    vnode.elm = vnode.leading.elm;
   }
   function patchFragment(n1, n2, parent, renderer) {
     const {
@@ -4587,7 +4455,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       updateDynamicChildren(n1.children, children, parent, renderer);
     }
     // Note: not reusing n1.elm, because during patching, it may be patched with another text node.
-    n2.elm = children[children.length - 1].elm;
+    n2.elm = n2.leading.elm;
   }
   function mountElement(vnode, parent, anchor, renderer) {
     const {
@@ -4637,6 +4505,8 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       }
     }
     insertNode(elm, parent, anchor, renderer);
+    // Event listeners are only applied once when mounting, so they are allowed for static vnodes
+    applyEventListeners(vnode, renderer);
   }
   function mountCustomElement(vnode, parent, anchor, renderer) {
     const {
@@ -4700,8 +4570,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     }
   }
   function patchCustomElement(n1, n2, parent, renderer) {
+    // TODO [#3331]: This if branch should be removed in 246 with lwc:dynamic
     if (n1.ctor !== n2.ctor) {
-      // If the constructor, unmount the current component and mount a new one using the new
+      // If the constructor differs, unmount the current component and mount a new one using the new
       // constructor.
       const anchor = renderer.nextSibling(n1.elm);
       unmount(n1, parent, renderer, true);
@@ -4838,6 +4709,25 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       lockDomMutation();
     }
   }
+  function insertFragmentOrNode(vnode, parent, anchor, renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+      unlockDomMutation();
+    }
+    if (isVFragment(vnode)) {
+      const children = vnode.children;
+      for (let i = 0; i < children.length; i += 1) {
+        const child = children[i];
+        if (!isNull(child)) {
+          renderer.insert(child.elm, parent, anchor);
+        }
+      }
+    } else {
+      renderer.insert(vnode.elm, parent, anchor);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      lockDomMutation();
+    }
+  }
   function insertNode(node, parent, anchor, renderer) {
     if (process.env.NODE_ENV !== 'production') {
       unlockDomMutation();
@@ -4866,11 +4756,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     // value is set before type=radio.
     patchClassAttribute(oldVnode, vnode, renderer);
     patchStyleAttribute(oldVnode, vnode, renderer);
-    if (vnode.data.external) {
-      patchAttrUnlessProp(oldVnode, vnode, renderer);
-    } else {
-      patchAttributes(oldVnode, vnode, renderer);
-    }
+    patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
   }
   function applyStyleScoping(elm, owner, renderer) {
@@ -5138,13 +5024,23 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       } else if (isSameVnode(oldStartVnode, newEndVnode)) {
         // Vnode moved right
         patch(oldStartVnode, newEndVnode, parent, renderer);
-        insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
+        // In the case of fragments, the `elm` property of a vfragment points to the leading
+        // anchor. To determine the next sibling of the whole fragment, we need to use the
+        // trailing anchor as the argument to nextSibling():
+        // [..., [leading, ...content, trailing], nextSibling, ...]
+        let anchor;
+        if (isVFragment(oldEndVnode)) {
+          anchor = renderer.nextSibling(oldEndVnode.trailing.elm);
+        } else {
+          anchor = renderer.nextSibling(oldEndVnode.elm);
+        }
+        insertFragmentOrNode(oldStartVnode, parent, anchor, renderer);
         oldStartVnode = oldCh[++oldStartIdx];
         newEndVnode = newCh[--newEndIdx];
       } else if (isSameVnode(oldEndVnode, newStartVnode)) {
         // Vnode moved left
         patch(oldEndVnode, newStartVnode, parent, renderer);
-        insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
+        insertFragmentOrNode(newStartVnode, parent, oldStartVnode.elm, renderer);
         oldEndVnode = oldCh[--oldEndIdx];
         newStartVnode = newCh[++newStartIdx];
       } else {
@@ -5175,7 +5071,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
               }
               // We've already cloned at least once, so it's no longer read-only
               oldCh[idxInOld] = undefined;
-              insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
+              insertFragmentOrNode(elmToMove, parent, oldStartVnode.elm, renderer);
             }
           }
           newStartVnode = newCh[++newStartIdx];
@@ -5221,9 +5117,16 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       if (n2 !== n1) {
         if (isVNode(n1)) {
           if (isVNode(n2)) {
-            // both vnodes are equivalent, and we just need to patch them
-            patch(n1, n2, parent, renderer);
-            anchor = n2.elm;
+            if (isSameVnode(n1, n2)) {
+              // both vnodes are equivalent, and we just need to patch them
+              patch(n1, n2, parent, renderer);
+              anchor = n2.elm;
+            } else {
+              // removing the old vnode since the new one is different
+              unmount(n1, parent, renderer, true);
+              mount(n2, parent, renderer, anchor);
+              anchor = n2.elm;
+            }
           } else {
             // removing the old vnode since the new one is null
             unmount(n1, parent, renderer, true);
@@ -5259,26 +5162,37 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     };
   }
   // [st]atic node
-  function st(fragment, key) {
-    return {
+  function st(fragment, key, data) {
+    const owner = getVMBeingRendered();
+    const vnode = {
       type: 4 /* VNodeType.Static */,
       sel: undefined,
       key,
       elm: undefined,
       fragment,
-      owner: getVMBeingRendered()
+      owner,
+      data
     };
+    const ref = data === null || data === void 0 ? void 0 : data.ref;
+    if (!isUndefined$1(ref)) {
+      setRefVNode(owner, ref, vnode);
+    }
+    return vnode;
   }
   // [fr]agment node
   function fr(key, children, stable) {
+    const leading = t('');
+    const trailing = t('');
     return {
       type: 5 /* VNodeType.Fragment */,
       sel: undefined,
       key,
       elm: undefined,
-      children: [t(''), ...children, t('')],
+      children: [leading, ...children, trailing],
       stable,
-      owner: getVMBeingRendered()
+      owner: getVMBeingRendered(),
+      leading,
+      trailing
     };
   }
   // [h]tml node
@@ -5365,7 +5279,14 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
             // undefined is for root components, but root components cannot accept slotted content
             setVMBeingRendered(slotset.owner);
             try {
-              ArrayPush$1.call(newChildren, vnode.factory(data.slotData, data.key));
+              // The factory function is a template snippet from the slot set owner's template,
+              // hence switch over to the slot set owner's template reactive observer
+              const {
+                tro
+              } = slotset.owner;
+              tro.observe(() => {
+                ArrayPush$1.call(newChildren, vnode.factory(data.slotData, data.key));
+              });
             } finally {
               setVMBeingRendered(vmBeingRenderedInception);
             }
@@ -5577,7 +5498,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         return compilerKey + ':' + obj;
       case 'object':
         if (process.env.NODE_ENV !== 'production') {
-          assert.fail(`Invalid key value "${obj}" in ${getVMBeingRendered()}. Key must be a string or number.`);
+          logError(`Invalid key value "${obj}" in ${getVMBeingRendered()}. Key must be a string or number.`);
         }
     }
   }
@@ -5629,16 +5550,18 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     return url;
   }
   /**
-   * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
+   * [ddc] - create a (deprecated) dynamic component via `<x-foo lwc:dynamic={Ctor}>`
+   *
+   * TODO [#3331]: remove usage of lwc:dynamic in 246
    */
-  function dc(sel, Ctor, data, children = EmptyArray) {
+  function ddc(sel, Ctor, data, children = EmptyArray) {
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(isString(sel), `dc() 1st argument sel must be a string.`);
       assert.isTrue(isObject(data), `dc() 3nd argument data must be an object.`);
       assert.isTrue(arguments.length === 3 || isArray$1(children), `dc() 4nd argument data must be an array.`);
     }
     // null or undefined values should produce a null value in the VNodes
-    if (Ctor == null) {
+    if (isNull(Ctor) || isUndefined$1(Ctor)) {
       return null;
     }
     if (!isComponentConstructor(Ctor)) {
@@ -5646,6 +5569,30 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     }
     return c(sel, Ctor, data, children);
   }
+  /**
+   * [dc] - create a dynamic component via `<lwc:component lwc:is={Ctor}>`
+   */
+  function dc(Ctor, data, children = EmptyArray) {
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(isObject(data), `dc() 2nd argument data must be an object.`);
+      assert.isTrue(arguments.length === 3 || isArray$1(children), `dc() 3rd argument data must be an array.`);
+    }
+    // Null or undefined values should produce a null value in the VNodes.
+    // This is the only value at compile time as the constructor will not be known.
+    if (isNull(Ctor) || isUndefined$1(Ctor)) {
+      return null;
+    }
+    if (!isComponentConstructor(Ctor)) {
+      throw new Error(`Invalid constructor ${toString$1(Ctor)} is not a LightningElement constructor.`);
+    }
+    // Look up the dynamic component's name at runtime once the constructor is available.
+    // This information is only known at runtime and is stored as part of registerComponent.
+    const sel = getComponentRegisteredName(Ctor);
+    if (isUndefined$1(sel) || sel === '') {
+      throw new Error(`Invalid LWC constructor ${toString$1(Ctor)} does not have a registered name`);
+    }
+    return c(sel, Ctor, data, children);
+  }
   /**
    * slow children collection marking mechanism. this API allows the compiler to signal
    * to the engine that a particular collection of children must be diffed using the slow
@@ -5707,7 +5654,8 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     gid,
     fid,
     shc,
-    ssf
+    ssf,
+    ddc
   });
 
   /*
@@ -5819,30 +5767,29 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
   function setVMBeingRendered(vm) {
     vmBeingRendered = vm;
   }
-  function validateSlots(vm, html) {
+  function validateSlots(vm) {
     assertNotProd(); // this method should never leak to prod
     const {
       cmpSlots
     } = vm;
-    const {
-      slots = EmptyArray
-    } = html;
     for (const slotName in cmpSlots.slotAssignments) {
       // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
       assert.isTrue(isArray$1(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
-      if (slotName !== '' && ArrayIndexOf.call(slots, slotName) === -1) {
-        // TODO [#1297]: this should never really happen because the compiler should always validate
-        // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
-        logError(`Ignoring unknown provided slot name "${slotName}" in ${vm}. Check for a typo on the slot attribute.`, vm);
-      }
     }
   }
   function validateLightDomTemplate(template, vm) {
-    if (template === defaultEmptyTemplate) return;
+    assertNotProd(); // should never leak to prod mode
+    if (template === defaultEmptyTemplate) {
+      return;
+    }
     if (vm.renderMode === 0 /* RenderMode.Light */) {
-      assert.isTrue(template.renderMode === 'light', `Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${getComponentTag(vm)}.`);
+      if (template.renderMode !== 'light') {
+        logError(`Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${getComponentTag(vm)}.`);
+      }
     } else {
-      assert.isTrue(isUndefined$1(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
+      if (!isUndefined$1(template.renderMode)) {
+        logError(`Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
+      }
     }
   }
   function buildParseFragmentFn(createFragmentFn) {
@@ -5972,7 +5919,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
         }
         if (process.env.NODE_ENV !== 'production') {
           // validating slots in every rendering since the allocated content might change over time
-          validateSlots(vm, html);
+          validateSlots(vm);
           // add the VM to the list of host VMs that can be re-rendered if html is swapped
           setActiveVM(vm);
         }
@@ -5998,7 +5945,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       logOperationEnd(1 /* OperationId.Render */, vm);
     });
     if (process.env.NODE_ENV !== 'production') {
-      assert.invariant(isArray$1(vnodes), `Compiler should produce html functions that always return an array.`);
+      if (!isArray$1(vnodes)) {
+        logError(`Compiler should produce html functions that always return an array.`);
+      }
     }
     return vnodes;
   }
@@ -6128,30 +6077,34 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  const signedTemplateMap = new Map();
+  const registeredComponentMap = new Map();
   /**
    * INTERNAL: This function can only be invoked by compiled code. The compiler
    * will prevent this function from being imported by userland code.
    */
   function registerComponent(
   // We typically expect a LightningElementConstructor, but technically you can call this with anything
-  Ctor, {
-    tmpl
-  }) {
+  Ctor, metadata) {
     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);
+      // TODO [#3331]: add validation to check the value of metadata.sel is not an empty string.
+      registeredComponentMap.set(Ctor, metadata);
     }
     // chaining this method as a way to wrap existing assignment of component constructor easily,
     // without too much transformation
     return Ctor;
   }
   function getComponentRegisteredTemplate(Ctor) {
-    return signedTemplateMap.get(Ctor);
+    var _a;
+    return (_a = registeredComponentMap.get(Ctor)) === null || _a === void 0 ? void 0 : _a.tmpl;
+  }
+  function getComponentRegisteredName(Ctor) {
+    var _a;
+    return (_a = registeredComponentMap.get(Ctor)) === null || _a === void 0 ? void 0 : _a.sel;
   }
   function getTemplateReactiveObserver(vm) {
     return createReactiveObserver(() => {
@@ -6298,9 +6251,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       runChildNodesDisconnectedCallback(vm);
       runLightChildNodesDisconnectedCallback(vm);
     }
-    if (process.env.NODE_ENV !== 'production') {
-      removeActiveVM(vm);
-    }
   }
   // this method is triggered by the diffing algo only when a vnode from the
   // old vnode.children is removed from the DOM.
@@ -7090,7 +7040,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     hasMismatch = false;
     runConnectedCallback(vm);
     hydrateVM(vm);
-    if (hasMismatch) {
+    if (hasMismatch && process.env.NODE_ENV !== 'production') {
       logError('Hydration completed with errors.', vm);
     }
   }
@@ -7136,8 +7086,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     return renderer.nextSibling(hydratedNode);
   }
   const NODE_VALUE_PROP = 'nodeValue';
-  const PARENT_NODE_PROP = 'parentNode';
-  const TAG_NAME_PROP = 'tagName';
   function textNodeContentsAreEqual(node, vnode, renderer) {
     const {
       getProperty
@@ -7151,24 +7099,31 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     if (nodeValue === '\u200D' && vnode.text === '') {
       return true;
     }
-    // Special case for text nodes inside `<style>` tags – these are escaped when rendered server-size,
-    // but not when generated by the engine client-side.
-    const parentNode = getProperty(node, PARENT_NODE_PROP);
-    // Should never be null, but just to be safe, we check.
-    /* istanbul ignore else */
-    if (!isNull(parentNode)) {
-      const tagName = getProperty(parentNode, TAG_NAME_PROP);
-      // If the tagName is STYLE, then the following condition should always be true.
-      // The LWC compiler blocks using `<style>`s inside of templates, so it should be impossible
-      // for component authors to render different `<style>` text content on the client and server.
-      // But just to be safe, we check.
-      /* istanbul ignore next */
-      if (tagName === 'STYLE' && htmlEscape(vnode.text) === nodeValue) {
-        return true;
-      }
-    }
     return false;
   }
+  // The validationOptOut static property can be an array of attribute names.
+  // Any attribute names specified in that array will not be validated, and the
+  // LWC runtime will assume that VDOM attrs and DOM attrs are in sync.
+  function getValidationPredicate(optOutStaticProp) {
+    if (isUndefined$1(optOutStaticProp)) {
+      return _attrName => true;
+    }
+    // If validationOptOut is true, no attributes will be checked for correctness
+    // and the runtime will assume VDOM attrs and DOM attrs are in sync.
+    if (isTrue(optOutStaticProp)) {
+      return _attrName => false;
+    }
+    // If validationOptOut is an array of strings, attributes specified in the
+    // array will be "opted out". Attributes not specified in the array will still
+    // be validated.
+    if (isArray$1(optOutStaticProp) && arrayEvery(optOutStaticProp, isString)) {
+      return attrName => !ArrayIncludes.call(optOutStaticProp, attrName);
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      logWarn('Validation opt out must be `true` or an array of attributes that should not be validated.');
+    }
+    return _attrName => true;
+  }
   function hydrateText(node, vnode, renderer) {
     var _a;
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
@@ -7208,10 +7163,11 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     return node;
   }
   function hydrateStaticElement(elm, vnode, renderer) {
-    if (!areCompatibleNodes(vnode.fragment, elm, vnode, renderer)) {
+    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) || !areCompatibleNodes(vnode.fragment, elm, vnode, renderer)) {
       return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
+    applyEventListeners(vnode, renderer);
     return elm;
   }
   function hydrateFragment(elm, vnode, renderer) {
@@ -7268,7 +7224,20 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     return elm;
   }
   function hydrateCustomElement(elm, vnode, renderer) {
-    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) || !isMatchingElement(vnode, elm, renderer)) {
+    const {
+      validationOptOut
+    } = vnode.ctor;
+    const shouldValidateAttr = getValidationPredicate(validationOptOut);
+    // The validationOptOut static property can be an array of attribute names.
+    // Any attribute names specified in that array will not be validated, and the
+    // LWC runtime will assume that VDOM attrs and DOM attrs are in sync.
+    //
+    // If validationOptOut is true, no attributes will be checked for correctness
+    // and the runtime will assume VDOM attrs and DOM attrs are in sync.
+    //
+    // Therefore, if validationOptOut is falsey or an array of strings, we need to
+    // examine some or all of the custom element's attributes.
+    if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) || !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
       return handleMismatch(elm, vnode, renderer);
     }
     const {
@@ -7306,7 +7275,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
   function hydrateChildren(node, children, parentNode, owner) {
     let hasWarned = false;
     let nextNode = node;
-    let anchor = null;
     const {
       renderer
     } = owner;
@@ -7315,7 +7283,6 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       if (!isNull(childVnode)) {
         if (nextNode) {
           nextNode = hydrateNode(nextNode, childVnode, renderer);
-          anchor = childVnode.elm;
         } else {
           hasMismatch = true;
           if (process.env.NODE_ENV !== 'production') {
@@ -7324,8 +7291,8 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
               logError(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
             }
           }
-          mount(childVnode, parentNode, renderer, anchor);
-          anchor = childVnode.elm;
+          mount(childVnode, parentNode, renderer, nextNode);
+          nextNode = renderer.nextSibling(childVnode.elm);
         }
       }
     }
@@ -7376,7 +7343,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     }
     return true;
   }
-  function isMatchingElement(vnode, elm, renderer) {
+  function isMatchingElement(vnode, elm, renderer, shouldValidateAttr = () => true) {
     const {
       getProperty
     } = renderer;
@@ -7386,10 +7353,10 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       }
       return false;
     }
-    const hasIncompatibleAttrs = validateAttrs(vnode, elm, renderer);
-    const hasIncompatibleClass = validateClassAttr(vnode, elm, renderer);
-    const hasIncompatibleStyle = validateStyleAttr(vnode, elm, renderer);
-    return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+    const hasCompatibleAttrs = validateAttrs(vnode, elm, renderer, shouldValidateAttr);
+    const hasCompatibleClass = shouldValidateAttr('class') ? validateClassAttr(vnode, elm, renderer) : true;
+    const hasCompatibleStyle = shouldValidateAttr('style') ? validateStyleAttr(vnode, elm, renderer) : true;
+    return hasCompatibleAttrs && hasCompatibleClass && hasCompatibleStyle;
   }
   function attributeValuesAreEqual(vnodeValue, value) {
     const vnodeValueAsString = String(vnodeValue);
@@ -7404,7 +7371,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     // In all other cases, the two values are not considered equal
     return false;
   }
-  function validateAttrs(vnode, elm, renderer) {
+  function validateAttrs(vnode, elm, renderer, shouldValidateAttr) {
     const {
       data: {
         attrs = {}
@@ -7414,6 +7381,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     // 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 (const [attrName, attrValue] of Object.entries(attrs)) {
+      if (!shouldValidateAttr(attrName)) {
+        continue;
+      }
       const {
         owner
       } = vnode;
@@ -7444,7 +7414,8 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     } = data;
     const {
       getProperty,
-      getClassList
+      getClassList,
+      getAttribute
     } = renderer;
     const scopedToken = getScopeTokenClass(owner);
     const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
@@ -7477,11 +7448,12 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     }
     let nodesAreCompatible = true;
     let readableVnodeClassname;
-    const elmClassName = getProperty(elm, 'className');
+    const elmClassName = getAttribute(elm, 'class');
     if (!isUndefined$1(className) && String(className) !== elmClassName) {
       // className is used when class is bound to an expr.
       nodesAreCompatible = false;
-      readableVnodeClassname = className;
+      // stringify for pretty-printing
+      readableVnodeClassname = JSON.stringify(className);
     } else if (!isUndefined$1(classMap)) {
       // classMap is used when class is set to static value.
       const classList = getClassList(elm);
@@ -7493,18 +7465,19 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
           nodesAreCompatible = false;
         }
       }
-      readableVnodeClassname = computedClassName.trim();
+      // stringify for pretty-printing
+      readableVnodeClassname = JSON.stringify(computedClassName.trim());
       if (classList.length > keys(classMap).length) {
         nodesAreCompatible = false;
       }
-    } else if (isUndefined$1(className) && elmClassName !== '') {
+    } else if (isUndefined$1(className) && !isNull(elmClassName)) {
       // SSR contains a className but client-side VDOM does not
       nodesAreCompatible = false;
-      readableVnodeClassname = '';
+      readableVnodeClassname = '""';
     }
     if (!nodesAreCompatible) {
       if (process.env.NODE_ENV !== 'production') {
-        logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${readableVnodeClassname}" but found "${elmClassName}"`, vnode.owner);
+        logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected ${readableVnodeClassname} but found ${JSON.stringify(elmClassName)}`, vnode.owner);
       }
     }
     return nodesAreCompatible;
@@ -7586,7 +7559,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     const clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
     clientAttrsNames.forEach(attrName => {
       if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
-        logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, vnode.owner);
+        if (process.env.NODE_ENV !== 'production') {
+          logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, vnode.owner);
+        }
         isCompatibleElements = false;
       }
     });
@@ -7841,12 +7816,12 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
     if (process.env.NODE_ENV !== 'production') {
       // TODO [#1292]: Remove the readonly decorator
       if (arguments.length !== 1) {
-        assert.fail('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
+        logError('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
       }
     }
     return getReadOnlyProxy(obj);
   }
-  /* version: 2.38.1 */
+  /** version: 2.50.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8091,7 +8066,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
       // which are not equipped to be initialized that way.
       class clazz extends HTMLElementAlias {
-        /*LWC compiler v2.38.1*/
+        /*LWC compiler v2.50.0*/
       }
       customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
       new clazz();
@@ -8149,7 +8124,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
           // Do we want to support this? Throw an error? Currently for backwards compat it's a no-op.
         }
       }
-      /*LWC compiler v2.38.1*/
+      /*LWC compiler v2.50.0*/
     }
     // Do not unnecessarily add a connectedCallback/disconnectedCallback, as it introduces perf overhead
     // See: https://github.com/salesforce/lwc/pull/3162#issuecomment-1311851174
@@ -8230,8 +8205,9 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
    */
   function rendererFactory(baseRenderer) {
     const renderer = function (exports) {
+      /* proxy-compat-disable */
       /**
-       * Copyright (C) 2018 salesforce.com, inc.
+       * Copyright (C) 2023 salesforce.com, inc.
        */
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8270,7 +8246,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       function isNull(obj) {
         return obj === null;
       }
-      /** version: 2.38.1 */
+      /** version: 2.50.0 */
 
       /*
        * Copyright (c) 2023, salesforce.com, inc.
@@ -8290,7 +8266,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
           this.setNewContext = setNewContext;
           this.setDisconnectedCallback = setDisconnectedCallback;
         }
-        /*LWC compiler v2.38.1*/
+        /*LWC compiler v2.50.0*/
       }
       function registerContextConsumer(elm, adapterContextToken, subscriptionPayload) {
         dispatchEvent(elm, new WireContextSubscriptionEvent(adapterContextToken, subscriptionPayload));
@@ -8680,7 +8656,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       attributeChangedCallback(name, oldValue, newValue) {
         attributeChangedCallback.call(this, name, oldValue, newValue);
       }
-      /*LWC compiler v2.38.1*/
+      /*LWC compiler v2.50.0*/
     }, _a.observedAttributes = observedAttributes, _a;
   }
 
@@ -8894,7 +8870,7 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
       });
     });
   }
-  /* version: 2.38.1 */
+  /** version: 2.50.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -8931,4 +8907,4 @@ LWR.define('lwc/v/2_38_1', ['exports'], function (exports) { 'use strict';
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-});
+}));