Size: a a a

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

2020 September 28

АР

Алексей Родионов... in Веб-компоненты
В целом, есть best practices как правильно писать универсальные веб-компоненты, которые она хочет.

Приведённый ею пример, когда всё приложение в одном компоненте <shop-app> — плохая практика (не работает без JS, всё в Shadow DOM, проблемы с SEO и т.д.) как пример как не надо делать нужно тоже включить в best practices.
источник

SK

Serhii Kulykov in Веб-компоненты
приложения - отдельная больная тема, и я все еще считаю, что веб-компонентам СИЛЬНО не повезло, что Polymer Project пытался вместе с ними “в нагрузку” продвигать PWA
источник

SK

Serhii Kulykov in Веб-компоненты
как показала практика - Polymer Starter Kit и PWA Starter Kit умерли, а осадок в виде <shop-app> остался
источник

SK

Serhii Kulykov in Веб-компоненты
вообще я примерно понимаю, чего она хочет, и как раз такие компоненты и делаю в последнее время)
источник

АР

Алексей Родионов... in Веб-компоненты
Serhii Kulykov
приложения - отдельная больная тема, и я все еще считаю, что веб-компонентам СИЛЬНО не повезло, что Polymer Project пытался вместе с ними “в нагрузку” продвигать PWA
Почему?

На тот момент это было логично: "Для всего есть элемент. Вот вам элементы, из которых можно собрать полноценное приложение.".
источник

SK

Serhii Kulykov in Веб-компоненты
это две разные темы. проблема в том, что предлагалось ВСЕ писать на веб-компонентах

в итоге возникла аналогия “веб-компоненты = Polymer = фреймворк”
источник

АР

Алексей Родионов... in Веб-компоненты
Именно за эту идею я и купился на веб-компоненты и PWA, так как хотел быстро собирать рабочие мобильные приложения. )

А вот если бы веб-компоненты преподносились как (ещё один) правильный способ структурировать код приложения, я бы скорее всего прошёл мимо. )
источник

SK

Serhii Kulykov in Веб-компоненты
ну идея приложений массово не взлетела, в основном из-за тормозов с полифиллами понятное дело, но не только
источник

SK

Serhii Kulykov in Веб-компоненты
как я вижу сейчас - стоит продвигать UI контролы на веб-компонентах, причем не любые
элементы форм отпадают, пока не будет form participation API во всех браузерах

если бы это API сделали с самого начала - намного больше можно было бы делать
источник

SK

Serhii Kulykov in Веб-компоненты
раз формы пока отпадают - остается писать колор-пикеры, гамбургер-кнопки и так далее. что я и делаю
источник

АР

Алексей Родионов... in Веб-компоненты
Вот все топят за то, что нужно использовать нативные семантические теги, например использовать <button> вместо <div>, который выглядит как кнопка. Это в целом правильная идея и я всеми руками за неё (a11y, все дела...). Но вот на днях столкнулся с тем, что <select> с <options> не смог стилизовать, как нарисовано в макете. Пришлось воссоздавать из других элементов. Я уже не говорю, про возможность расширить нативные элементы.
источник

SK

Serhii Kulykov in Веб-компоненты
Алексей Родионов
Вот все топят за то, что нужно использовать нативные семантические теги, например использовать <button> вместо <div>, который выглядит как кнопка. Это в целом правильная идея и я всеми руками за неё (a11y, все дела...). Но вот на днях столкнулся с тем, что <select> с <options> не смог стилизовать, как нарисовано в макете. Пришлось воссоздавать из других элементов. Я уже не говорю, про возможность расширить нативные элементы.
Microsoft работает над кастомизацией select 🙂

https://groups.google.com/u/0/a/chromium.org/g/blink-dev/c/9TcfjaOs5zg?pli=1
источник

SK

Serhii Kulykov in Веб-компоненты
ну и в целом проект Open UI про это: https://open-ui.org
источник

ИЛ

Иван Лещёв in Веб-компоненты
Здрасьте.
Меня зовут Иван и я люблю вебкомпоненты.
источник

AY

Andrey Yamanov in Веб-компоненты
Сплю и вижу, чтобы платформа наконец стандартизировала поведения и дала возможность их инжектирования в обычные и кастомные элементы. Последнее время активно играюсь с этой концепцией и DX получается просто замечательный.
источник

MB

Mikhail Bashkirov in Веб-компоненты
Алексей Родионов
Вот все топят за то, что нужно использовать нативные семантические теги, например использовать <button> вместо <div>, который выглядит как кнопка. Это в целом правильная идея и я всеми руками за неё (a11y, все дела...). Но вот на днях столкнулся с тем, что <select> с <options> не смог стилизовать, как нарисовано в макете. Пришлось воссоздавать из других элементов. Я уже не говорю, про возможность расширить нативные элементы.
ничему из вышесказанного это не противоречит
специально для этого создали https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex
источник

MB

Mikhail Bashkirov in Веб-компоненты
Serhii Kulykov
ну идея приложений массово не взлетела, в основном из-за тормозов с полифиллами понятное дело, но не только
я думаю из-за двух причин
- ShadowDOM ну нежен на уровне приложения, и даже вреден, отличный пример - переиспользуемые CSS классы для создания сеток, которые все еще массово популярны и люди их требуют вместо CSS Grids или чего еще другого
- как следствие первой причины, но все-таки как самостоятельная тоже - отсутствие SSR
источник

MB

Mikhail Bashkirov in Веб-компоненты
первое кстати удивительно еще и потому, что никто не заставлял использовать ShadowDOM на уровне приложения
но так как Polymer был первый в своем роде, предложившем такую идею, а там ShadowDOM не был опционален, то это породило массовое следование такой негативной практике
источник

ИЛ

Иван Лещёв in Веб-компоненты
Mikhail Bashkirov
я думаю из-за двух причин
- ShadowDOM ну нежен на уровне приложения, и даже вреден, отличный пример - переиспользуемые CSS классы для создания сеток, которые все еще массово популярны и люди их требуют вместо CSS Grids или чего еще другого
- как следствие первой причины, но все-таки как самостоятельная тоже - отсутствие SSR
а я вот буквально вчера сложил svg иконки в шадовдом
источник

ИЛ

Иван Лещёв in Веб-компоненты
потому что я в них передаю текст, который потом в маске участвует и мне не нужен конфликт идентификаторов
источник