fix(runtime): delay non-shadow onConnectedCallback; make sure slotted content is available (#6519)

* fix(runtime): delay non-shadow onConnectedCallback to make sure slotted content is available

* chore:

* chore:

---------

Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

Author: johnjenkins

src/declarations/stencil-private.ts

@@ -1812,6 +1812,10 @@ export interface HostRef {
   $rmListeners$?: (() => void)[];
   $modeName$?: string;
   $renderCount$?: number;
+  /**
+   * Defer connectedCallback until after first render for components with slot relocation.
+   */
+  $deferredConnectedCallback$?: boolean;
 }
 
 export interface PlatformRuntime {

src/runtime/initialize-component.ts

@@ -90,7 +90,15 @@ export const initializeComponent = async (
         hostRef.$flags$ |= HOST_FLAGS.isWatchReady;
       }
       endNewInstance();
-      fireConnectedCallback(hostRef.$lazyInstance$, elm);
+
+      // For components that relocate slots, defer connectedCallback until after first render
+      // so that slotted content is available
+      const needsDeferredCallback = BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation;
+      if (!needsDeferredCallback) {
+        fireConnectedCallback(hostRef.$lazyInstance$, elm);
+      } else {
+        hostRef.$deferredConnectedCallback$ = true;
+      }
     } else {
       // sync constructor component
       Cstr = elm.constructor as any;

src/runtime/update-component.ts

@@ -98,13 +98,21 @@ const dispatchHooks = (hostRef: d.HostRef, isInitialLoad: boolean): Promise<void
 
   if (isInitialLoad) {
     if (BUILD.lazyLoad) {
+      // Fire deferred connectedCallback before componentWillLoad
+      if (BUILD.slotRelocation && hostRef.$deferredConnectedCallback$) {
+        hostRef.$deferredConnectedCallback$ = false;
+        safeCall(instance, 'connectedCallback', undefined, elm);
+      }
+
       if (BUILD.hostListener) {
         hostRef.$flags$ |= HOST_FLAGS.isListenReady;
         if (hostRef.$queuedListeners$) {
           hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
           hostRef.$queuedListeners$ = undefined;
         }
       }
+
+      // Fire any pending fetch callbacks
       if (hostRef.$fetchedCbList$.length) {
         hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }

test/wdio/scoped-slot-connectedcallback/cmp-child.tsx

@@ -0,0 +1,37 @@
+import { Component, Element, h } from '@stencil/core';
+
+@Component({
+  tag: 'scoped-slot-connectedcallback-child',
+  shadow: false,
+})
+export class ScopedSlotConnectedCallbackChild {
+  @Element() el: HTMLElement;
+
+  connectedCallback() {
+    // Check if slotted content is available in connectedCallback
+    const slottedContent = this.el.querySelector('#slotted-content');
+    if (slottedContent) {
+      this.el.setAttribute('data-connected-slot-available', 'true');
+    } else {
+      this.el.setAttribute('data-connected-slot-available', 'false');
+    }
+  }
+
+  componentWillLoad() {
+    // Also check in componentWillLoad for comparison
+    const slottedContent = this.el.querySelector('#slotted-content');
+    if (slottedContent) {
+      this.el.setAttribute('data-willload-slot-available', 'true');
+    } else {
+      this.el.setAttribute('data-willload-slot-available', 'false');
+    }
+  }
+
+  render() {
+    return (
+      <div class="wrapper">
+        Before slot | <slot /> | After slot
+      </div>
+    );
+  }
+}

test/wdio/scoped-slot-connectedcallback/cmp-middle.tsx

@@ -0,0 +1,15 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'scoped-slot-connectedcallback-middle',
+  shadow: false,
+})
+export class ScopedSlotConnectedCallbackMiddle {
+  render() {
+    return (
+      <scoped-slot-connectedcallback-child>
+        <span id="slotted-content">Slotted Content</span>
+      </scoped-slot-connectedcallback-child>
+    );
+  }
+}

test/wdio/scoped-slot-connectedcallback/cmp-parent.tsx

@@ -0,0 +1,11 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'scoped-slot-connectedcallback-parent',
+  shadow: false,
+})
+export class ScopedSlotConnectedCallbackParent {
+  render() {
+    return <scoped-slot-connectedcallback-middle />;
+  }
+}

test/wdio/scoped-slot-connectedcallback/cmp.test.tsx

@@ -0,0 +1,81 @@
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+import { $, browser, expect } from '@wdio/globals';
+
+import { setupIFrameTest } from '../util.js';
+
+describe('scoped-slot-connectedcallback', function () {
+  describe('lazy load (dist output)', () => {
+    beforeEach(() => {
+      render({
+        components: [],
+        template: () => <scoped-slot-connectedcallback-parent />,
+      });
+    });
+
+    it('should have slotted content available in connectedCallback', async () => {
+      await $('scoped-slot-connectedcallback-child').waitForExist();
+
+      const child = await $('scoped-slot-connectedcallback-child');
+      const connectedAttr = await child.getAttribute('data-connected-slot-available');
+      const willLoadAttr = await child.getAttribute('data-willload-slot-available');
+
+      // Both connectedCallback and componentWillLoad should have access to slotted content
+      expect(connectedAttr).toBe('true');
+      expect(willLoadAttr).toBe('true');
+    });
+
+    it('should render slotted content correctly', async () => {
+      await $('scoped-slot-connectedcallback-child').waitForExist();
+
+      const slottedContent = await $('#slotted-content');
+      await expect(slottedContent).toBeExisting();
+      await expect(slottedContent).toHaveText('Slotted Content');
+
+      const wrapper = await $('.wrapper');
+      const text = await wrapper.getText();
+      expect(text).toContain('Before slot');
+      expect(text).toContain('Slotted Content');
+      expect(text).toContain('After slot');
+    });
+  });
+
+  describe('dist-custom-elements output', () => {
+    let doc: Document;
+
+    beforeEach(async () => {
+      await setupIFrameTest('/scoped-slot-connectedcallback/custom-element.html', 'custom-elements-iframe');
+      const frameEle: HTMLIFrameElement = document.querySelector('iframe#custom-elements-iframe');
+      doc = frameEle.contentDocument;
+
+      // Render the component inside the iframe
+      const parent = doc.createElement('scoped-slot-connectedcallback-parent');
+      doc.body.appendChild(parent);
+
+      // Wait for component to be ready
+      await browser.waitUntil(() => Boolean(doc.querySelector('scoped-slot-connectedcallback-child')));
+    });
+
+    it('should have slotted content available in connectedCallback', async () => {
+      const child = doc.querySelector('scoped-slot-connectedcallback-child');
+      const connectedAttr = child.getAttribute('data-connected-slot-available');
+      const willLoadAttr = child.getAttribute('data-willload-slot-available');
+
+      // Both connectedCallback and componentWillLoad should have access to slotted content
+      expect(connectedAttr).toBe('true');
+      expect(willLoadAttr).toBe('true');
+    });
+
+    it('should render slotted content correctly', async () => {
+      const slottedContent = doc.querySelector('#slotted-content');
+      expect(slottedContent).toBeTruthy();
+      expect(slottedContent.textContent).toBe('Slotted Content');
+
+      const wrapper = doc.querySelector('.wrapper');
+      const text = wrapper.textContent;
+      expect(text).toContain('Before slot');
+      expect(text).toContain('Slotted Content');
+      expect(text).toContain('After slot');
+    });
+  });
+});

test/wdio/scoped-slot-connectedcallback/custom-element.html

@@ -0,0 +1,17 @@
+<html>
+<head>
+  <title>Scoped Slot ConnectedCallback - dist-custom-elements output</title>
+  <script type="module">
+    import { defineCustomElement as childDefine } from '/test-components/scoped-slot-connectedcallback-child.js';
+    import { defineCustomElement as middleDefine } from '/test-components/scoped-slot-connectedcallback-middle.js';
+    import { defineCustomElement as parentDefine } from '/test-components/scoped-slot-connectedcallback-parent.js';
+
+    childDefine();
+    middleDefine();
+    parentDefine();
+  </script>
+</head>
+<body>
+
+</body>
+</html>