fix: only call callback when needed @W-17420330 (#5064)

* fix: only call callback when needed @W-17420330

* chore: simplify test

* fix: use correct class check

packages/@lwc/engine-core/src/framework/main.ts

@@ -31,6 +31,7 @@ export { registerTemplate } from './secure-template';
 export { registerDecorators } from './decorators/register';
 
 // Mics. internal APIs -----------------------------------------------------------------------------
+export { BaseBridgeElement } from './base-bridge-element';
 export { unwrap } from './membrane';
 export { sanitizeAttribute } from './secure-template';
 export { getComponentDef, isComponentConstructor } from './def';

packages/@lwc/engine-dom/src/apis/build-custom-element-constructor.ts

@@ -17,6 +17,7 @@ import {
     runFormDisabledCallback,
     runFormResetCallback,
     runFormStateRestoreCallback,
+    BaseBridgeElement,
 } from '@lwc/engine-core';
 import { isNull } from '@lwc/shared';
 import { renderer } from '../renderer';
@@ -121,7 +122,10 @@ export function buildCustomElementConstructor(Ctor: ComponentConstructor): HTMLE
         }
 
         attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-            attributeChangedCallback.call(this, name, oldValue, newValue);
+            if (this instanceof BaseBridgeElement) {
+                // W-17420330
+                attributeChangedCallback.call(this, name, oldValue, newValue);
+            }
         }
 
         formAssociatedCallback(form: HTMLFormElement | null) {

packages/@lwc/integration-karma/test/component/lifecycle-callbacks/index.spec.js

@@ -10,6 +10,7 @@ import TimingParent from 'timing/parent';
 import TimingParentLight from 'timing/parentLight';
 import ReorderingList from 'reordering/list';
 import ReorderingListLight from 'reordering/listLight';
+import Details from 'x/details';
 
 function resetTimingBuffer() {
     window.timingBuffer = [];
@@ -422,3 +423,16 @@ describe('dispatchEvent from connectedCallback/disconnectedCallback', () => {
         expect(globalDisconnected).toBe(false); // never received due to disconnection
     });
 });
+
+describe('attributeChangedCallback', () => {
+    it('W-17420330 - only fires for registered component', async () => {
+        const root = createElement('x-details', { is: Details });
+        document.body.appendChild(root);
+        await Promise.resolve();
+
+        const details = root.shadowRoot.querySelector('details');
+        const cb = Details.CustomElementConstructor.prototype.attributeChangedCallback;
+        cb.call(details, 'open', '', 'open');
+        expect(details.getAttribute('open')).toBeNull();
+    });
+});

packages/@lwc/integration-karma/test/component/lifecycle-callbacks/x/details/details.html

@@ -0,0 +1,10 @@
+<template>
+    <details>
+        <summary>An Ode to Toads</summary>
+        <p>
+            Violets are red,<br>
+            Roses are blue,<br>
+            Toads are cool!
+        </p>
+    </details>
+</template>

packages/@lwc/integration-karma/test/component/lifecycle-callbacks/x/details/details.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Details extends LightningElement {
+    @api open;
+}