[Hacky Slots] Wish this was implemented elegantly by PV!

[jikkuatwork]

I just found a very hacky way to do slots. CodePen

<script type="module">
import { createApp } from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'

const Shell = ({ title = 'Shell v0.1' } = {}) => {
  const child = document.querySelector("#slot-content")
  
  return {
    title,
    child,
    $template: /* HTML */ `
      <div class="p-2 rounded-lg bg-white s">
        <div class="px-2 py-1 rounded bg-gray-200 text-sm">{{ title }}</div>
        <div class="p-2">
          <slot></slot>
        </div>
      </div>
    `
  }
}

createApp({
  Shell,
}).mount("#app")
</script>

<div class="page bg-gray-300 c">
  <div class="w-full min-h-screen max-w-3xl bg-gray-300 c flex-col">   
    <div id="app" class="flex flex-col gap-2">
      <div v-scope="Shell()" v-effect="$el.querySelector('slot').appendChild(child)">
        <div id="slot-content" class="bg-black p-1 text-xs text-white rounded font-mono s pt-2 px-2 text-green-400">$ ./hello-world</div>
      </div>
    </div>
  </div>
</div>

[jikkuatwork]

I wish this was possible:

<div v-scope="Shell({ title: "Petite Vue 1.0" })">
  <div v-scope="App({ url: "https://please-evan-please.com" })"></div>
</div>