Декларативный 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 Аутро
Нравится? Становитесь патронами — https://www.patreon.com/pepelsbey
Код https://github.com/pepelsbey/playground/tree/master/38
Демо https://pepelsbey.github.io/playground/38/
Shower https://shwr.me/
Первая попытка изоляции стилей https://youtu.be/_FRIRJZYlxU
Shadow DOM v1 https://developers.google.com/web/fundamentals/web-components/shadowdom
Declarative Shadow DOM https://web.dev/declarative-shadow-dom/
Эксплейнер https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md
Дискуссия в WHATWG https://github.com/whatwg/dom/issues/831
Демо с таймером https://jsbin.com/qehoqej/edit?html,output
Демо со стилями https://jsbin.com/vojomir/edit?html,output
* * *
Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12–35 мм, f/2,8
Микрофон: Audio-Technica BP40 + Blue Compass
Свет: Aputure Light Storm 120d II + Light Dome
Софт: DaVinci Resolve, iZotope RX