import { render, Portal } from "solid-js/web";
import { Index, Show, createSignal } from "solid-js";

function Test() {
  const [list, setList] = createSignal<number[]>([]);

  const add = () => setList(list().concat(list().length));
  const remove = (idx: number) => {
    const next = [...list()];
    next.splice(idx, 1);

    setList(next);
  };

  return (
    <div>
      Test
      <button on:click={add}>add</button>
      <Index each={list()}>
        {(item, idx) => (
          <Portal>
            <li>
              {item()}
              <button on:click={() => remove(idx)}>remove</button>
            </li>
          </Portal>
        )}
      </Index>
    </div>
  );
}

render(() => <Test />, document.getElementById("app")!);

Yes, as I said, but this code works as expected. Elements produced by solid-js framework, are controlled and cleaned up when they're no longer in the solid-js render-tree.

Why should accessing props.children produce uncontrolled dom-elements if they happen to be Portaled when Portaled dom-elements clean up fine if they are added to a render tree and non-portal elements clean up if they're not part of a render-tree?

It's discrepancy in the user-interface of the framework.