SK
в Chrome 90 включают Declarative Shadow DOM, при том что отдельные моменты до сих пор не были согласованы
https://github.com/whatwg/dom/issues/831#issuecomment-817259959
https://github.com/whatwg/dom/issues/831#issuecomment-817259959
Size: a a a
2021 April 14
SG
Класека
VF
блин, вот хоть убейте, не понимаю пользу в Declarative Shadow DOM ((
SG
Это дает возможность ускорить fcp/fmp/lcp за счет того что вся разметка(в тч shadow dom и scoped styles) доступны до момента скачивания\исполнения js
VF
но это не дает жеж переиспользования компонентов, если не ошибаюсь. вроде ты в каждом таком компоненте пишешь всю его стилизацию, что разбувает html
SG
Офкоз
VF
тогда смысл, если мы теряем на объеме загружаемого html который еще и кешироваться у пользователя не будет
VF
потому и не понимаю, какая цель этой фичи
SG
Правда зависит от того как стили подключать, через link дублей не будет
VF
останется только дубль загружаемой структуры. знаешь, я вот не знаю почему, но это как то сильно попахивает https://www.webcomponents.org/community/articles/introduction-to-html-imports только будь то попытка зайти с другой стороны. но возможно я бред несу
П
можно же его не использовать, если не нужен
Например, есть у вас страница логина - отдали форму логина декларативно, а всё остальное через обычный Shadow DOM
Как итог - и пользователь быстро может начать вводить логин/пароль и дублирования HTML нет
Например, есть у вас страница логина - отдали форму логина декларативно, а всё остальное через обычный Shadow DOM
Как итог - и пользователь быстро может начать вводить логин/пароль и дублирования HTML нет
VF
Тогда вопрос, а куда торопиться в поле логина, если там ещё море js обвязки обычно?
П
чаще всего да, но тоже не обязательно
эту обвязку можно тоже отдать раньше, чем логику всех остальных веб-компонентов
с декларативным SD можно весь контент отдать, и он будет красиво отображаться, пока вся логика догружается
форма логина это один из примеров. сайты типа твиттера или ютуба тоже сюда неплохо ложаться
или что-то похожее можно сделать без декларативного SD?
эту обвязку можно тоже отдать раньше, чем логику всех остальных веб-компонентов
с декларативным SD можно весь контент отдать, и он будет красиво отображаться, пока вся логика догружается
форма логина это один из примеров. сайты типа твиттера или ютуба тоже сюда неплохо ложаться
или что-то похожее можно сделать без декларативного SD?
VF
Ssi и все в инлайн?
VF
Тож самое же, наверное
П
SSI - server-side includes?
расскажите подробнее, как это будет работать, особенно в контексте веб-компонентов
я как альтернативу видел возможность определять веб-компоненты через заголовки реквеста, например
или через отдельный "автоматический" запрос, типа как делается для favicon или для manifest.json, но это всё чисто фантазии
расскажите подробнее, как это будет работать, особенно в контексте веб-компонентов
я как альтернативу видел возможность определять веб-компоненты через заголовки реквеста, например
или через отдельный "автоматический" запрос, типа как делается для favicon или для manifest.json, но это всё чисто фантазии
VF
Shadow DOM и веб компоненты, эт немного о разном жеж
VF
По сути, так же. Получается нам нужен некий элемент на странице с уникальным селектором. Бэм ещё не потерял свою актуальность. Заинлайнить его нет проблем. Как пример, это ssr компонента на svelte
П
В общем и целом да, но вряд ли вам потребуется передавать каким-то образом Shadow DOM декларативно с сервера для чего-то кроме кастомных элементов, что даёт уже больше половины веб компонентов
то есть ваша идея передавать компоненты, но не вместе с собственно элементом, а где-то отдельно на странице объявлять шаблон?
то есть ваша идея передавать компоненты, но не вместе с собственно элементом, а где-то отдельно на странице объявлять шаблон?
VF
@paulcodiny я вот реально, не ради холивара, а ради понять где вообще может быть применима эта спецуха, вот в реальной жизни, что бы она закрывала реальную боль. У меня есть некоторый опыт работы с вебкомпонентами и понимание их как переиспользуемых виджетов (логика и стилизация). но именно на Declarative Shadow DOM моя понималка ломается