Size: a a a

Веб-компоненты

2019 December 16

AY

Andrey Yamanov in Веб-компоненты
Gennadiy Vatitov
Как же тогда сделать так, чтобы разработчик при интеграции дизайн-системы ее не сломал, не пойму?)
Мне кажется надо перестать считать дизайн-системы костылём сбоку и всё будет ок 🙂 Design System first подход нужен)) Тогда ничего не сломают. Хотя я понимаю, о какой проблеме речь, но выделять для дизайн системы какую-то параллельную основной вёрстки абстракцию - это космический оверхед.
источник

GV

Gennadiy Vatitov in Веб-компоненты
Andrey Yamanov
Мне кажется надо перестать считать дизайн-системы костылём сбоку и всё будет ок 🙂 Design System first подход нужен)) Тогда ничего не сломают. Хотя я понимаю, о какой проблеме речь, но выделять для дизайн системы какую-то параллельную основной вёрстки абстракцию - это космический оверхед.
Ох, боюсь, уследить за каждой командой в компании не так просто)) Каждого дисциплинировать под дизайн систем подход, пожалуй, хорошо, но не очень просто) Всегда нужен апрув дизайнера перед выкладкой, а дизайнеры тоже люди)
источник

AY

Andrey Yamanov in Веб-компоненты
Gennadiy Vatitov
Ох, боюсь, уследить за каждой командой в компании не так просто)) Каждого дисциплинировать под дизайн систем подход, пожалуй, хорошо, но не очень просто) Всегда нужен апрув дизайнера перед выкладкой, а дизайнеры тоже люди)
Это мы подходим к следующей проблеме. Называется она “необходимость статического анализа применения дизайн-системы” и решается она не через Shadow DOM 🙂
источник

AY

Andrey Yamanov in Веб-компоненты
Т.е. решение совсем на другом уровне тут может быть.
источник

GV

Gennadiy Vatitov in Веб-компоненты
Хм, комплексный подход @_@
источник

PM

Pavel 🦇 Malyshev in Веб-компоненты
Andrey Yamanov
Не, со стилями тут вообще ничего не надо, они работают насквозь как и раньше. Возможно там надо будет чуточку изменить наследование, чтобы стили внутреннего DOM не текли во внешний (при условии, что это ничего сильно не усложнит), но барикадировать протечку стилей внутрь точно не надо.
Для этого есть 2 режима у ShadowDOM. В open режиме так и работает
источник

AY

Andrey Yamanov in Веб-компоненты
Но там есть режим closed.
источник

PM

Pavel 🦇 Malyshev in Веб-компоненты
Но сам по себе ShadowDOM порождает сразу другие проблемы. Именно тот плюс, про то, что мы не «видим» внутренние устройство и является основным минусом. Вызывая проблемы с a11y, SSR, autocompletion, svg, etc.
источник

AY

Andrey Yamanov in Веб-компоненты
Какие именно проблемы с a11y там приводят? Они активный элемент запихивают в Shadow DOM? Ну так это дичь в любом случае. Про SSR… что именно? отдача поисковикам или регидрация? Первое точно не проблема (если учесть замечание первого пункта), второе вроде тоже или я что-то упускаю?
источник

AY

Andrey Yamanov in Веб-компоненты
Единственное, что я пока не могу понять. Где именно там зарыт оверхед в производительности. Если только в режиме closed, то вроде это не проблема, можно его не использовать. Если не только в нём, то надо смотреть.
источник

PM

Pavel 🦇 Malyshev in Веб-компоненты
Andrey Yamanov
Какие именно проблемы с a11y там приводят? Они активный элемент запихивают в Shadow DOM? Ну так это дичь в любом случае. Про SSR… что именно? отдача поисковикам или регидрация? Первое точно не проблема (если учесть замечание первого пункта), второе вроде тоже или я что-то упускаю?
Если для тебя важно «скрыть» разметку в компоненте, то там может оказаться любой элемент, в том числе активный. Да и просто текст из элемента, который является частью разметки компонента ридер вроде как не читает
источник

PM

Pavel 🦇 Malyshev in Веб-компоненты
Опять же, чтобы вернуть внутреннюю разметку компонента с shadow DOM в виде строки для SSR нужно его исполнить
источник

AY

Andrey Yamanov in Веб-компоненты
Pavel 🦇 Malyshev
Если для тебя важно «скрыть» разметку в компоненте, то там может оказаться любой элемент, в том числе активный. Да и просто текст из элемента, который является частью разметки компонента ридер вроде как не читает
Больше похоже на некорректное применение технологии.
источник

AY

Andrey Yamanov in Веб-компоненты
Pavel 🦇 Malyshev
Опять же, чтобы вернуть внутреннюю разметку компонента с shadow DOM в виде строки для SSR нужно его исполнить
Зачем хотеть столь странные вещи?)
источник

PM

Pavel 🦇 Malyshev in Веб-компоненты
То есть как минимум эмулировать DOM APi на сервере (раз оверхед). Далее его надо экспортировать как-то (2 оверхед). Далее его нужно как-то согласовать с клиентской реализацией (скорее всего невозможно)
источник

PM

Pavel 🦇 Malyshev in Веб-компоненты
Andrey Yamanov
Зачем хотеть столь странные вещи?)
Тогда у тебя просто не будет SSR
источник

AY

Andrey Yamanov in Веб-компоненты
Pavel 🦇 Malyshev
Тогда у тебя просто не будет SSR
Не вижу причин, почему его не будет.
источник

AY

Andrey Yamanov in Веб-компоненты
Будет без Shadow DOM, потом соберётся.
источник

PM

Pavel 🦇 Malyshev in Веб-компоненты
Ща до компа дойду
источник

GV

Gennadiy Vatitov in Веб-компоненты
Andrey Yamanov
Больше похоже на некорректное применение технологии.
Т.е. инпут, который должен быть оформлен по дизайн-системе нужно хранить отдельно от Shadow DOM?
источник