Shadow DOM — сложная тема для понимания. Это просто сложно. Он знакомит с незнакомыми концепциями, к которым мы не привыкли в Интернете. Теневые границы, область стилей, перенацеливание событий, точки вставки, теневые точки вставки, хост-узлы, распределенные узлы... жаргон можно продолжать и продолжать.
Одна вещь, которая концептуально утомляет Shadow DOM, — это то, как ваш конечный продукт (DOM) отображается в браузере. Узлы из хост-узла волшебным образом перемещаются в точки вставки ShadowRoot, но логически по-прежнему остаются в хост-узле. Странный! Таким образом, во время рендеринга они появляются как часть теневого дерева, а не как исходный хост. То, как происходит этот рендеринг, является одной из самых запутанных частей Shadow DOM.
Несколько дней назад я выпустил инструмент, над которым работал, под названием Shadow DOM Visualizer , который поможет сократить время обучения.
Это позволяет вам визуально увидеть, как Shadow DOM отображается в браузере, чего сегодня не хватает DevTools. Оба черных блока кода слева доступны для редактирования. Попробуйте изменить точки вставки <content> , удалить или добавить новые, чтобы увидеть, как это повлияет на составное (отрисованное) дерево справа.
Наведите указатель мыши на узлы графика, чтобы выделить соответствующую разметку слева. Ура d3.js ! Синие узлы исходят от хост-узла. Желтые узлы происходят из Shadow DOM. Точки вставки <content> — это мост между двумя мирами. Поскольку логически они находятся в Shadow DOM, они окрашены в желтый цвет. Их синяя рамка указывает на то, что они приглашают синие хост-узлы в группу рендеринга.
Shadow DOM доступен в Chrome 25, а элемент <template> доступен в Chrome 26 (хотя вам понадобится только первая версия, чтобы попробовать демо-версию).