Skip to content

Instantly share code, notes, and snippets.

View emm7494's full-sized avatar
💭
...

Emmanuel Adu Gyamfi emm7494

💭
...
  • Despair Technologies Inc.
  • Ghana
  • 13:37 (UTC)
  • X @emm7494
View GitHub Profile
@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' }));
}
}, []);