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 Аутро
@realovich
3 жыл бұрын
Большое спасибо, что выделяете время для записи не совсем популярного контента. Очень полезное видео! Приятно узнавать что-то заранее, а не тогда, когда это уже повсеместно используется и работает.
@dmitriybraginets6750
3 жыл бұрын
Видео как всегда на высоте. Ждём полную поддержку.
@egoryurchenko7343
3 жыл бұрын
Давайте поможем видео сделать самым просматриваемым) Спасибо за труды.
@ОльгаЛеонтьева-ц3з
3 жыл бұрын
как всегда супер доходчиво полезно и вовремя!!! Спасибо !!!!!
@syimykamatov8955
Жыл бұрын
Спасибо. Классно объясняешь
@AnnabellFlemming
3 жыл бұрын
Спасибо за крутой и качественный контент про интересные технологии в вебе! Жду ваши видео с включённым колокольчиком и подкасты веб-стандартов очень люблю ❤️
@EvgenyTalagaev
Жыл бұрын
Очень крутая возможность
@mozgmendeleeva3050
3 жыл бұрын
There a subtle difference in pronunciation of “shower”, in this case “показыватель”, not the “shower” - “душ”. It goes more like “шоУэр”, not “шовЕр”, cause it sounds like “shover” - “запихиватель” ))
@pepelsbey
3 жыл бұрын
Вот только название движка Shower (Шовер, авторская транскрипция) - это игра слов между «показыватель» и «душ». Это обыграно на логотипе github.com/shower/shower
@andreybalatsan9336
2 жыл бұрын
Вижу Вадима, ставлю лайк
@viooi2582
Жыл бұрын
Я тоже пишу движок для презентаций, но там всё немного по другому, ты пишешь презентации на html со своими особеными правилами и на сайте можно этот файл открыть. У меня там есть для вида , первый определяет css для тега в котором он написан и в нем пишутся имено правила css, второй отвечает за стили всего слайда. Все это генерируется при открытии файла, так что так силно заморачиватся не надо)
@Andrey_4dev
3 жыл бұрын
Спасибо, было интересно узнать что-то новое
@ilinalekseys
3 жыл бұрын
Очень интересное видео. Спасибо!
@АлексейБугаев-з9ь
3 жыл бұрын
Спасибо большое, это очень полезная фича. Хорошо что вы пролили свет на неё
@ОлегСелин-ш9ы
3 жыл бұрын
Как всегда, чертовски познавательно)
@aliaksandrk3338
3 жыл бұрын
ОГОНЬ! Спасибо!
@zakharkibanov8929
3 жыл бұрын
Про чекбоксы я раз 5 смотрел минимум))
@ManyakNag
3 жыл бұрын
Интересное видео, спасибо!
@arturlomakin3555
3 жыл бұрын
Очень круто!
@wwiiktor
3 жыл бұрын
Круто
@codisy
3 жыл бұрын
Божественно, у меня оргазм верстальщика)
@volodymyrkorniienko8670
3 жыл бұрын
спасибо за флешбеки с полимером)
@whatthepeople
3 жыл бұрын
Спасибо. Будем кушать :)
@dobermanpharaoh7567
Жыл бұрын
Чувствуется влияние изоляции стилей в Angular 2+. Но всё равно кастомным компонентам ещё далеко до широкого использования... Рука не поднимется при использовании Angular делать слайд на CustomComponents вместо Ангуляровского компонента. Но вообще видео интересно для общего понимания концепции web components
@olegsazhnev681
3 жыл бұрын
*Не работает.* - не проявляет объекты на странице. Они всё равно остаются скрытыми. И Ваша демка, уже, не работает. Что-то уже не поддерживается ? Какие есть ещё варианты ограничить влияние стилей, кроме айфрейма ? Спасибо!
@pepelsbey
3 жыл бұрын
Для работы декларативного Shadow DOM нужно включить экспериментальный флаг chrome://flags/#enable-experimental-web-platform-features или добавить полифил. Также изоляция стилей работает в обычном Shadow DOM developers.google.com/web/fundamentals/web-components/shadowdom
@olegsazhnev681
3 жыл бұрын
@@pepelsbey Спасибо за ответ. Если это экспериментальная функция, выходит она для публичного использования не подходит, на данный момент. - рядовой пользователь не сможет её оценить. Касательно теневого использования стилей - а чем они отличаются от id? можно описать хоть вагон стилей для конкретного id и присвоить id, например, конкретному тегу div, и эти стили, буть там хоть для h2 или р будут актуальны только для этого div. Меня привлёк ваш видео-урок как раз тем, что вы подгружаете внешние css, которые могут состоять из кучи ."style". По приведённой вами ссылке не не могу найти ответ, как загрузить файл css(с сотнями стилей) и применить его для конкретной области??? По ссылке только локальное описание стилей, если я не ошибаюсь.
@pepelsbey
3 жыл бұрын
Почитайте по ссылке, котору я дал выше, там всё рассказывают
@timurkhudiyev
3 жыл бұрын
Спасибо, Вадим. Интересно придет ли все к тому, что можно будет добавить атрибут, какой-нибудь условный scoped и все что внутри изолируется?)
@pepelsbey
3 жыл бұрын
Раньше был , которые делал что-то подобное. Сейчас ближайшее - то, что я показал. Но мне одна птичка нашептала, что планируется что-то такое сделать, ждём подробностей :)
@catexis1
3 жыл бұрын
Спасибо за очень классные и подробные видео! Активно используем веб-компоненты на проектах, поскольку они позволяют изолировать логику элементов. И всё бы хорошо, если бы не задача поддержки Internet Explorer 11. Правильно ли я понимаю, что такой подход использовать не получится в случае поддержке такого браузера? Только ждать поддержку в полифилах?
@pepelsbey
3 жыл бұрын
Насколько я понимаю, полифилится это просто web.dev/declarative-shadow-dom/#polyfill Другое дело, что это не единственная проблема IE11 с веб-компонентами.
@timurkhudiyev
3 жыл бұрын
Microsoft вроде с концами убивает IE. Даже большие сервисы по типу KZitem перестанут скоро на нем работать
@terionname
3 жыл бұрын
Область видимости JS внутри он тоже ограничивает?
@pepelsbey
3 жыл бұрын
Да!
@terionname
3 жыл бұрын
@@pepelsbey то что надо) спасибо)
@sergeyzarovskiy7189
3 жыл бұрын
Вадим по верхам прошелся про то как раньше работало и про то как это сделать декларативно. Получилось интересно, но я в тех местах где говорилось про slot и slotted подвисал. Для тех кому интересно вот тут предистория kzitem.info/news/bejne/wHyIr4aAk4udq4o
@pepelsbey
3 жыл бұрын
Да, я добавил предысторию в описание для тех, кому интересно. То самое непопулярное видео на канале :)
@dkochetkov
3 жыл бұрын
Спасибо за видео. А не рассматривали Svelte, в компонентах которого всё изолируется без Shadow DOM уже сегодня?
@pepelsbey
3 жыл бұрын
Да не только в Svelte, много велосипедов изолируют всё - но там костыли, а мне интересно дождаться встроенного решения, которое работает не заменой классов и псевдоизоляцией, а вот на самом деле.
@dkochetkov
3 жыл бұрын
@@pepelsbey нативно, конечно приятно, всегда радуюсь долгожданным фишкам в браузерах. И всё ещё мечтаю о селекторе родительского элемента в CSS.
@ВалентинФедяков
3 жыл бұрын
Спасибо за видео. попробовал по экспериментировать codepen.io/dagot32167/pen/gOMjYLb Иииии прямо сложно придумать кейс для использования. На мой взгляд, получается какая то двоякая ситуация: мы или страдаем из-за текущей реализации веб-компонентов и отхватываем от google page speed или реализуем декларативный shadowdom и этим увеличиваем объем html страницы и шаблоны перестают быть переиспользуемыми. На мой взгляд, тут не хватает какого то фреймворка который построен на веб-компонентах и может как в SSR так и в гидрацию скрывая сложность ее реализации
@pepelsbey
3 жыл бұрын
Вы пробовали lit-html и LitElement? Кажется это будет ближе к тому, что вы ищете.
@ВалентинФедяков
3 жыл бұрын
@@pepelsbey не просто пробовал, но реализовал фронт на сайте Леруа Мерлен используя lit-element. И кстати, это прям очень сильно помогло в переходе с legacy стека на новую платформу микрофронтов реализующую рендер с помощью react. Прям очень сильно помогло сократить время перехода но новый стек. Но так или иначе, откажемся от веб-компонентов
@chelovek6413
3 жыл бұрын
Присутствует ощущение, что видео немного оторвано от звука, или звук оторван от видео :) Но может мне кажется. Как будто, что то обгоняет, а что то запаздывает
@pepelsbey
3 жыл бұрын
Хм, не заметил. Попробуйте перезагрузить страницу или перезапустить приложение, смотря как вы там смотрите.
@chelovek6413
3 жыл бұрын
@@pepelsbey Самую малость, как будто видео снято отдельно и звук записан отдельно, а потом совмещали в видео редакторе и совместили малость не четко. Ну наверно это мое только ощущение, я вчера заменил провод на HDMI может с этим связано
@Andrey_4dev
3 жыл бұрын
Такая проблема существует с Bluetooth наушниками и связана она именно с ними.
Пікірлер: 51