fix: resuming nested container in shadow root

Varixo · Varixo · commit bedec7c895c4 · 2025-09-10T20:29:14.000+02:00
diff --git a/.changeset/ten-emus-jog.md b/.changeset/ten-emus-jog.md
@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: resuming nested container in shadow root
diff --git a/packages/docs/src/routes/playground/parser/html/index.tsx b/packages/docs/src/routes/playground/parser/html/index.tsx
@@ -46,7 +46,7 @@ export default component$(() => {
 
       // Try to get Qwik container if available
       try {
-        const container = _getDomContainer(doc.documentElement);
+        const container = _getDomContainer(doc.body.firstElementChild!);
         if (container) {
           output += '// Qwik Container Found:\n';
           output += `- Container Type: ${container.qContainer}\n`;
diff --git a/packages/qwik/src/core/client/process-vnode-data.ts b/packages/qwik/src/core/client/process-vnode-data.ts
@@ -295,14 +295,15 @@ export function processVNodeData(document: Document) {
         const shadowRootContainer = node as Element | null;
         const shadowRoot = shadowRootContainer?.shadowRoot;
         if (shadowRoot) {
+          const firstShadowRootChild = firstChild(shadowRoot)!;
           walkContainer(
             // we need to create a new walker for the shadow root
             document.createTreeWalker(
-              shadowRoot,
+              firstShadowRootChild,
               0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */
             ),
             null,
-            firstChild(shadowRoot),
+            firstShadowRootChild,
             null,
             '',
             null!,
diff --git a/packages/qwik/src/core/client/process-vnode-data.unit.tsx b/packages/qwik/src/core/client/process-vnode-data.unit.tsx
@@ -1,14 +1,46 @@
 import { describe, expect, it } from 'vitest';
-import { createDocument } from '../../testing/document';
+import { createDocument, mockAttachShadow } from '../../testing/document';
 import '../../testing/vdom-diff.unit-util';
 import { VNodeDataSeparator } from '../shared/vnode-data-types';
 import { getDomContainer } from './dom-container';
 import { processVNodeData } from './process-vnode-data';
 import type { ClientContainer } from './types';
 import { QContainerValue } from '../shared/types';
 import { QContainerAttr } from '../shared/utils/markers';
+import { vnode_getFirstChild } from './vnode';
+import { Fragment } from '@qwik.dev/core';
 
 describe('processVnodeData', () => {
+  it('should process shadow root container', () => {
+    const [, container] = process(`
+      <html q:container="paused">
+        <head :></head>
+        <body :>
+          <div q:shadowRoot>
+            <template>
+              <div q:container="paused">
+                <button>
+                  0
+                </button>
+                <script type="qwik/vnode">
+                  ~{1}!~
+                </script>
+              </div>
+            </template>
+          </div>
+        </body>
+      </html>
+    `);
+    vnode_getFirstChild(container.rootVNode);
+    expect(container.rootVNode).toMatchVDOM(
+      <div {...qContainerPaused}>
+        <Fragment>
+          <button>0</button>
+        </Fragment>
+      </div>
+    );
+  });
+
   it('should parse simple case', () => {
     const [container] = process(`
       <html q:container="paused">
@@ -186,10 +218,35 @@ function process(html: string): ClientContainer[] {
   html = html.replace(/\n\s*/g, '');
   // console.log(html);
   const document = createDocument({ html });
+  const templates = Array.from(document.querySelectorAll('template'));
+  for (const template of templates) {
+    const parent = template.parentElement!;
+    if (parent.hasAttribute('q:shadowroot')) {
+      const content = (template as any).content;
+      mockAttachShadow(parent);
+      const shadowRoot = (parent as any).attachShadow({ mode: 'open' });
+      shadowRoot.append(content);
+      template.remove();
+    }
+  }
   processVNodeData(document);
-  return Array.from(document.querySelectorAll('[q\\:container="paused"]')).map(getDomContainer);
+
+  const containers: Element[] = [];
+  findContainers(document, containers);
+
+  return containers.map(getDomContainer);
 }
 
+const findContainers = (element: Document | ShadowRoot, containers: Element[]) => {
+  Array.from(element.querySelectorAll('[q\\:container]')).forEach((container) => {
+    containers.push(container);
+  });
+  element.querySelectorAll('[q\\:shadowroot]').forEach((parent) => {
+    const shadowRoot = parent.shadowRoot;
+    shadowRoot && findContainers(shadowRoot, containers);
+  });
+};
+
 function encodeVNode(data: Record<number, string> = {}) {
   const keys = Object.keys(data)
     .map((key) => parseInt(key, 10))
diff --git a/packages/qwik/src/testing/document.ts b/packages/qwik/src/testing/document.ts
@@ -1,7 +1,23 @@
 import type { MockDocumentOptions, MockWindow } from './types';
 import qwikDom from '@qwik.dev/dom';
 import { normalizeUrl } from './util';
+const domino = qwikDom as any;
 
+export function mockAttachShadow(el: Element) {
+  if (typeof (el as any).attachShadow !== 'function') {
+    (el as any).attachShadow = function (opts: any) {
+      const sr = new MockShadowRoot(el);
+      (el as any).shadowRoot = sr;
+      return sr;
+    };
+  }
+  if (typeof (el as any).hasAttribute !== 'function') {
+    (el as any).hasAttribute = function (attr: string) {
+      return el.getAttribute(attr) !== null;
+    };
+  }
+  return el;
+}
 /**
  * Create emulated `Document` for server environment. Does not implement the full browser `document`
  * and `window` API. This api may be removed in the future.
@@ -75,3 +91,27 @@ export function ensureGlobals(doc: any, opts?: MockDocumentOptions) {
 const noop = () => {};
 
 const QWIK_DOC = Symbol();
+
+class MockShadowRoot extends domino.impl.DocumentFragment {
+  nodeType = 11; // DOCUMENT_FRAGMENT_NODE
+  host: Element;
+
+  constructor(host: Element) {
+    super();
+    this.host = host;
+    this.ownerDocument = host.ownerDocument;
+  }
+
+  append(...nodes: any[]) {
+    for (const node of nodes) {
+      if (node.nodeType === 11) {
+        // document fragment
+        for (const child of Array.from(node.childNodes)) {
+          this.appendChild(child as any);
+        }
+      } else {
+        this.appendChild(node);
+      }
+    }
+  }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@qwik.dev/core': patch
 +---
++
 +fix: resuming nested container in shadow root