Rocket Projection Pro

Rocket is currently in alpha – available with Datastar Pro.

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>
 2  <script>
 3    $$clicks = Number.isFinite(+$$clicks) ? +$$clicks : 0
 4  </script>
 5</template>
 6
 7<template data-rocket:rocket-slot-counter data-shadow-open>
 8  <script>
 9    $$clicks = Number.isFinite(+$$clicks) ? +$$clicks : 0
10  </script>
11  </style>
12  <div class="callout success">
13    <slot></slot>
14  </div>
15</template>