Большое спасибо, что выделяете время для записи не совсем популярного контента. Очень полезное видео! Приятно узнавать что-то заранее, а не тогда, когда это уже повсеместно используется и работает.
Спасибо за крутой и качественный контент про интересные технологии в вебе! Жду ваши видео с включённым колокольчиком и подкасты веб-стандартов очень люблю ❤️
Я тоже пишу движок для презентаций, но там всё немного по другому, ты пишешь презентации на html со своими особеными правилами и на сайте можно этот файл открыть. У меня там есть для вида , первый определяет css для тега в котором он написан и в нем пишутся имено правила css, второй отвечает за стили всего слайда. Все это генерируется при открытии файла, так что так силно заморачиватся не надо)
There a subtle difference in pronunciation of “shower”, in this case “показыватель”, not the “shower” - “душ”. It goes more like “шоУэр”, not “шовЕр”, cause it sounds like “shover” - “запихиватель” ))
Вот только название движка Shower (Шовер, авторская транскрипция) - это игра слов между «показыватель» и «душ». Это обыграно на логотипе github.com/shower/shower
Чувствуется влияние изоляции стилей в Angular 2+. Но всё равно кастомным компонентам ещё далеко до широкого использования... Рука не поднимется при использовании Angular делать слайд на CustomComponents вместо Ангуляровского компонента. Но вообще видео интересно для общего понимания концепции web components
Раньше был , которые делал что-то подобное. Сейчас ближайшее - то, что я показал. Но мне одна птичка нашептала, что планируется что-то такое сделать, ждём подробностей :)
Спасибо за очень классные и подробные видео! Активно используем веб-компоненты на проектах, поскольку они позволяют изолировать логику элементов. И всё бы хорошо, если бы не задача поддержки Internet Explorer 11. Правильно ли я понимаю, что такой подход использовать не получится в случае поддержке такого браузера? Только ждать поддержку в полифилах?
Насколько я понимаю, полифилится это просто web.dev/declarative-shadow-dom/#polyfill Другое дело, что это не единственная проблема IE11 с веб-компонентами.
*Не работает.* - не проявляет объекты на странице. Они всё равно остаются скрытыми. И Ваша демка, уже, не работает. Что-то уже не поддерживается ? Какие есть ещё варианты ограничить влияние стилей, кроме айфрейма ? Спасибо!
Для работы декларативного Shadow DOM нужно включить экспериментальный флаг chrome://flags/#enable-experimental-web-platform-features или добавить полифил. Также изоляция стилей работает в обычном Shadow DOM developers.google.com/web/fundamentals/web-components/shadowdom
@@pepelsbey Спасибо за ответ. Если это экспериментальная функция, выходит она для публичного использования не подходит, на данный момент. - рядовой пользователь не сможет её оценить. Касательно теневого использования стилей - а чем они отличаются от id? можно описать хоть вагон стилей для конкретного id и присвоить id, например, конкретному тегу div, и эти стили, буть там хоть для h2 или р будут актуальны только для этого div. Меня привлёк ваш видео-урок как раз тем, что вы подгружаете внешние css, которые могут состоять из кучи ."style". По приведённой вами ссылке не не могу найти ответ, как загрузить файл css(с сотнями стилей) и применить его для конкретной области??? По ссылке только локальное описание стилей, если я не ошибаюсь.
Вадим по верхам прошелся про то как раньше работало и про то как это сделать декларативно. Получилось интересно, но я в тех местах где говорилось про slot и slotted подвисал. Для тех кому интересно вот тут предистория ruclips.net/video/_FRIRJZYlxU/видео.html
Да не только в Svelte, много велосипедов изолируют всё - но там костыли, а мне интересно дождаться встроенного решения, которое работает не заменой классов и псевдоизоляцией, а вот на самом деле.
Спасибо за видео. попробовал по экспериментировать codepen.io/dagot32167/pen/gOMjYLb Иииии прямо сложно придумать кейс для использования. На мой взгляд, получается какая то двоякая ситуация: мы или страдаем из-за текущей реализации веб-компонентов и отхватываем от google page speed или реализуем декларативный shadowdom и этим увеличиваем объем html страницы и шаблоны перестают быть переиспользуемыми. На мой взгляд, тут не хватает какого то фреймворка который построен на веб-компонентах и может как в SSR так и в гидрацию скрывая сложность ее реализации
@@pepelsbey не просто пробовал, но реализовал фронт на сайте Леруа Мерлен используя lit-element. И кстати, это прям очень сильно помогло в переходе с legacy стека на новую платформу микрофронтов реализующую рендер с помощью react. Прям очень сильно помогло сократить время перехода но новый стек. Но так или иначе, откажемся от веб-компонентов
Присутствует ощущение, что видео немного оторвано от звука, или звук оторван от видео :) Но может мне кажется. Как будто, что то обгоняет, а что то запаздывает
@@pepelsbey Самую малость, как будто видео снято отдельно и звук записан отдельно, а потом совмещали в видео редакторе и совместили малость не четко. Ну наверно это мое только ощущение, я вчера заменил провод на HDMI может с этим связано
00:00 Интро
00:49 Обзор задачи
02:01 Старое решение
03:46 Веб-компоненты
04:52 Что изменилось
05:36 Новое решение
06:43 Элемент template
08:09 Стили для дека
10:03 Стили для слайдов
11:21 Убираем лишнее
13:28 Зачем это нужно
14:42 Важность новинки
15:29 Планы по внедрению
16:37 Что почитать
18:09 Демка с часами
18:56 Выводы
19:48 Аутро
Большое спасибо, что выделяете время для записи не совсем популярного контента. Очень полезное видео! Приятно узнавать что-то заранее, а не тогда, когда это уже повсеместно используется и работает.
Видео как всегда на высоте.
Ждём полную поддержку.
Давайте поможем видео сделать самым просматриваемым) Спасибо за труды.
Очень крутая возможность
Спасибо за крутой и качественный контент про интересные технологии в вебе! Жду ваши видео с включённым колокольчиком и подкасты веб-стандартов очень люблю ❤️
как всегда супер доходчиво полезно и вовремя!!! Спасибо !!!!!
Вижу Вадима, ставлю лайк
Я тоже пишу движок для презентаций, но там всё немного по другому, ты пишешь презентации на html со своими особеными правилами и на сайте можно этот файл открыть.
У меня там есть для вида ,
первый определяет css для тега в котором он написан и в нем пишутся имено правила css,
второй отвечает за стили всего слайда.
Все это генерируется при открытии файла, так что так силно заморачиватся не надо)
Спасибо, было интересно узнать что-то новое
Спасибо большое, это очень полезная фича. Хорошо что вы пролили свет на неё
Как всегда, чертовски познавательно)
Очень интересное видео. Спасибо!
Спасибо. Классно объясняешь
There a subtle difference in pronunciation of “shower”, in this case “показыватель”, not the “shower” - “душ”. It goes more like “шоУэр”, not “шовЕр”, cause it sounds like “shover” - “запихиватель” ))
Вот только название движка Shower (Шовер, авторская транскрипция) - это игра слов между «показыватель» и «душ». Это обыграно на логотипе github.com/shower/shower
Спасибо. Будем кушать :)
Интересное видео, спасибо!
ОГОНЬ! Спасибо!
Очень круто!
Божественно, у меня оргазм верстальщика)
спасибо за флешбеки с полимером)
Про чекбоксы я раз 5 смотрел минимум))
Круто
Чувствуется влияние изоляции стилей в Angular 2+. Но всё равно кастомным компонентам ещё далеко до широкого использования... Рука не поднимется при использовании Angular делать слайд на CustomComponents вместо Ангуляровского компонента. Но вообще видео интересно для общего понимания концепции web components
Спасибо, Вадим. Интересно придет ли все к тому, что можно будет добавить атрибут, какой-нибудь условный scoped и все что внутри изолируется?)
Раньше был , которые делал что-то подобное. Сейчас ближайшее - то, что я показал. Но мне одна птичка нашептала, что планируется что-то такое сделать, ждём подробностей :)
Спасибо за очень классные и подробные видео! Активно используем веб-компоненты на проектах, поскольку они позволяют изолировать логику элементов. И всё бы хорошо, если бы не задача поддержки Internet Explorer 11. Правильно ли я понимаю, что такой подход использовать не получится в случае поддержке такого браузера? Только ждать поддержку в полифилах?
Насколько я понимаю, полифилится это просто web.dev/declarative-shadow-dom/#polyfill Другое дело, что это не единственная проблема IE11 с веб-компонентами.
Microsoft вроде с концами убивает IE. Даже большие сервисы по типу RUclips перестанут скоро на нем работать
*Не работает.*
- не проявляет объекты на странице. Они всё равно остаются скрытыми.
И Ваша демка, уже, не работает.
Что-то уже не поддерживается ?
Какие есть ещё варианты ограничить влияние стилей, кроме айфрейма ?
Спасибо!
Для работы декларативного Shadow DOM нужно включить экспериментальный флаг chrome://flags/#enable-experimental-web-platform-features или добавить полифил. Также изоляция стилей работает в обычном Shadow DOM developers.google.com/web/fundamentals/web-components/shadowdom
@@pepelsbey Спасибо за ответ. Если это экспериментальная функция, выходит она для публичного использования не подходит, на данный момент. - рядовой пользователь не сможет её оценить.
Касательно теневого использования стилей - а чем они отличаются от id? можно описать хоть вагон стилей для конкретного id и присвоить id, например, конкретному тегу div, и эти стили, буть там хоть для h2 или р будут актуальны только для этого div.
Меня привлёк ваш видео-урок как раз тем, что вы подгружаете внешние css, которые могут состоять из кучи ."style". По приведённой вами ссылке не не могу найти ответ, как загрузить файл css(с сотнями стилей) и применить его для конкретной области??? По ссылке только локальное описание стилей, если я не ошибаюсь.
Почитайте по ссылке, котору я дал выше, там всё рассказывают
Область видимости JS внутри он тоже ограничивает?
Да!
@@pepelsbey то что надо) спасибо)
Вадим по верхам прошелся про то как раньше работало и про то как это сделать декларативно. Получилось интересно, но я в тех местах где говорилось про slot и slotted подвисал. Для тех кому интересно вот тут предистория ruclips.net/video/_FRIRJZYlxU/видео.html
Да, я добавил предысторию в описание для тех, кому интересно. То самое непопулярное видео на канале :)
Спасибо за видео. А не рассматривали Svelte, в компонентах которого всё изолируется без Shadow DOM уже сегодня?
Да не только в Svelte, много велосипедов изолируют всё - но там костыли, а мне интересно дождаться встроенного решения, которое работает не заменой классов и псевдоизоляцией, а вот на самом деле.
@@pepelsbey нативно, конечно приятно, всегда радуюсь долгожданным фишкам в браузерах. И всё ещё мечтаю о селекторе родительского элемента в CSS.
Спасибо за видео. попробовал по экспериментировать codepen.io/dagot32167/pen/gOMjYLb Иииии прямо сложно придумать кейс для использования. На мой взгляд, получается какая то двоякая ситуация: мы или страдаем из-за текущей реализации веб-компонентов и отхватываем от google page speed или реализуем декларативный shadowdom и этим увеличиваем объем html страницы и шаблоны перестают быть переиспользуемыми. На мой взгляд, тут не хватает какого то фреймворка который построен на веб-компонентах и может как в SSR так и в гидрацию скрывая сложность ее реализации
Вы пробовали lit-html и LitElement? Кажется это будет ближе к тому, что вы ищете.
@@pepelsbey не просто пробовал, но реализовал фронт на сайте Леруа Мерлен используя lit-element. И кстати, это прям очень сильно помогло в переходе с legacy стека на новую платформу микрофронтов реализующую рендер с помощью react. Прям очень сильно помогло сократить время перехода но новый стек. Но так или иначе, откажемся от веб-компонентов
Теперь я крайний в очереди комментариев
Присутствует ощущение, что видео немного оторвано от звука, или звук оторван от видео :) Но может мне кажется. Как будто, что то обгоняет, а что то запаздывает
Хм, не заметил. Попробуйте перезагрузить страницу или перезапустить приложение, смотря как вы там смотрите.
@@pepelsbey Самую малость, как будто видео снято отдельно и звук записан отдельно, а потом совмещали в видео редакторе и совместили малость не четко. Ну наверно это мое только ощущение, я вчера заменил провод на HDMI может с этим связано
Такая проблема существует с Bluetooth наушниками и связана она именно с ними.
Какой умный HTML