@lwc/engine-core 2.45.0 → 2.45.2

package/dist/engine-core.js

@@ -1,5 +1,5 @@
 /* proxy-compat-disable */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, assert, freeze, KEY__SYNTHETIC_MODE, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, htmlAttributeToProperty, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, globalThis as globalThis$1, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, freeze, KEY__SYNTHETIC_MODE, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, htmlAttributeToProperty, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, globalThis as globalThis$1, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
 import { applyAriaReflection } from '@lwc/aria-reflection';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -528,8 +528,9 @@ function patchElementWithRestrictions(elm, options) {
             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);
             },
         }),
     };
@@ -614,16 +615,18 @@ function getShadowRootRestrictionsDescriptors(sr) {
             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({
@@ -652,24 +655,27 @@ function getCustomElementRestrictionsDescriptors(elm) {
             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({
@@ -685,20 +691,6 @@ function getCustomElementRestrictionsDescriptors(elm) {
         }),
     };
 }
-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;
@@ -731,9 +723,6 @@ function patchCustomElementWithRestrictions(elm) {
     const elmProto = getPrototypeOf$1(elm);
     setPrototypeOf(elm, create(elmProto, restrictionsDescriptors));
 }
-function patchComponentWithRestrictions(cmp) {
-    defineProperties(cmp, getComponentRestrictionsDescriptors());
-}
 function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
 }
@@ -1344,16 +1333,10 @@ function markLockerLiveObject(obj) {
 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,
@@ -1373,10 +1356,18 @@ function createBridgeToElementDescriptor(propName, descriptor) {
             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);
@@ -1429,7 +1420,6 @@ const LightningElement = function () {
     // Adding extra guard rails in DEV mode.
     if (process.env.NODE_ENV !== 'production') {
         patchCustomElementWithRestrictions(elm);
-        patchComponentWithRestrictions(component);
     }
     return this;
 };
@@ -1465,9 +1455,15 @@ LightningElement.prototype = {
         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);
@@ -1517,7 +1513,9 @@ LightningElement.prototype = {
         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);
@@ -1527,7 +1525,9 @@ LightningElement.prototype = {
         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);
@@ -1550,9 +1550,9 @@ LightningElement.prototype = {
         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);
     },
@@ -2058,8 +2058,12 @@ function createPublicPropertyDescriptor(key) {
             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);
@@ -2083,14 +2087,18 @@ function createPublicAccessorDescriptor(key, descriptor) {
             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,
@@ -2124,8 +2132,12 @@ function internalTrackDecorator(key) {
             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);
@@ -2902,13 +2914,20 @@ function createComponentDef(Ctor) {
         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);
@@ -4690,7 +4709,7 @@ function k(compilerKey, obj) {
             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.`);
             }
     }
 }
@@ -4980,13 +4999,19 @@ function validateSlots(vm) {
     }
 }
 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) {
@@ -5119,7 +5144,9 @@ function evaluateTemplate(vm, html) {
         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;
 }
@@ -6211,6 +6238,27 @@ function textNodeContentsAreEqual(node, vnode, renderer) {
     }
     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)) {
@@ -6289,8 +6337,19 @@ function hydrateElement(elm, vnode, renderer) {
     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;
@@ -6384,7 +6443,7 @@ function hasCorrectNodeType(vnode, node, nodeType, renderer) {
     }
     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') {
@@ -6392,10 +6451,14 @@ function isMatchingElement(vnode, elm, renderer) {
         }
         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);
@@ -6410,12 +6473,15 @@ function attributeValuesAreEqual(vnodeValue, value) {
     // 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);
@@ -6841,5 +6907,5 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.45.0 */
+/* version: 2.45.2 */
 //# sourceMappingURL=engine-core.js.map