Skip to content

Instantly share code, notes, and snippets.

@JLarky
JLarky / IsolateCSS.tsx
Last active July 10, 2023 09:23
How to use shadow dom to isolate CSS of React component https://twitter.com/JLarky/status/1657989891526123520
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' }));
}
}, []);