Slot as templates

import { useRef } from "atomico";
import { useSlot } from "@atomico/hooks/use-slot";

function component() {
  const refSlotIcon = useRef();
  const slotIcon = useSlot(refSlotIcon);
  return (
    <host shadowDom>
      <slot
        name="icon"
        ref={refSlotIcon}
        style={slotIcon.length ? null : "display: none"}
      />
      <slot />
    </host>
  );
}

import { useRef, useEffect } from "atomico";
import { useSlot } from "@atomico/hooks/use-slot";

function component() {
  const refSlotSlides = useRef();
  const slotSlides = useSlot(refSlotSlides);

  slotSlides.forEach((slide) => {
    slide.style.width = "100%";
    slide.style.height = "300px";
  });

  return (
    <host shadowDom>
      <slot name="slides" />
    </host>
  );
}

useSlot(refSlotSlides).filter(
  (childNode) => childNode instanceof HTMLDivElement
);

import { useRef, usePromise } from "atomico";
import { useSlot } from "@atomico/hooks/use-slot";

function userFetch() {
  const refSlotTemplateUser = useRef();
  const [Template] = useSlot(refSlotTemplateUser);
  const promise = usePromise(
    () =>
      fetch("https://jsonplaceholder.typicode.com/users").then((res) =>
        res.json()
      ),
    [],
    true
  );

  return (
    <host shadowDom>
      <slot name="template" ref={refSlotTemplateUser} />
      <div class="list">
        {promise.fulfilled
          ? !!Template &&
            promise.result.map((props) => <Template {...props} cloneNode />)
          : "Pending..."}
      </div>
    </host>
  );
}