Component Children (Slots)

Just like React, you can nest content inside a component. PulsePoint guarantees Scope Isolation, meaning data passed from a Parent remains connected to the Parent, even when rendered inside a Child.

Predictable Scope & Variable Shadowing

In PulsePoint, a Child component can use a variable named count, and the Parent can also use a variable named count.

They will never interfere with each other. The <!-- pp-scope --> marker acts as a boundary, telling the engine exactly which memory space to read from.

ScopeTest.html 
<!-- 1. PARENT CONTEXT -->
<div pp-component="scope-test">
    
    <!-- 2. INJECTED CHILDREN (Parent Scope) -->
    <!-- pp-scope:app -->
    <div class="p-4 border border-blue-500/30 rounded mb-4">
        <p class="text-blue-400">Parent Count: {count}</p>
        
        <!-- This updates the PARENT's count -->
        <button onclick="setCount(count + 1)">
            Update Parent
        </button>
    </div>
    <!-- /pp-scope -->

    <!-- 3. COMPONENT LOCAL CONTENT (Child Scope) -->
    <div class="p-4 border border-green-500/30 rounded">
        <p class="text-green-400">Child Count: {count}</p>
        
        <!-- This updates the CHILD's count -->
        <button onclick="setCount(count + 1)">
            Update Child
        </button>
    </div>

    <!-- Child State -->
    <script type="text/pp">
        const [count, setCount] = pp.state(0);
    </script>
</div>

<!-- Parent State -->
<script type="text/pp">
    const [count, setCount] = pp.state(100);
</script>
SCOPE: APP (PARENT)
var count = 100;

The content inside <!-- pp-scope:app --> ignores the component it is sitting in and talks directly to the parent.

SCOPE: SCOPE-TEST (CHILD)
var count = 0;

The component's own HTML (outside the marker) talks to its internal state.

Backend Note: If you are building a backend compiler, you must ensure that when you "slot" content into a component, you wrap that content in the pp-scope comment referencing the ID of the scope where the content was defined, not where it is rendered.
Component Props Next: Context Management