Headless UI shadow DOM support for Preact

preact.ts

const containerRef = useRef<HTMLDivElement | null>(null);

useEffect(() => {
    if (!containerRef.current) return;

    const observer = new MutationObserver((records) => {
      const record = records.filter((record) => {
        const el = record.target as HTMLDivElement;
        return el.id === 'headlessui-portal-root';
      }).pop();
      if (!record) return;
      containerRef.current?.append(record.target);
      if (containerRef.current) {
        console.log(containerRef.current, 'containerRef.current')
        containerRef.current.removeAttribute('inert');
        containerRef.current.removeAttribute('aria-hidden');
        containerRef.current.inert = false;
      }
    });

    observer.observe(document, { childList: true, subtree: true });

    return () => {
      console.log('unmount')
      observer.disconnect();
    };
  }, []);