Qwik City layouts can define multiple named <Slot name="..." /> areas, but pages exported as component$ create an opaque component boundary — the router passes the page as a single child, so q:slot attributes inside its rendered output are invisible to the layout's slot system.

The fix is to export the page as an inline component (plain function). Qwik's flatVirtualChildren/splitProjectedChildren (in render-ssr.ts) calls plain functions directly and flattens their JSX, making q:slot attributes visible to the parent layout.

Changes

• packages/docs/src/routes/docs/(qwikcity)/layout/index.mdx — adds a new "Named Slots in Layouts" section covering:
  • Why component$ pages can't target layout named slots (Virtual node boundary)
  • The inline component workaround with a complete layout + page example
  • How to layer component$ children inside the inline default export for pages that need hooks (useSignal, useStore, etc.)
  • The nested layouts constraint: intermediate layouts must also be inline components rendering {children} top-level inside a fragment (not wrapped in any HTML element), so q:slot attributes propagate all the way up to the outer layout's slot system
  • What breaks propagation (wrapping {children} in an HTML element stops flattening) and the component$ + <Slot /> alternative when a wrapper element is genuinely needed

Pattern

// layout.tsx — named slots defined normally
export default component$(() => (
  <div>
    <Slot name="breadcrumb" />
    <main><Slot /></main>
    <aside><Slot name="sidebar" /></aside>
  </div>
));

// products/layout.tsx — intermediate layout must be inline, {children} top-level in a fragment
export default ({ children }: any) => (
  <>
    <nav q:slot="breadcrumb"><a href="/">Home</a> / Products</nav>
    {children} {/* top-level — q:slot attributes inside are still visible to outer layout */}
  </>
);

// products/index.tsx — plain function default export; Qwik inlines its output
//                      so q:slot attributes reach the outer layout's slot system
export default () => (
  <>
    <aside q:slot="sidebar"><p>Category filters</p></aside>
    <div><h1>All Products</h1></div>   {/* → default <Slot /> */}
  </>
);

For reactive pages, wrap stateful parts in a component$ rendered inside the inline shell — hooks are unavailable in inline components directly.