lwc 2.45.0 → 2.45.2

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

@@ -46,7 +46,16 @@ var LWC = (function (exports) {
      */
     const { assign, create, defineProperties, defineProperty, freeze, getOwnPropertyDescriptor: getOwnPropertyDescriptor$1, getOwnPropertyNames: getOwnPropertyNames$1, getPrototypeOf: getPrototypeOf$1, hasOwnProperty: hasOwnProperty$1, isFrozen, keys, seal, setPrototypeOf, } = Object;
     const { isArray: isArray$1 } = Array;
-    const { concat: ArrayConcat$1, copyWithin: ArrayCopyWithin, fill: ArrayFill, filter: ArrayFilter, find: ArrayFind, findIndex: ArrayFindIndex, indexOf: ArrayIndexOf, join: ArrayJoin, map: ArrayMap, pop: ArrayPop, push: ArrayPush$1, reduce: ArrayReduce, reverse: ArrayReverse, shift: ArrayShift, slice: ArraySlice, some: ArraySome, sort: ArraySort, splice: ArraySplice, unshift: ArrayUnshift, forEach, } = Array.prototype;
+    const { concat: ArrayConcat$1, copyWithin: ArrayCopyWithin, every: ArrayEvery, fill: ArrayFill, filter: ArrayFilter, find: ArrayFind, findIndex: ArrayFindIndex, includes: ArrayIncludes, indexOf: ArrayIndexOf, join: ArrayJoin, map: ArrayMap, pop: ArrayPop, push: ArrayPush$1, reduce: ArrayReduce, reverse: ArrayReverse, shift: ArrayShift, slice: ArraySlice, some: ArraySome, sort: ArraySort, splice: ArraySplice, 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;
     const { charCodeAt: StringCharCodeAt, replace: StringReplace, split: StringSplit, slice: StringSlice, toLowerCase: StringToLowerCase, } = String.prototype;
     function isUndefined$1(obj) {
@@ -332,9 +341,9 @@ var LWC = (function (exports) {
      * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
      */
     // Increment whenever the LWC template compiler changes
-    const LWC_VERSION = "2.45.0";
+    const LWC_VERSION = "2.45.2";
     const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-    /** version: 2.45.0 */
+    /** version: 2.45.2 */
 
     /**
      * Copyright (C) 2018 salesforce.com, inc.
@@ -412,7 +421,7 @@ var LWC = (function (exports) {
             setFeatureFlag(name, value);
         }
     }
-    /** version: 2.45.0 */
+    /** version: 2.45.2 */
 
     /**
      * Copyright (C) 2018 salesforce.com, inc.
@@ -476,7 +485,7 @@ var LWC = (function (exports) {
             }
         }
     }
-    /** version: 2.45.0 */
+    /** version: 2.45.2 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -1003,8 +1012,9 @@ var LWC = (function (exports) {
                 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);
                 },
             }),
         };
@@ -1089,16 +1099,18 @@ var LWC = (function (exports) {
                 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({
@@ -1127,24 +1139,27 @@ var LWC = (function (exports) {
                 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({
@@ -1160,20 +1175,6 @@ var LWC = (function (exports) {
             }),
         };
     }
-    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;
@@ -1206,9 +1207,6 @@ var LWC = (function (exports) {
         const elmProto = getPrototypeOf$1(elm);
         setPrototypeOf(elm, create(elmProto, restrictionsDescriptors));
     }
-    function patchComponentWithRestrictions(cmp) {
-        defineProperties(cmp, getComponentRestrictionsDescriptors());
-    }
     function patchLightningElementPrototypeWithRestrictions(proto) {
         defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
     }
@@ -1819,16 +1817,10 @@ var LWC = (function (exports) {
     function createBridgeToElementDescriptor(propName, descriptor) {
         const { get, set, enumerable, 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,
@@ -1848,10 +1840,18 @@ var LWC = (function (exports) {
                 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);
@@ -1904,7 +1904,6 @@ var LWC = (function (exports) {
         // Adding extra guard rails in DEV mode.
         if (process.env.NODE_ENV !== 'production') {
             patchCustomElementWithRestrictions(elm);
-            patchComponentWithRestrictions(component);
         }
         return this;
     };
@@ -1940,9 +1939,15 @@ var LWC = (function (exports) {
             const { elm, renderer: { addEventListener }, } = 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);
@@ -1992,7 +1997,9 @@ var LWC = (function (exports) {
             const vm = getAssociatedVM(this);
             const { elm, renderer: { setAttribute }, } = 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);
@@ -2002,7 +2009,9 @@ var LWC = (function (exports) {
             const vm = getAssociatedVM(this);
             const { elm, renderer: { setAttribute }, } = 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);
@@ -2025,9 +2034,9 @@ var LWC = (function (exports) {
             const vm = getAssociatedVM(this);
             const { elm, renderer: { getClassList }, } = 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);
         },
@@ -2533,8 +2542,12 @@ var LWC = (function (exports) {
                 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);
@@ -2558,14 +2571,18 @@ var LWC = (function (exports) {
                 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,
@@ -2599,8 +2616,12 @@ var LWC = (function (exports) {
                 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);
@@ -3377,13 +3398,20 @@ var LWC = (function (exports) {
             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(ctorShadowSupportMode) &&
+                ctorShadowSupportMode !== "any" /* ShadowSupportMode.Any */ &&
+                ctorShadowSupportMode !== "reset" /* ShadowSupportMode.Default */) {
+                logError(`Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
             }
-            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(ctorRenderMode) &&
+                ctorRenderMode !== 'light' &&
+                ctorRenderMode !== 'shadow') {
+                logError(`Invalid value for static property renderMode: '${ctorRenderMode}'. renderMode must be either 'light' or 'shadow'.`);
             }
         }
         const decoratorsMeta = getDecoratorsMeta(Ctor);
@@ -5160,7 +5188,7 @@ var LWC = (function (exports) {
                 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.`);
                 }
         }
     }
@@ -5450,13 +5478,19 @@ var LWC = (function (exports) {
         }
     }
     function validateLightDomTemplate(template, vm) {
-        if (template === defaultEmptyTemplate)
+        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) {
@@ -5589,7 +5623,9 @@ var LWC = (function (exports) {
             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;
     }
@@ -6678,6 +6714,27 @@ var LWC = (function (exports) {
         }
         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);
+        }
+        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)) {
@@ -6756,8 +6813,19 @@ var LWC = (function (exports) {
         return elm;
     }
     function hydrateCustomElement(elm, vnode, 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)) {
+            !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
             return handleMismatch(elm, vnode, renderer);
         }
         const { sel, mode, ctor, owner } = vnode;
@@ -6851,7 +6919,7 @@ var LWC = (function (exports) {
         }
         return true;
     }
-    function isMatchingElement(vnode, elm, renderer) {
+    function isMatchingElement(vnode, elm, renderer, shouldValidateAttr = () => true) {
         const { getProperty } = renderer;
         if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
             if (process.env.NODE_ENV !== 'production') {
@@ -6859,10 +6927,14 @@ var LWC = (function (exports) {
             }
             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);
@@ -6877,12 +6949,15 @@ var LWC = (function (exports) {
         // 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 = {} }, } = vnode;
         let nodesAreCompatible = true;
         // Validate attributes, though we could always recovery from those by running the update mods.
         // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
         for (const [attrName, attrValue] of Object.entries(attrs)) {
+            if (!shouldValidateAttr(attrName)) {
+                continue;
+            }
             const { owner } = vnode;
             const { getAttribute } = renderer;
             const elmAttrValue = getAttribute(elm, attrName);
@@ -7306,7 +7381,7 @@ var LWC = (function (exports) {
         }
         return getReadOnlyProxy(obj);
     }
-    /* version: 2.45.0 */
+    /* version: 2.45.2 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -7734,7 +7809,7 @@ var LWC = (function (exports) {
         function isNull(obj) {
             return obj === null;
         }
-        /** version: 2.45.0 */
+        /** version: 2.45.2 */
 
         /*
          * Copyright (c) 2023, salesforce.com, inc.
@@ -8353,7 +8428,7 @@ var LWC = (function (exports) {
             });
         }));
     }
-    /* version: 2.45.0 */
+    /* version: 2.45.2 */
 
     exports.LightningElement = LightningElement;
     exports.__unstable__ProfilerControl = profilerControl;