Декларативный 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 Аутро

Нравится? Становитесь патронами —   / pepelsbey  

Код https://github.com/pepelsbey/playgrou...
Демо https://pepelsbey.github.io/playgroun...

Shower https://shwr.me/
Первая попытка изоляции стилей    • Прототип изоляции стилей для Shower н...  
Shadow DOM v1 https://developers.google.com/web/fun...
Declarative Shadow DOM https://web.dev/declarative-shadow-dom/
Эксплейнер https://github.com/mfreed7/declarativ...
Дискуссия в WHATWG https://github.com/whatwg/dom/issues/831
Демо с таймером https://jsbin.com/qehoqej/edit?html,o...
Демо со стилями https://jsbin.com/vojomir/edit?html,o...

* * *

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