lwc 2.45.0 → 2.45.2

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

@@ -43,7 +43,16 @@ var assert = /*#__PURE__*/Object.freeze({
  */
 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) {
@@ -329,9 +338,9 @@ function htmlAttributeToProperty(attrName) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.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.
@@ -409,7 +418,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.45.0 */
+/** version: 2.45.2 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -473,7 +482,7 @@ function applyAriaReflection(prototype = Element.prototype) {
         }
     }
 }
-/** version: 2.45.0 */
+/** version: 2.45.2 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -1000,8 +1009,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);
             },
         }),
     };
@@ -1086,16 +1096,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({
@@ -1124,24 +1136,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({
@@ -1157,20 +1172,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;
@@ -1203,9 +1204,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));
 }
@@ -1816,16 +1814,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,
@@ -1845,10 +1837,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);
@@ -1901,7 +1901,6 @@ const LightningElement = function () {
     // Adding extra guard rails in DEV mode.
     if (process.env.NODE_ENV !== 'production') {
         patchCustomElementWithRestrictions(elm);
-        patchComponentWithRestrictions(component);
     }
     return this;
 };
@@ -1937,9 +1936,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);
@@ -1989,7 +1994,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);
@@ -1999,7 +2006,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);
@@ -2022,9 +2031,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);
     },
@@ -2530,8 +2539,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);
@@ -2555,14 +2568,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,
@@ -2596,8 +2613,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);
@@ -3374,13 +3395,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(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);
@@ -5157,7 +5185,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.`);
             }
     }
 }
@@ -5447,13 +5475,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) {
@@ -5586,7 +5620,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;
 }
@@ -6675,6 +6711,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)) {
@@ -6753,8 +6810,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;
@@ -6848,7 +6916,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') {
@@ -6856,10 +6924,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);
@@ -6874,12 +6946,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);
@@ -7303,7 +7378,7 @@ function readonly(obj) {
     }
     return getReadOnlyProxy(obj);
 }
-/* version: 2.45.0 */
+/* version: 2.45.2 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7731,7 +7806,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.45.0 */
+    /** version: 2.45.2 */
 
     /*
      * Copyright (c) 2023, salesforce.com, inc.
@@ -8350,7 +8425,7 @@ function registerContextProvider(elm, adapterContextToken, onContextSubscription
         });
     }));
 }
-/* version: 2.45.0 */
+/* version: 2.45.2 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
 //# sourceMappingURL=engine-dom.js.map