bug: @stencil/ssr Next.js strategy wraps components in display:contents div, breaking named slot assignment #858

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Framework Output Target

SSR (@stencil/ssr)

Output Target Version

@stencil/ssr 0.4.0 (with @stencil/react-output-target 1.6.4)

Stencil Version

4.45.2

Reproduction URL

https://github.com/ianliangglobalpay/stencil-ssr-next

Based on the Next.js starter linked from the issue template (the CodeSandbox link no longer opens GitHub repositories). Next.js 15.5.9, React 19.2.3, Node 22.

Describe the Bug

With @stencil/ssr/next (strategy nextjs), every Stencil component rendered from React is wrapped in <div style="display: contents">. The consumer's slot prop is spread onto the inner custom element, not onto the wrapper. Slot assignment only considers direct children of the host, so a Stencil component placed in another Stencil component's named slot is assigned to the default slot via its wrapper, and the named slot stays empty.

• Plain HTML elements are not wrapped, so they are assigned correctly.
• The wrapper is emitted by both the server branch and the typeof window !== 'undefined' branch, so the layout is wrong at first paint and is never corrected by hydration.
• It repeats at every nesting level.

Steps to Reproduce

1. pnpm install && pnpm start
2. Open http://localhost:3000/slots (Compiler, @stencil/ssr/next) and http://localhost:3000/slots-runtime (control: same markup, imported from the /next Runtime entry).
3. Both pages render:

   <ExampleCard>
     <ExampleInput slot="start" placeholder="component in start slot">
       <span slot="label">nested label slot</span>
     </ExampleInput>
     <span slot="start">markup in start slot</span>
     <p>default slot content</p>
   </ExampleCard>

   example-card has <slot name="start"> and a default <slot>.
4. In the console:

   const sr = document.querySelector('example-card').shadowRoot;
   const show = (s) => s.assignedNodes().filter((n) => n.nodeType === 1).map((n) => n.tagName.toLowerCase());
   ({ start: show(sr.querySelector('slot[name="start"]')), default: show(sr.querySelector('slot:not([name])')) });

The same result is in the first-paint HTML (curl http://localhost:3000/slots): <example-input slot="start"> is inside <div style="display:contents">.

Expected Behavior

<example-input slot="start"> is assigned to the start slot, as it is with the Runtime path on Next.js and with strategy: 'react' on Vite.

Additional Context

• The wrapper comes from the nextjs branch of the transform in @stencil/ssr (dist/transform-*.js), which returns <div style={{ display: 'contents' }}> around the component in both the client and server branches and puts {...props} on the inner element.
• Forcing strategy: 'react' on Next removes the wrapper and fixes first paint, but the client then throws Hydration failed and the custom elements never upgrade, so it is not a workaround.
• Possible fix: move slot from the props onto the wrapper div (and omit it from the inner element).
• Likely the concrete form of the documented Compiler caveat about injected elements breaking slot structure, except the injected element is a div.