isolate.tsx

export function IsolateCSS(props: { children: React.ReactNode }) {
	const onceRef = useRef(false);
	const [shadowRoot, setShadowRoot] = useState<ShadowRoot>();
	const ref = useCallback((ref: HTMLDivElement | null) => {
		if (ref && onceRef.current === false) {
			onceRef.current = true;
			setShadowRoot(ref.attachShadow({ mode: 'open' }));
		}
	}, []);

	return <div ref={ref}>{shadowRoot && createPortal(props.children, shadowRoot)}</div>;
}