Rocket Projection Pro

Rocket is currently in alpha – available in the Datastar Pro repo.

A small demo showing how Rocket components can work with host-provided children in both light DOM and shadow DOM.

Light DOM host children get transformed so they can read/write $$ signals.
Shadow DOM slots get the same treatment; projected content can mutate component state.
Both components expose a shared, simple API: you pass children, Rocket handles scope.

Demo

CSS styling is applied to all elements, since this is a light DOM component.

CSS styling is applied to slotted content only, since this is a shadow DOM component.

Explanation #

The light DOM component appends children directly into the component. The shadow DOM version does the same for slotted content. Rocket rewrites their attributes so that $$ represents component scoped signals.

Usage Example #

 1<rocket-light-counter>
 2    <div class="callout success">
 3        <button
 4            data-on:click="$$clicks++"
 5            data-text="'Light clicks: ' + $$clicks"
 6        ></button>
 7    </div>
 8</rocket-light-counter>
 9
10<rocket-slot-counter>
11    <button
12        data-on:click="$$clicks++"
13        data-text="'Shadow clicks: ' + $$clicks"
14    ></button>
15</rocket-slot-counter>

Rocket Components #

 1<template data-rocket:rocket-light-counter data-prop:clicks="int (= 0)">
 2</template>
 3
 4<template
 5  data-rocket:rocket-slot-counter
 6  data-shadow-open
 7  data-prop:clicks="int (= 0)"
 8>
 9  <div class="callout success">
10    <slot></slot>
11  </div>
12</template>