feat(moc-doc): serialize delegatesFocus shadow DOM property (#6333)

Co-authored-by: Mickey Pesic <[email protected]>

Author: mpesic

src/mock-doc/node.ts

@@ -272,6 +272,7 @@ export class MockElement extends MockNode {
 
   attachShadow(_opts: ShadowRootInit) {
     const shadowRoot = this.ownerDocument.createDocumentFragment();
+    shadowRoot.delegatesFocus = _opts.delegatesFocus ?? false;
     this.shadowRoot = shadowRoot;
     return shadowRoot;
   }

src/mock-doc/serialize-node.ts

@@ -142,6 +142,12 @@ function* streamToHtml(
         const mode = ` shadowrootmode="open"`;
         yield mode;
         output.currentLineWidth += mode.length;
+
+        if ((node as any).delegatesFocus) {
+          const delegatesFocusAttr = ' shadowrootdelegatesfocus';
+          yield delegatesFocusAttr;
+          output.currentLineWidth += delegatesFocusAttr.length;
+        }
       }
 
       const attrsLength = (node as HTMLElement).attributes.length;

src/mock-doc/test/serialize-node.spec.ts

@@ -153,6 +153,18 @@ describe('serializeNodeToHtml', () => {
     `);
   });
 
+  it('shadow root to template with focus delegation', () => {
+    const elm = doc.createElement('cmp-a');
+    expect(elm.shadowRoot).toEqual(null);
+
+    const shadowRoot = elm.attachShadow({ mode: 'open', delegatesFocus: true });
+    expect(shadowRoot.nodeType).toEqual(11);
+    expect(elm.shadowRoot.nodeType).toEqual(11);
+
+    expect(shadowRoot.host).toEqual(elm);
+    expect(elm.outerHTML).toContain('<template shadowrootmode="open" shadowrootdelegatesfocus');
+  });
+
   it('style', () => {
     const input = `<style>     \n    text   \n\n</style>`;
     doc.body.innerHTML = input;

test/end-to-end/src/components.d.ts

@@ -44,6 +44,8 @@ export namespace Components {
          */
         "initialCounter": number;
     }
+    interface CmpDsdFocus {
+    }
     interface CmpServerVsClient {
     }
     interface CmpWithSlot {
@@ -319,6 +321,12 @@ declare global {
         prototype: HTMLCmpDsdElement;
         new (): HTMLCmpDsdElement;
     };
+    interface HTMLCmpDsdFocusElement extends Components.CmpDsdFocus, HTMLStencilElement {
+    }
+    var HTMLCmpDsdFocusElement: {
+        prototype: HTMLCmpDsdFocusElement;
+        new (): HTMLCmpDsdFocusElement;
+    };
     interface HTMLCmpServerVsClientElement extends Components.CmpServerVsClient, HTMLStencilElement {
     }
     var HTMLCmpServerVsClientElement: {
@@ -573,6 +581,7 @@ declare global {
         "cmp-b": HTMLCmpBElement;
         "cmp-c": HTMLCmpCElement;
         "cmp-dsd": HTMLCmpDsdElement;
+        "cmp-dsd-focus": HTMLCmpDsdFocusElement;
         "cmp-server-vs-client": HTMLCmpServerVsClientElement;
         "cmp-with-slot": HTMLCmpWithSlotElement;
         "dom-api": HTMLDomApiElement;
@@ -650,6 +659,8 @@ declare namespace LocalJSX {
          */
         "initialCounter"?: number;
     }
+    interface CmpDsdFocus {
+    }
     interface CmpServerVsClient {
     }
     interface CmpWithSlot {
@@ -805,6 +816,7 @@ declare namespace LocalJSX {
         "cmp-b": CmpB;
         "cmp-c": CmpC;
         "cmp-dsd": CmpDsd;
+        "cmp-dsd-focus": CmpDsdFocus;
         "cmp-server-vs-client": CmpServerVsClient;
         "cmp-with-slot": CmpWithSlot;
         "dom-api": DomApi;
@@ -863,6 +875,7 @@ declare module "@stencil/core" {
             "cmp-b": LocalJSX.CmpB & JSXBase.HTMLAttributes<HTMLCmpBElement>;
             "cmp-c": LocalJSX.CmpC & JSXBase.HTMLAttributes<HTMLCmpCElement>;
             "cmp-dsd": LocalJSX.CmpDsd & JSXBase.HTMLAttributes<HTMLCmpDsdElement>;
+            "cmp-dsd-focus": LocalJSX.CmpDsdFocus & JSXBase.HTMLAttributes<HTMLCmpDsdFocusElement>;
             "cmp-server-vs-client": LocalJSX.CmpServerVsClient & JSXBase.HTMLAttributes<HTMLCmpServerVsClientElement>;
             "cmp-with-slot": LocalJSX.CmpWithSlot & JSXBase.HTMLAttributes<HTMLCmpWithSlotElement>;
             "dom-api": LocalJSX.DomApi & JSXBase.HTMLAttributes<HTMLDomApiElement>;

test/end-to-end/src/declarative-shadow-dom/__snapshots__/test.e2e.ts.snap

@@ -54,6 +54,8 @@ exports[`renderToString can render nested components 1`] = `
 </another-car-list>"
 `;
 
+exports[`renderToString renders server-side components with delegated focus 1`] = `"<cmp-dsd-focus class=\\"sc-cmp-dsd-focus-h\\" custom-hydrate-flag=\\"\\" s-id=\\"32\\"><template shadowrootmode=\\"open\\" shadowrootdelegatesfocus><div class=\\"sc-cmp-dsd-focus\\" c-id=\\"32.0.0.0\\"><!--t.32.1.1.0-->Clickable shadow DOM text</div><button class=\\"sc-cmp-dsd-focus\\" c-id=\\"32.2.0.1\\"><!--t.32.3.1.0-->Click me!</button></template><!--r.32--></cmp-dsd-focus>"`;
+
 exports[`renderToString supports passing props to components 1`] = `
 "<another-car-detail car=\\"{&quot;year&quot;:2024, &quot;make&quot;: &quot;VW&quot;, &quot;model&quot;: &quot;Vento&quot;}\\" class=\\"sc-another-car-detail-h\\" custom-hydrate-flag=\\"\\" s-id=\\"2\\">
   <template shadowrootmode=\\"open\\">

test/end-to-end/src/declarative-shadow-dom/cmp-dsd-focus.tsx

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'cmp-dsd-focus',
+  shadow: { delegatesFocus: true },
+})
+export class ComponentDSDWithFocusDelegation {
+  render() {
+    return (
+      <Host>
+        <div>Clickable shadow DOM text</div>
+        <button>Click me!</button>
+      </Host>
+    );
+  }
+}

test/end-to-end/src/declarative-shadow-dom/test.e2e.ts

@@ -382,6 +382,22 @@ describe('renderToString', () => {
 </nested-cmp-parent>`);
   });
 
+  it('renders server-side components with delegated focus', async () => {
+    const { html } = await renderToString('<cmp-dsd-focus></cmp-dsd-focus>', {
+      serializeShadowRoot: true,
+      fullDocument: false,
+    });
+
+    expect(html).toContain('<template shadowrootmode="open" shadowrootdelegatesfocus>');
+    expect(html).toMatchSnapshot();
+
+    const page = await newE2EPage({ html, url: 'https://stencil.com' });
+    const div = await page.find('cmp-dsd-focus >>> div');
+    await div.click();
+
+    expect(await page.evaluate(() => document.activeElement.outerHTML)).toContain('cmp-dsd-focus');
+  });
+
   describe('hydrateDocument', () => {
     it('can hydrate components with open shadow dom by default', async () => {
       const template = `<another-car-detail></another-car-detail>`;