This issue was originally identified in voxpelli/voxpelli.github.com#32
Problem
The DomStack README has a "Nested layouts" section that documents the core layout composition pattern. However, the documentation does not cover several practical pitfalls that users encounter when composing layouts:
- What breaks when
scripts/styles are not forwarded — forgetting to forward them causes silent failure (pages render without CSS/JS bundles, no error)
- Modifying
vars before forwarding — the README example uses rest spread to forward everything, but doesn't show adding layout-specific flags
- Forwarding
page, pages, and workers — easy to forget when layouts need page introspection
- Layout-specific CSS/JS with nested layouts — must manually
@import / import parent layout assets
What's missing
1. Warning about the silent failure mode
If scripts and styles are not forwarded to the base layout, the page renders without CSS or JS bundles — no error message, the page simply appears unstyled:
// WRONG -- scripts and styles are silently lost
return rootLayout({ children: wrappedContent, vars });
// CORRECT -- scripts and styles are forwarded
return rootLayout({ children: wrappedContent, vars, scripts, styles });
2. Pattern for modifying vars before forwarding
const layoutVars = {
...vars,
author: true,
hfeed: true,
webmentionable: true,
};
return rootLayout({ children: wrappedContent, vars: layoutVars, scripts, styles });
3. Explicit param forwarding checklist
export default function articleLayout ({ children, vars, scripts, styles, page, pages, workers }) {
return rootLayout({
children: wrappedContent,
vars: layoutVars,
scripts, // Hash-busted CSS/JS paths — MUST forward
styles, // Hash-busted CSS/JS paths — MUST forward
page, // Forward if base layout uses page introspection
pages, // Forward if base layout uses page listing
workers, // Forward if base layout uses web workers
});
}
Proposed solution
Add a "Layout composition pitfalls" subsection to the existing "Nested layouts" documentation:
- A warning about the silent failure when
scripts/styles are not forwarded
- An example showing
vars modification before forwarding
- A quick-reference list of params that should be forwarded and why
This is a small addition to existing documentation, not a new section.
Key pitfall confirmed
The non-cascading styles/scripts is the primary pitfall. Users expect CSS from a parent layout to "just work" in child layouts, but DomStack requires explicit @import. This is the main documentation gap.
Problem
The DomStack README has a "Nested layouts" section that documents the core layout composition pattern. However, the documentation does not cover several practical pitfalls that users encounter when composing layouts:
scripts/stylesare not forwarded — forgetting to forward them causes silent failure (pages render without CSS/JS bundles, no error)varsbefore forwarding — the README example uses rest spread to forward everything, but doesn't show adding layout-specific flagspage,pages, andworkers— easy to forget when layouts need page introspection@import/importparent layout assetsWhat's missing
1. Warning about the silent failure mode
If
scriptsandstylesare not forwarded to the base layout, the page renders without CSS or JS bundles — no error message, the page simply appears unstyled:2. Pattern for modifying vars before forwarding
3. Explicit param forwarding checklist
Proposed solution
Add a "Layout composition pitfalls" subsection to the existing "Nested layouts" documentation:
scripts/stylesare not forwardedvarsmodification before forwardingThis is a small addition to existing documentation, not a new section.
Key pitfall confirmed
The non-cascading styles/scripts is the primary pitfall. Users expect CSS from a parent layout to "just work" in child layouts, but DomStack requires explicit
@import. This is the main documentation gap.