/
bearury
/
ui-kit-ce
Обзор
Документация
Войти
/
bearury
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/theme/examples/ShadowDOMProviderIsolation.tsx
57 строк
2 KB
Урядышев Павел Александрович
feat(theme): реализован новый провайдер для работы с Shadow DOM
01 сен 2025, 17:05
01 сен 2025, 17:05
aa1c3a8
Код
Авторство
О чём код?
import * as ReactDOM from 'react-dom' import * as React from 'react' import { Button, createTheme, createUseStyles, ShadowDOMProvider, ThemeProvider, } from '@v-uik/base' const themeBase = createTheme({ comp: { backwardCompatibilityMode: false, button: { colorBackgroundContainedPrimary: '#065006', colorBackgroundContainedPrimaryHover: '#086B08', colorBackgroundContainedPrimaryActive: '#043404', }, }, }) const useStyles = createUseStyles({ container: { display: 'flex', gap: 8 }, }) export const ShadowDOMProviderIsolation = (): React.ReactElement => { const shadowRootRef = React.useRef<HTMLDivElement | null>(null) const [shadowRootContainer, setShadowRootContainer] = React.useState<HTMLDivElement | null>(null) const classes = useStyles() React.useEffect(() => { if (shadowRootRef.current && !shadowRootContainer) { const shadowRoot = shadowRootRef.current.attachShadow({ mode: 'open' }) const container = document.createElement('div') shadowRoot.appendChild(container) setShadowRootContainer(container) } }, [shadowRootContainer]) return ( <ThemeProvider theme={themeBase}> <div className={classes.container}> <div ref={shadowRootRef}> {shadowRootContainer && ReactDOM.createPortal( <ShadowDOMProvider> <Button>Button Inside Shadow DOM</Button> </ShadowDOMProvider>, shadowRootContainer )} </div> <Button>Button Outside Shadow DOM</Button> </div> </ThemeProvider> ) }