Декларативный Shadow DOM для изоляции стилей

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 Аутро

* * *

Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12–35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Aputure Light Storm 120d II + Light Dome
Софт: DaVinci Resolve, iZotope RX

[pepelsbey]

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]

Большое спасибо, что выделяете время для записи не совсем популярного контента. Очень полезное видео! Приятно узнавать что-то заранее, а не тогда, когда это уже повсеместно используется и работает.

[dmitriybraginets]

Видео как всегда на высоте.

Ждём полную поддержку.

[egoryurchenko]

Давайте поможем видео сделать самым просматриваемым) Спасибо за труды.

[ОльгаЛеонтьева-цз]

как всегда супер доходчиво полезно и вовремя!!! Спасибо

[AnnabellFlemming]

Спасибо за крутой и качественный контент про интересные технологии в вебе! Жду ваши видео с включённым колокольчиком и подкасты веб-стандартов очень люблю ❤️

[mozgmendeleeva]

There a subtle difference in pronunciation of “shower”, in this case “показыватель”, not the “shower” — “душ”. It goes more like “шоУэр”, not “шовЕр”, cause it sounds like “shover” — “запихиватель” ))

[viooi]

Я тоже пишу движок для презентаций, но там всё немного по другому, ты пишешь презентации на html со своими особеными правилами и на сайте можно этот файл открыть.
У меня там есть для вида <style> <style global>,
первый определяет css для тега в котором он написан и в нем пишутся имено правила css,
второй отвечает за стили всего слайда.
Все это генерируется при открытии файла, так что так силно заморачиватся не надо)

[Andrey_dev]

Спасибо, было интересно узнать что-то новое

[АлексейБугаев-зь]

Спасибо большое, это очень полезная фича. Хорошо что вы пролили свет на неё

[zakharkibanov]

Про чекбоксы я раз 5 смотрел минимум))

[codisy]

Божественно, у меня оргазм верстальщика)

[dobermanpharaoh]

Чувствуется влияние изоляции стилей в Angular 2+. Но всё равно кастомным компонентам ещё далеко до широкого использования... Рука не поднимется при использовании Angular делать слайд на CustomComponents вместо Ангуляровского компонента. Но вообще видео интересно для общего понимания концепции web components

[olegsazhnev]

*Не работает.*
<template shadowroot="open"> - не проявляет объекты на странице. Они всё равно остаются скрытыми.
И Ваша демка, уже, не работает.
Что-то уже не поддерживается ?
Какие есть ещё варианты ограничить влияние стилей, кроме айфрейма ?
Спасибо!

[timurkhudiyev]

Спасибо, Вадим. Интересно придет ли все к тому, что можно будет добавить атрибут, какой-нибудь условный scoped и все что внутри изолируется?)

[catexis]

Спасибо за очень классные и подробные видео! Активно используем веб-компоненты на проектах, поскольку они позволяют изолировать логику элементов. И всё бы хорошо, если бы не задача поддержки Internet Explorer 11. Правильно ли я понимаю, что такой подход использовать не получится в случае поддержке такого браузера? Только ждать поддержку в полифилах?

[terionname]

Область видимости JS внутри он тоже ограничивает?

[dkochetkov]

Спасибо за видео. А не рассматривали Svelte, в компонентах которого всё изолируется без Shadow DOM уже сегодня?

[chelovek]

Присутствует ощущение, что видео немного оторвано от звука, или звук оторван от видео :) Но может мне кажется. Как будто, что то обгоняет, а что то запаздывает

[lemaximya]

Теперь я крайний в очереди комментариев