test: add case 6 — FACE with slot + delegatesFocus

Covers the pattern used by components like ui-select: shadow DOM with
delegatesFocus, a focusable input inside the shadow root, and slotted
light DOM children that must be patched while the host has focus.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: carlosescri

test/e2e/support/issues/issue_4323.ex

@@ -42,6 +42,18 @@ defmodule Phoenix.LiveViewTest.E2E.Issue4323Live do
           // Case 5: Non-FACE custom element
           class NonFaceEl extends HTMLElement {}
           customElements.define("non-face-el", NonFaceEl);
+
+          // Case 6: FACE with shadow DOM + slot + delegatesFocus
+          class FaceSlottedDelegates extends HTMLElement {
+            static formAssociated = true;
+            constructor() {
+              super();
+              this.attachInternals();
+              this.attachShadow({ mode: "open", delegatesFocus: true });
+              this.shadowRoot.innerHTML = '<input type="text" /><div><slot></slot></div>';
+            }
+          }
+          customElements.define("face-slotted-delegates", FaceSlottedDelegates);
         </script>
         """
       end)
@@ -87,6 +99,12 @@ defmodule Phoenix.LiveViewTest.E2E.Issue4323Live do
         <span id="case5-child">count:{@counter}</span>
       </non-face-el>
 
+      <%!-- Case 6: FACE with slot + delegatesFocus --%>
+      <face-slotted-delegates id="case6">
+        <input id="case6-input" type="text" name="case6_input" />
+        <span id="case6-child">count:{@counter}</span>
+      </face-slotted-delegates>
+
       <button id="inc-btn" type="button" phx-click="inc">Increment</button>
     </form>
     """

test/e2e/tests/issues/4323.spec.js

@@ -84,6 +84,23 @@ test.describe("FACE children patching", () => {
     await expect(page.locator("#case4-child")).toHaveText("count:1");
   });
 
+  test("FACE with slot + delegatesFocus: slotted children are patched", async ({
+    page,
+  }) => {
+    await expect(page.locator("#case6-child")).toHaveText("count:0");
+
+    // Click the FACE host; delegatesFocus sends focus to the shadow input,
+    // but document.activeElement returns the shadow host
+    await page.locator("#case6").click();
+    const activeId = await page.evaluate(() => document.activeElement?.id);
+    expect(activeId).toBe("case6");
+
+    await incrementCounter(page);
+
+    // Slotted light DOM children should be patched (FACE branch descends)
+    await expect(page.locator("#case6-child")).toHaveText("count:1");
+  });
+
   test("non-FACE custom element: children are patched normally", async ({
     page,
   }) => {