<!-- Source: https://scoped.svelte.page/examples/plain-class-boundary -->

# Plain Class Boundary

> A boundary example showing why plain component class cannot become magical without changing Svelte semantics.

**Source:** [https://scoped.svelte.page/examples/plain-class-boundary](https://scoped.svelte.page/examples/plain-class-boundary)

**Markdown mirror:** [https://scoped.svelte.page/examples/plain-class-boundary.md](https://scoped.svelte.page/examples/plain-class-boundary.md)

---

This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.

## FIG-001: plain class boundary.

Plain `class` on a component is still just a prop. This example keeps the failure visible so the package does not pretend Svelte can infer intent from a normal prop name.

**Metadata:** tag: `BOUNDARY` | syntax: `class` | value: `string literal` | status: `blocked`

### Source

#### PlainClassBoundary.svelte

Source file: [src/lib/examples/scoped-props/demos/PlainClassBoundary.svelte](https://github.com/humanspeak/svelte-scoped-props/blob/main/docs/src/lib/examples/scoped-props/demos/PlainClassBoundary.svelte)

```svelte
<script lang="ts">
    import ChildCard from './components/ChildCard.svelte'
</script>

<article class="scoped-proof blocked dk-demo-shell">
    <span class="selector-anchor dimmed" hidden aria-hidden="true"></span>

    <div class="render-grid">
        <div class="render-example">
            <span class="example-label">Native element</span>
            <div class="demo-card">This div does not use the child-only class.</div>
        </div>
        <div class="render-example">
            <span class="example-label">Child-only class</span>
            <ChildCard class="dimmed" />
        </div>
    </div>

    <div class="example-grid">
        <div class="example-block">
            <span class="example-label">Source</span>
            <code>.dimmed &#123; opacity: 0.35; &#125;</code>
            <code>&lt;ChildCard class="dimmed" /&gt;</code>
        </div>
        <div class="example-block">
            <span class="example-label">Current result</span>
            <ul class="result-list">
                <li>
                    <span>Native element</span>
                    <code>no dimmed class</code>
                    <strong>baseline</strong>
                </li>
                <li class="missing">
                    <span>Child-only class</span>
                    <code>child-card dimmed svelte-child</code>
                    <strong>missing parent hash</strong>
                </li>
            </ul>
        </div>
    </div>
</article>

<style>
    .dimmed {
        opacity: 0.35;
    }
</style>
```

#### ChildCard.svelte

Source file: [src/lib/examples/scoped-props/demos/components/ChildCard.svelte](https://github.com/humanspeak/svelte-scoped-props/blob/main/docs/src/lib/examples/scoped-props/demos/components/ChildCard.svelte)

```svelte
<script lang="ts">
    import type { ClassValue } from '@humanspeak/svelte-scoped-props/runtime'
    import { describeClass } from './classValue'

    type Props = {
        class?: ClassValue
        'scoped:class'?: ClassValue
    }

    let { class: className }: Props = $props()
    let classText = $derived(describeClass(className))
</script>

<div class={['child-card', className]}>
    Child receives <code>class="{classText}"</code>.
</div>

<style>
    .child-card {
        min-height: 116px;
        display: grid;
        place-items: center;
        padding: 18px;
        border: 2px dashed var(--proof-card-border, gray);
        border-radius: 6px;
        color: var(--proof-card-ink, black);
        text-align: center;
        background: var(--proof-card-bg, white);
    }

    code {
        padding: 2px 5px;
        border-radius: 4px;
        overflow-wrap: anywhere;
        background: var(--proof-code-bg, #eef2f7);
        color: var(--proof-code-ink, #111111);
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.95em;
    }
</style>
```
