Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react-ui): Add shadow dom environment supports #3414

Open
wants to merge 2 commits into
base: next
Choose a base branch
from

Conversation

mshatikhin
Copy link
Member

@mshatikhin mshatikhin commented Apr 25, 2024

Проблема

Если рендерить контролы внутри окружения Shadow Dom, то потеряются стили и перестанут работать контроллы (выпадашки, модалки). Использование окружения Shadow Dom важно для встраиваемых виджетов, они должны быть максимально изолированы.

Решение

  1. Завернуть все стили в Context, и дать возможность рендерить стили внутри Shadow Dom.
  2. Научить работать выпадающие элементы внутри Shadow Dom, правильно позиционироваться, слушать клики, закрываться когда нужно, и дружить с z-index.
  3. Переписать глобальные слушатели (с родительского window), на контекстуальные слушатели.

Ссылки

Задача - https://yt.skbkontur.ru/issue/IF-1655

Чек-лист перед запросом ревью

  1. Добавлены тесты на все изменения
    ⬜ unit-тесты для логики
    ⬜ скриншоты для верстки и кросс-браузерности
    ⬜ нерелевантно

  2. Добавлена (обновлена) документация
    ⬜ styleguidist для пропов и примеров использования компонентов
    ⬜ jsdoc для утилит и хелперов
    ⬜ комментарии для неочевидных мест в коде
    ⬜ прочие инструкции (README.md, contributing.md и др.)
    ⬜ нерелевантно

  3. Изменения корректно типизированы
    ⬜ без использования any (см. PR 2856)
    ⬜ нерелевантно

  4. Прочее
    ⬜ все тесты и линтеры на CI проходят
    ⬜ в коде нет лишних изменений
    ⬜ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

@mshatikhin mshatikhin force-pushed the shadow-dom branch 13 times, most recently from 95aa78c to 48840c3 Compare April 27, 2024 07:57
@mshatikhin mshatikhin force-pushed the shadow-dom branch 7 times, most recently from 6c4e746 to c7cae9f Compare May 14, 2024 12:36
@mshatikhin mshatikhin force-pushed the shadow-dom branch 2 times, most recently from 556f33a to aaa6c7e Compare May 21, 2024 05:14
@mshatikhin mshatikhin force-pushed the shadow-dom branch 2 times, most recently from 430bdb1 to 1ac8e18 Compare July 17, 2024 09:53

const scope = new Array(Upgrade.getSpecificityLevel()).fill(`.${REACT_UI_PREFIX}`).join('');

export const { flush, hydrate, cx, merge, getRegisteredStyles, injectGlobal, keyframes, css, sheet, cache } =
export const getEmotion = (container?: HTMLElement | null, key?: string): Emotion =>
Copy link
Member

@lossir lossir Jul 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Для настройки CSP понадобиться ещё nonce...
Думаю, стоит сделать аргумент объектом, и мержить с дефолтными настройками в createEmotion().

В каком статусе этот ПР, кст?)

@mshatikhin mshatikhin force-pushed the shadow-dom branch 2 times, most recently from 052e1de to 7d589c7 Compare August 29, 2024 05:47
@mshatikhin mshatikhin force-pushed the shadow-dom branch 7 times, most recently from 7c8f3cd to bbc4310 Compare October 29, 2024 06:51
@mshatikhin mshatikhin force-pushed the shadow-dom branch 9 times, most recently from 32865b0 to cb40b44 Compare November 11, 2024 04:54
@mshatikhin mshatikhin force-pushed the shadow-dom branch 3 times, most recently from 957e78b to 044e274 Compare November 14, 2024 08:48
@mshatikhin mshatikhin changed the title Shadow dom feat(react-ui): Add supports shadow dom environment Nov 18, 2024
@mshatikhin mshatikhin changed the title feat(react-ui): Add supports shadow dom environment feat(react-ui): Add shadow dom environment supports Nov 18, 2024
@mshatikhin mshatikhin force-pushed the shadow-dom branch 5 times, most recently from 107211c to 9cf7dcc Compare November 25, 2024 05:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants