const A = component$(() => {
    return $(() => {
      <B>
        <div>
          <button onclick/>
        </div>
      </B>
    })
})

const B = component$(() => {
    return $(() => (
      <span><Slot></Slot></span>
    ));
})

<A>
  <B>
    <button/>
  </B>
</A>

<a q:host>
  <b q:host>
    <span>
      <q:slot>
        <div>
          <button/>
        </div>
      </q:slot>
    </span>
  </b>
</a>

while(isSlot(element)) {
  element = element.closest('q:slot,[q:host]');
}

---

const Parent = component$(() => {
    return $(() => (
      <span>before<Slot>default</Slot>after</span>
    ));
})

const App = component$(() => {
    return $(() => (
      <Parent>{text}</Parent>
    ));
})

<parent>
  <span q:slot>
    before
    <!--q:slot-->text<!--/q:slot-->
    after
  </span>
</parent>

---

const App = component$(() => {
    return $(() => (
      <SomeAPI whileLoading={<span>loading...</span>}
              onTimeout>
        <Parent>{text}</Parent>
      </SomeAPI>
    ));
})