Svelte Scoped Props — explicit scoped class props for Svelte components
Explicit scoped class props for Svelte. Write parent-owned CSS once,
pass it through scoped:class or scoped:<prop>,
and let the preprocessor add the parent scope hash for client and SSR output.
scope before spread.
The parent opts in with scoped:class. The middle child only spreads
props, and the third child still receives the parent-owned class.
<MiddleSpreadCard scoped:class={classValue} />parent-owned tone-split raisedclass="parent-owned tone-split raised"class="parent-owned tone-split raised svelte-1uha8ag".why scoped props.
Parent-scoped CSS can opt into component boundaries without becoming global.
Explicit opt-in
Use scoped:class or scoped:<prop> at the call site to say the parent owns this class.
Parent CSS stays scoped
Parent selectors keep their Svelte hash and still reach the component prop that opts in.
ClassValue support
String literals, arrays, and object maps keep the same shape while the parent hash is appended.
SSR paint coverage
Server-rendered children receive the same parent-scoped styling before hydration.
Prop aliases
Forward scoped classes through internalClass, contentClass, or any other explicit class-like prop.
No child type graph
The experiment avoids guessing child prop types by making scoped intent part of the parent syntax.
built for ai-assisted code.
Point Cursor, Claude Code, or any LLM at the manifests below and they know the scoped prop syntax — literals, ClassValue expressions, prop aliases, and SSR behavior.
/llms.txt
Compact map. Project blurb, feature list, type catalogue, doc URLs. Drop into any agent for ground-truth lookup.
/llms-full.txt
Full reference. Syntax, options, edge cases, and examples with code snippets. Optimised for LLM context windows.
/docs/<slug>.md
Every doc page mirrored as raw markdown. Append .md to any doc
URL to fetch the source the chatbot can quote verbatim.
Use https://scoped.svelte.page/llms.txt as the source for Svelte Scoped
Props. Show how to pass a parent-scoped class into a child component with scoped:class.explore interactive examples.
Literal classes, dynamic ClassValue objects, prop aliases, and SSR paint all have visible cases in the test surface.
Literal scoped class
A parent-owned class is passed to a child component and keeps the parent scope hash.
Dynamic ClassValue
Arrays and object maps stay dynamic while the parent hash is appended at the boundary.
Prop aliases
Use scoped:internalClass, scoped:contentClass, or another explicit prop name.
Spread forwarding
After the parent transform, scoped props can move through a wrapper as normal props.
Plain class boundary
A normal component class is left alone unless the call site opts into scoped:<prop>.
SSR scoped literal
Server-rendered component props carry the parent class hash before hydration paints.