How to use shadow dom to isolate CSS of React component https://twitter.com/JLarky/status/1657989891526123520

IsolateCSS.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>;
}

old_with_useEffect.tsx

export function IsolateCSS(props: { children: React.ReactNode }) {
	const containerRef = useRef<HTMLDivElement>(null);
	const onceRef = useRef(false);
	const [shadowRoot, setShadowRoot] = useState<ShadowRoot>();

	useEffect(() => {
		const container = containerRef.current;
		if (container && onceRef.current === false) {
			onceRef.current = true;
			setShadowRoot(container.attachShadow({ mode: 'open' }));
		}
	}, []);

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