fix: only call callback when needed @W-17420330

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

@@ -71,7 +71,7 @@ export function buildCustomElementConstructor(Ctor: ComponentConstructor): HTMLE
     const { observedAttributes } = HtmlPrototype as any;
     const { attributeChangedCallback } = HtmlPrototype.prototype as any;
 
-    return class extends HTMLElement {
+    return class CustomElementConstructor extends HTMLElement {
         constructor() {
             super();
 
@@ -121,7 +121,9 @@ export function buildCustomElementConstructor(Ctor: ComponentConstructor): HTMLE
         }
 
         attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-            attributeChangedCallback.call(this, name, oldValue, newValue);
+            if (this instanceof CustomElementConstructor) {
+                attributeChangedCallback.call(this, name, oldValue, newValue);
+            }
         }
 
         formAssociatedCallback(form: HTMLFormElement | null) {

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

@@ -0,0 +1,6 @@
+<template>
+    <details>
+        <summary>{summary}</summary>
+        {details}
+    </details>
+</template>

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

@@ -0,0 +1,13 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Details extends LightningElement {
+    @api open;
+    @api summary;
+    @api details;
+
+    renderedCallback() {
+        const elm = this.template.querySelector('details');
+        const cb = Details.CustomElementConstructor.prototype.attributeChangedCallback;
+        cb.call(elm, 'open', '', 'open');
+    }
+}

packages/@lwc/integration-karma/test/component/lifecycle-callbacks/attr/indirect/indirect.html

@@ -0,0 +1,6 @@
+<template>
+    <details>
+        <summary>{summary}</summary>
+        {details}
+    </details>
+</template>

packages/@lwc/integration-karma/test/component/lifecycle-callbacks/attr/indirect/indirect.js

@@ -0,0 +1,14 @@
+import { LightningElement, api } from 'lwc';
+import Details from 'attr/details';
+
+export default class Indirect extends LightningElement {
+    @api open;
+    @api summary;
+    @api details;
+
+    renderedCallback() {
+        const elm = this.template.querySelector('details');
+        const cb = Details.CustomElementConstructor.prototype.attributeChangedCallback;
+        cb.call(elm, 'open', '', 'open');
+    }
+}

packages/@lwc/integration-karma/test/component/lifecycle-callbacks/attr/parent/parent.html

@@ -0,0 +1,4 @@
+<template>
+    <attr-details summary="How to remember important tasks" details="I forgot to do the research..."></attr-details>
+    <attr-indirect summary="An Ode to Toads" details="Roses are red, violets are blue, toads are cool!"></attr-indirect>
+</template>

packages/@lwc/integration-karma/test/component/lifecycle-callbacks/attr/parent/parent.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class App extends LightningElement {}

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 AttrParent from 'attr/parent';
 
 function resetTimingBuffer() {
     window.timingBuffer = [];
@@ -422,3 +423,21 @@ describe('dispatchEvent from connectedCallback/disconnectedCallback', () => {
         expect(globalDisconnected).toBe(false); // never received due to disconnection
     });
 });
+
+describe('attributeChangedCallback', () => {
+    fit('W-17420330 - only fires for registered component', async () => {
+        const root = createElement('attr-parent', { is: AttrParent });
+        document.body.appendChild(root);
+
+        // const elm = root.shadowRoot.firstElementChild.shadowRoot.querySelector('details');
+        // expect(elm.getAttribute('open')).toBe(null);
+
+        /** `.shadowRoot.querySelector()` */
+        await Promise.resolve(setTimeout);
+        const srqs = (elm, sel) => elm.shadowRoot.querySelector(sel);
+        const direct = srqs(srqs(root, 'attr-details'), 'details');
+        expect(direct.getAttribute('open')).toBe(null);
+        const indirect = srqs(srqs(root, 'attr-indirect'), 'details');
+        expect(indirect.getAttribute('open')).toBe(null);
+    });
+});