The intended summary is Demo review: 2, combining the parent heading and the child’s pending prop. The local contract preview decreases the count to zero, resets it to two, and shows the fallback when the parent fragment is omitted. Copyable Vue source explains the actual slot boundary; the preview does not compile Vue.
Work through the example
Select Decrease to change the local preview from two to one. Change Parent heading to Editorial queue and Apply heading: the child count stays one while the prefix changes. Select Fallback to see Pending: 1 without a parent summary fragment. The child’s private heading Child internal never becomes the prefix.
Inspect ownership before adjusting the presentation: the child changes pending and supplies that value through the summary outlet; the parent owns its heading. Only the declared slot prop crosses this boundary. Compile the two source components in your Vue environment and test initial state, zero clamping, fallback and parent-heading changes there; the local preview explains the contract rather than executing Vue.
Name who owns each value
| Value or binding | Owner | Intended use |
|---|---|---|
| pending, initially 2 | ReviewState child | Decrease/reset demonstration count |
| heading = Child internal | Child | Private internal value, not a supplied slot prop |
| heading = Demo review | Parent | Visible summary prefix |
| summary | Parent's summary-slot fragment | Local binding receiving the supplied pending prop |
Only pending crosses the slot-prop boundary. The child's private heading is deliberately the same variable name as the parent's heading so the review can catch an incorrect scope assumption.
Vue's slot guide explains parent lexical scope and child-provided slot props. The handoff is explicit; slot content does not automatically inherit every child variable. Vue's render scope and scoped slots.
For this fixture, the desired sentence combines two sources: parent heading plus child pending. The parent must not maintain a second count just to print it.
Prepare the child specification
<script setup>
import { ref } from 'vue'
const pending = ref(2)
const heading = 'Child internal'
function decrease() {
pending.value = Math.max(0, pending.value - 1)
}
function reset() {
pending.value = 2
}
</script>
<template>
<section>
<p>
<slot name="summary" :pending="pending">
Pending: {{ pending }}
</slot>
</p>
<button type="button" @click="decrease">Decrease</button>
<button type="button" @click="reset">Reset</button>
</section>
</template>
The summary outlet declares one prop: pending. Its fallback says “Pending: 2” initially when no summary fragment is supplied. The internal heading is not passed to the outlet or displayed by this child specification.
Prepare the parent's summary fragment
The parent specification imports the child and owns its heading:
<script setup>
import { ref } from 'vue'
import ReviewState from './ReviewState.vue'
const heading = ref('Demo review')
</script>
<template>
<ReviewState>
<template #summary="summary">
{{ heading }}: {{ summary.pending }}
</template>
</ReviewState>
<footer>Demonstration only</footer>
</template>
Here #summary selects the child's named summary outlet, while the directive value summary names the received object within that fragment. Its pending field is the supplied count. The two uses of “summary” serve different roles: outlet name and local binding.
The expected initial text is Demo review: 2. It is not “Child internal: 2.” The internal heading was never part of the supplied prop contract.
Do not expect summary.name to contain the outlet name. Vue treats the outlet's name as reserved, rather than as an ordinary supplied prop. This fixture supplies only pending.
Trace state and presentation independently
Use this expected-case ledger:
| Case | Authored action | Expected visible summary | Observed in Vue |
|---|---|---|---|
| V1 | Initial parent heading and child count | Demo review: 2 | |
| V2 | Decrease once | Demo review: 1 | |
| V3 | Decrease again | Demo review: 0 | |
| V4 | Decrease at zero | Demo review: 0 | |
| V5 | Reset | Demo review: 2 | |
| V6 | At count 1, revise parent heading to Practice review | Practice review: 1 |
Recreate this example
Build one self-contained responsive HTML example titled “Vue template tag: trace scoped-slot ownership” for readers completing the stated task. Return the complete HTML with embedded CSS and JavaScript. Use no remote fonts, libraries, images, requests, account connections, or saved-state claims.
Provide a scoped-slot contract preview, explicitly vanilla JavaScript rather than compiled Vue. Child pending starts at 2, decreases with a zero clamp and resets to 2. Parent heading starts Demo review and is editable with Apply heading; blank heading rejected. Summary view combines parent heading with pending; Fallback uses Pending: count. Child internal heading must never leak. Include complete child source with ref, named slot summary and :pending, decrease/reset buttons; parent uses template #summary="summary" and heading plus summary.pending. No duplicated parent count or remote dependency.
Use a component contract workbench with a local state preview and copyable Vue source design with a compact header. Keep the actual sample data, controls, and useful default result visible early on a 360px-wide screen. Use readable text at least 16px, generous paragraph spacing, strong contrast, semantic labels, visible keyboard focus, and wrapping source blocks. Stack records on narrow screens rather than forcing a wide table.
Wire each action to an explicit type=button click handler using element selectors; the host permits scripts but blocks form submission. Update the visible result when the described action occurs. Show specific error feedback for invalid or missing input and clear stale feedback after dependent inputs change. Use plain text when displaying user values.
The local contract preview does not compile Vue; verify copied components in the native Vue environment. Keep the source fixture and worked teacher or developer example distinct from actual user records. Include the domain-specific explanation and next check beside the result. Provide no fake download, send, deployment, approval, or persistence button. Everything operates locally for the current page session.
Review the prepared copy in NOS
Copy the components into the native Vue project and confirm the summary at counts two, one and zero. If a teammate wants a clearer scope explanation, NOS can render the HTML reading copy and allow eligible static notes to be revised visually. Keep compiled-component results with the source revision.