shadow root closed что это
Shadow DOM
Теневой DOM («Shadow DOM») используется для инкапсуляции. Благодаря ему в компоненте есть собственное «теневое» DOM-дерево, к которому нельзя просто так обратиться из главного документа, у него могут быть изолированные CSS-правила и т.д.
Встроенный теневой DOM
Задумывались ли вы о том, как устроены и стилизованы сложные браузерные элементы управления?
Браузер рисует их своими силами и по своему усмотрению. Их DOM-структура обычно нам не видна, но в инструментах разработчика можно её посмотреть. К примеру, в Chrome для этого нужно активировать пункт «Show user agent shadow DOM».
После этого выглядит так:
То, что находится под #shadow-root – и называется «shadow DOM» (теневой DOM).
Мы не можем получить доступ к теневому DOM встроенных элементов с помощью обычных JavaScript-вызовов или с помощью селекторов. Это не просто обычные потомки, это мощное средство инкапсуляции.
Ещё раз заметим, что pseudo – нестандартный атрибут. Если говорить хронологически, то сначала браузеры начали экспериментировать с инкапсуляцией внутренних DOM-структур для элементов, а уже потом, через некоторое время, появился стандарт Shadow DOM, который позволяет делать то же самое нам, разработчикам.
Далее мы воспользуемся современным стандартом Shadow DOM, описанным в спецификации DOM spec и других спецификациях.
Теневое дерево
Каждый DOM-элемент может иметь 2 типа поддеревьев DOM:
Если у элемента имеются оба поддерева, браузер отрисовывает только теневое дерево. Также мы всё же можем задать «композицию» теневого и обычного деревьев. Позже в главе Слоты теневого DOM, композиция мы рассмотрим детали.
Теневое дерево можно использовать в пользовательских элементах (Custom Elements), чтобы спрятать внутренности компонента и применить к ним локальные стили.
Например, этот элемент прячет свой внутренний DOM в теневом дереве:
А вот как получившийся DOM выглядит в инструментах разработчика в Chrome, весь контент внутри «#shadow-root»:
Итак, вызов elem.attachShadow(
Есть два ограничения:
Свойство mode задаёт уровень инкапсуляции. У него может быть только два значения:
Элемент с корнем теневого дерева называется – «хозяин» (host) теневого дерева, и он доступен в качестве свойства host у shadow root:
Инкапсуляция
Теневой DOM отделён от главного документа:
Ссылки
Итого
Теневой DOM – это способ создать свой, изолированный, DOM для компонента.
Элементы теневого DOM:
Теневой DOM, если имеется, отрисовывается браузером вместо обычных потомков (light DOM). В главе Слоты теневого DOM, композиция мы разберём, как делать их композицию.
Веб-компоненты. Часть 2: теневой DOM
Вступление
Приветствую, коллеги, и представляю вашему вниманию продолжение серии статей о веб-компонентах, первая часть которой доступна вот тут
В этой статье речь пойдет о спецификации теневого DOM (shadow DOM) версии от 01.03.2018 г.. Последний черновик спецификации датирован 08.03.2018г.
АПИ теневого DOM позволяет нам инкапсулировать содержимое страницы, посредством помещения разметки в древовидную структуру, называемую shadow tree, которая, хотя и будет внедрена в DOM, не будет ее полноправной частью в привычном нам контексте: ее нельзя получить для взаимодействия стандартными методами js для работы с обычными потомками в DOM. Именно это АПИ в разрезе всех АПИ для создания веб-компонентов, дает нам возможность не только скрывать внутреннюю реализацию компонентов, но и инкапсулировать стили с минимальными усилиями.
Теневой DOM уже используется браузерами для внутренней реализации работы ряда элементов. Так например
при рассмотрении в консоли оказывается не единичным элементом, а именно древовидной структурой обычных HTML элементов в теневом DOM.
Основные понятия
Ключевым понятием в концепции теневого DOM является shadow tree, то самое «поддерево», которое рендерится в документ, но не находится в DOM дереве. Мне проще всего было рассматривать shadow tree как нечто среднее между частью документа и фрагметом (document fragment).
Дерево, которому принадлежит shadow root называют light tree, и, кстати light tree вполне может быть другим shadow tree.
Shadow tree может содержать элементы слоты (slot).Этот элемент — аналог documentFragment — при его рендеринге в DOM, слот заменяется на его содержимое.
Частные случаи работы элемента slot различаются в зависимости от того, задано ли значение в его атрибут name.
Если значение атрибута name задано
Когда атрибутe name элемента slot присвоено значение, то элемент slot при рендеринге документа будет заменен на те элементы документа (light tree), у которых есть атрибут slot, установленный в значение равное значению атрибута name у элемента slot.
В качестве примера я взяла код пользовательского элемента таб, составленный при написании предыдущей статьи и внесла в него следующие изменения:
В конструкторе создан и прикреплен теневой DOM. Теперь доступ к shadow root будет возможен через обращение this.shadowRoot.
Теперь в разметке при использовании пользовательского элемента я смогу задавать внутреннее содержимое элемента навигации с единственным условием, вложенные элементы должны иметь атрибут slot равный значению атрибута name у элемента slot в теневом DOM (в нашем примере — «nav»), иначе они не будут отображаться.
Аналогичные изменения я внесу в класс TabContentItem:
В связи с подключением теневого DOM необходимость в использовании атрибута content для отображения содержимого таб отпала.
Использование таких пользовательских элементов выглядит так:
Из этого примера видно, что пользователь компонента способен передать любую разметку как внутрь элемента навигации, так и внутрь элемента содержимого табы, но, повторюсь, с ограничением в виде обязательного наличия у элементов такой разметки атрибута slot (и в нашем случае — с одним и тем же значением для каждого из пользовательских элементов). На мой взгляд, это тот случай, когда второй вариант поведения элемента slot предпочительнее, а именно:
Если значение атрибута name не задано
Если имя на элементе slot не задано, то, по умолчанию, оно равно пустой строке и такой слот будут называть default slot. При рендеринге, он будет заменен на те элементы, которые не имеют атрибута slot.
Потому я уберу из разметки, задаваемой в методах render, атрибут name и его значение, а из разметки в основном документе атрибуты slot и их значения. Таким образом, вся разметка, указываемая между двумя тегами пользовательского элемента будет внедрена в дефолтный слот. Код изоляции разметки можно посмотреть вот тут.
Стили
Стили, указанные внутри тега style элемента из теневого DOM будут им ограничены. CSS селекторы из внешнего окружения не будут применяться к содержимому теневого DOM, а его стили, соответственно, не вытекут наружу, что позволяет нам использовать простейшие селекторы, которые, кроме удобства написания также лучше по производительности.
Пользовательские веб-компоненты могут стилизовать сами себя из контекста теневого DOM, используя селектор :host. При этом, правила такого селектора могут быть переписаны внешними стилями компоненты, что позволит менять стили при использовании компоненты (адаптировать при необходимости в момент использования). А :host(selector) позволяет компоненте стилизовать хост при его совпадении с селектором, что как раз используется для визуализации действий пользователя и состояния приложения. Также доступна стилизация по контексту :host-context(selector) который совпадает с компонентой только когда какой-то из предков компоненты совпадает с селектором (используется для стилизации обусловленной окружением).
Для использования из теневого DOM также доступен псевдоэлемент ::slotted(selector), который должен выбирать элементы вложенного верхнего элемента, совпадающего с селектором. О других возможностях CSS в теневом DOM можно почитать тут.
О событиях
Мой пример с табами не лучшим образом подходит для демонстрации этого, но теневой DOM имеет также особенность поведения событий. Так, например, вот список событий, которые, согласно документации, должны будут всегда останавливаться на самом внутреннем shadow root: abort, error, select, change, load, reset, resize, scrol, selectstart. А click, dbclick и почти все остальные мышиные события, wheel, blur, focus, focusin, focusout, keydown, keyup, все события перетаскивания (drag events) и некоторые другие свободно пересекают границу shadow DOM. Мне не доводилось это использовать, но я считаю что эта информация может пригодится.
О поддержке
В настоящее время поддержка первой версии спецификации реализована в Chrome, в Opera, частично в Safari и имплементируется в Firefox.
Спасибо за внимание, прошу не судить строго. С уважением Tania_N
Using shadow DOM
An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.
Note: Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (79 and onwards) supports it too; the old Edge didn’t.
High-level view
This article assumes you are already familiar with the concept of the DOM (Document Object Model) — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:
This fragment produces the following DOM structure:
Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.
There are some bits of shadow DOM terminology to be aware of:
You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow DOM tree inside a element. The difference is that none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation.
Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a element, with the default browser controls exposed. All you see in the DOM is the element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.
Basic usage
You can attach a shadow root to any element using the Element.attachShadow() method. This takes as its parameter an options object that contains one option — mode — with a value of open or closed :
open means that you can access the shadow DOM using JavaScript written in the main page context, for example using the Element.shadowRoot property:
Note: As this blog post shows, it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it’s worth.
If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this:
When you’ve attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation:
Working through a simple example
Now let’s walk through a simple example to demonstrate the shadow DOM in action inside a custom element —
Inside the class definition we define the element’s constructor, which defines all the functionality the element will have when an instance of it is instantiated.
Creating the shadow root
We first attach a shadow root to the custom element:
Creating the shadow DOM structure
Next, we use some DOM manipulation to create the element’s internal shadow DOM structure:
Styling the shadow DOM
After that we create a element and populate it with some CSS to style it:
Attaching the shadow DOM to the shadow root
The final step is to attach all the created elements to the shadow root:
Using our custom element
Once the class is defined, using the element is as simple as defining it, and putting it on the page, as explained in Using custom elements:
Internal versus external styles
In the above example we apply style to the Shadow DOM using a element, but it is perfectly possible to do it by referencing an external stylesheet from a element instead.
For example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code):
Many modern browsers implement an optimization for tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet. With this optimization the performance of external and internal styles should be similar.
Оформление содержимого в SVG с помощью CSS
Подробная статья об оформлении содержимого в элементе SVG и преодолении связанных с этим проблем.
Графика в формате SVG особо часто применяется для создания иконок и одной из самых распространенных техник для этого являются SVG-спрайты с использованием SVG use для инстанцирования иконок в нужном месте документа.
Краткий обзор структуры SVG, группирования и ссылок на элементы в SVG
SVG включает в себя 4 основных элемента для определения, структурирования и создания ссылок на содержимое SVG в документе. Эти элементы дают возможность многократного использования изображений, оставляя код читаемым и поддерживаемым. Из-за природы SVG некоторые из этих элементов имеют функциональность, аналогичную соответствующим командам в графических редакторах.
Элемент (сокращение от “group” ) используется для логической группировки наборов связанных графических элементов. В терминах графических редакторов ( типа Adobe Illustrator) элемент по функционалу похож на функцию “Сгруппировать объекты”. Вы также можете думать о группе как о слое в графическом редакторе.
Группирование элементов полезно в тех случаях, когда вы хотите применить стиль ко всем элементам группы, а также, когда вы хотите анимировать все элементы группы, сохранив соотношение между ними.
Элемент используется для задания многих вещей, в основном это задание паттернов типа градиентов, которые затем можно использовать для заливки других элементов SVG. Его можно использовать для задания любых элементов, которые вы собираетесь использовать где-либо на холсте.
Перед тем как ответить на эти вопросы и с учетом того, что мы только по-быстрому разобрали структуру и группирование SVG, стоит упомянуть пару статей,которые позволят вам узнать больше об этих элементах, а также об атрибуте viewBox в элементе :
SVG и теневой DOM
Ответ — в теневой DOM (почему-то он всегда у меня ассоциируется с Бэтменом, не знаю почему).
Что такое теневой DOM?
Теневой DOM идентичен обычному DOM, за исключением того, что вместо того, чтобы быть частью дерева основного документа, узлы теневого DOM относятся к фрагменту документа, который является параллельным основному, но недоступным для его скриптов и стилей. Это дает авторам возможность создавать модульные компоненты, инкапсулируя скрипты и стили. Если вы когда-либо использовали элемент video или диапазонный ввод в HTML5 и не поняли, откуда появлялись элементы управления видеоплеером или слайдер, то ответ тот же — теневой DOM.
Итак, содержимое (клон или копия элемента, на который он ссылается) присутствует внутри теневого фрагмента документа.
Теперь, если вы дизайнер, вы можете подумать: “ОК, я понял, но есть ли способ проверить этот субдокумент и увидеть его содержимое”. Ответ — да, вы можете просматривать содержимое теневого DOM, используя инструменты разработки в Chrome (в Firefox на данный момент эта функция не доступна). Но для начала вам надо активировать инспектора теневого DOM во вкладке General на панели настроек. Это подробно описано здесь.
Используя инструменты разработчика Chrome, вы можете инспектировать содержимое элемента use внутри теневого DOM (“#shadow-root”, строка выделена серым цветом). На этом скриншоте инспектируется логотип Codrops из примера, который мы будем рассматривать в следующем разделе.
Глядя на инспектируемый код, вы можете увидеть, что теневой DOM очень похож на обычный, за исключением того, как он обрабатывается CSS и JavaScript основного документа. Существуют также иные различия между ними, которые мы не будем рассматривать в этой статье по причине их объема, поэтому если вы хотите узнать больше, я рекомендую вам следующие статьи:
С учетом моего ограниченного опыта взаимодействия с теневым DOM, я рассматриваю его как обычный DOM, который нужно по другому обрабатывать в части доступа CSS и JavaScript к его элементам. Это то, что важно для нас при работе с SVG: как воздействовать на содержимое внутри теневого DOM, ведь нам важно иметь возможность оформлять его. Весь смысл использования это возможность создавать различные копии элемента и в большинстве случаев нам надо иметь возможность стилизовать каждую копию по-разному. Например, это может быть лого в двух цветовых темах или многоцветные иконки для разных цветовых тем. Так что для нас важно иметь возможность сделать это с помощью CSS.
Как было сказано, содержимое теневого DOM недоступно для CSS в отличие от обычного DOM. Так как нам стилизовать его? Мы не можем использовать путь к потомкам типа такого:
Потому как у нас нет доступа к теневому DOM с помощью обычных CSS селекторов.
Существует пара специальных селекторов, проникающих в теневой DOM и применяющих стили к узлам внутри него, но они не только плохо поддерживаются, но и их возможности ограничены в сравнении с длинным списком селекторов CSS для обычного DOM.
Кроме того, нам нужен простой способ оформить содержимое SVG без погружения в специфику теневого DOM, используя простой CSS и простой SVG.
Каскадирование стилей
Итак, CSS к SVG подключается тремя различными способами — внешними CSS стилями, внутренними стилями (внутри элемента ) и строчными стилями (в атрибуте style ), вся разница в каскадировании.
В дополнение к свойствам CSS, элементы SVG можно оформлять используя презентационные атрибуты. Презентационные атрибуты это сокращения для задания CSS-свойств элементу. Думайте о них как о специальных стилевых свойствах. Их природа позволяет использовать их в стилевом каскаде, но в несколько непривычном виде.
В SVG подмножество CSS-свойств может быть задано SVG-атрибутами и наоборот. Это значит, что не все CSS свойства могут быть заданы элементу SVG как презентационные атрибуты и не все презентационные атрибуты, доступные в SVG, могут быть определены в CSS.
Возможно, вы, как и я ожидаете, что презентационные атрибуты имеют самую высокую специфичность среди всех стилевых правил. Ведь обычно внешние стили переписываются внутренними декларациями, а те в свою очередь переписываются строчными стилями атрибутов — они имеют максимальную специфичность, а, соответственно, и приоритет перед остальными стилями. И хотя это ожидание имеет смысл, действительный механизм работы отличен.
На самом деле, презентационные атрибуты рассматриваются как низкоуровневые “авторские таблицы стилей” и они переписываются остальными стилевыми декларациями: внешними, внутренними и инлайновыми стилями. Их единственная сила это приоритет перед унаследованными стилями. И все.
Теперь, когда мы выяснили это, вернемся к нашему элементу и его содержимому.
Однако, это вызывает пару вопросов:
И даже если вы можете редактировать код SVG и можете избавиться от них, я настоятельно рекомендую этого не делать по следующим причинам:
Итак, у нас есть эти атрибуты, но при этом мы хотим оформить различные экземпляры иконок по разному.
Это делается за счет вынуждения презентационных атрибутов к унаследованию стилей, заданных или нахождения способа обойти переопределения этих значений. Чтобы сделать это, нам придется использовать всю мощь каскадирования CSS.
Давайте начнем с простых примеров и постепенно перейдем к сложным.
Переписывание значений презентационных атрибутов с помощью CSS
Это просто благодаря ключевому слову CSS inherits. Взгляните на следующий пример — иконка мороженого, нарисованная одним контуром, цвет которого мы хотим изменять в разных экземплярах. Иконка создана Эрин Агноли из Noun Project.
С этим кодом мы получили следующий результат:
Заметьте, что благодаря добавленным черным рамкам вокруг наших SVG вы видите границы каждого из них, в том числе и первого, в котором содержимое не рендерится. Запомните: SVG-документ, в котором вы определили symbol будет выводится на страницу, но без содержимого. Чтобы предотвратить это, используйте свойство display: none на первом SVG. Если вы не спрячете SVG с определениями иконок, он будет выводится на экран даже если вы не зададите для него размеры — он займет дефолтные 300 на 150 пикселей (это значение по умолчанию для незамещаемых элементов в CSS) и вы получите ненужный вам пустой блок на экране.
Теперь попробуем изменить цвет заливки для каждого экземпляра иконки:
Вуаля! Цвета, заданные элементам теперь применяются к path каждого из них. Проверьте демо и поэкспериментируйте со значениями, создавая экземпляры и задавая им разные цвета:
See the Pen mErELQ by prgssr (@prgssr) on CodePen.
Теперь эта техника работает, после того как мы вынудили содержимое унаследовать стили. Но во многих случаях это не совсем то, что вам нужно. Есть и другие способы оформления, к некоторым из них мы сейчас перейдем.
Оформление содержимого с помощью свойства CSS all
Если вы столкнетесь с похожей задачей, вы, вероятно, решите, что она займет слишком много времени, если все делать в CSS:
Используя свойство all мы можем сделать так:
Заметьте, что это относится только к атрибутам, которые можно устанавливать с помощью CSS, а не к атрибутам, задаваемым только в SVG. Если атрибут может быть задан с помощью CSS — он унаследует стили, иначе нет.
Использование переменной CSS currentColor для оформления содержимого
Использование переменной CSS currentColor в сочетании с техникой, описанной выше, позволяет определить два цвета для элемента, а не один. Год назад Фабрис Вайнберг написал об этом статью в своем блоге на Codepen.
Предположим, мы хотим оформить это минималистичное лого Codrops, используя 2 цвета — один для передней капли, а второй для задней.
Если мы зададим цвет заливки ( fill ) в элементе для каждого экземпляра, этот цвет будет унаследован обоими каплями, что не является нашей целью.
Теперь, используя свойства fill и color в мы добавим стили к капле из логотипа:
Вот демо с использованным кодом:
See the Pen aZmZXV by prgssr (@prgssr) on CodePen.
Этот двухцветная техника отлично подходит для двухцветных лого. В своей статье Фабрис создал три различных версии лого Sass, изменяя цвет текста относительно фона.
Будущее: оформление содержимого c помощью переменных CSS
Переменные CSS, как и переменные препроцессоров могут найти множество использований, но цветовая темизация это один из самых распространенных вариантов. И в этом разделе мы рассмотрим, как мы можем их применить при оформлении SVG.
Мы будем использовать изображение этого прикольного робота-хипстера, созданного Freepik.
Код робота содержит все составляющие его цвета:
С добавленными переменными код будет следующим:
Затем нам надо задать значения для переменных в CSS. Но сначала инстанцируем изображение с помощью :
Вы по-прежнему можете использовать свойства fill и color вместе с этими переменными, но вы можете вполне обойтись и без этого. Итак, с цветами заданными в наших переменных, робот выглядит так:
Вы можете использовать сколько угодно копий изображения и для каждой из них задать набор различных цветов, создав различные темы. Это частично полезно, когда вы хотите оформить лого различными способами в зависимости от контекста и в других подобных случаях.
Как было упомянуто, браузеры, не поддерживающие CSS-переменные используют заданные презентационные атрибуты в качестве запасного варианта, а браузеры с поддержкой переменных CSS используют их для заполнения свойства fill и переписывания атрибутов. Но что происходит, если браузер поддерживает переменные CSS, но вы забыли задать эти переменные в стилях или задали некорректное значение?
Для нашего робота-хипстера мы задали три переменных и только несколько его фрагментов не зависят от них — ведь он изначально разрабатывался для возможной темизации. Поэтому если вы запустите этот код в браузере с поддержкой переменных CSS и удалите все декларации с объявлением этих переменных, вы получите следующий результат:
Если значения переменных не заданы или не корректны, браузер будет использовать свой цвет по умолчанию, а это обычно черный цвет для заливки и обводки в SVG.
Обойти это можно, задав другой цвет в качестве запасного варианта для поддерживающих браузеров. Синтаксис переменных CSS позволяет сделать так: вместо передачи функции var() имени переменной в качестве аргумента, вы передаете два аргумента, разделенных запятой — имя переменной и запасной вариант, в данном случае это будет значение для презентационного атрибута.
Итак, теперь код нашего робота выглядит так:
И это все. Если у какой-либо переменной не будет задано значение, у браузера всегда будет в запасе цвет, заданный в качестве запасного варианта. Замечательно.
Вы можете поэкспериментировать с демо, создать сколько угодно копий робота и раскрасить его любыми цветами — не забудьте только, что для этого обязательно надо использовать браузер с поддержкой переменных CSS:
See the Pen vKXXYP by prgssr (@prgssr) on CodePen.
Если вы просматриваете это демо в браузере с поддержкой переменных CSS, то среди прочих вы увидите голубую с желтым версию робота, как мы и задавали в CSS-переменных. Иначе вы увидите трех одинаковых роботов с цветом запасного варианта.
Подводя итоги
Это была большая статья.
Лично мне очень симпатично сочетание переменных CSS и SVG. Мне нравятся их совместный функционал, особенно в части создания механизма запасного варианта.
Мы также можем получить другие способы оформления содержимого в будущем, так как продолжаются дискуссии об использовании переменных CSS в качестве параметров SVG — поэтому данная статья не покрывает все, что можно узнать по этой теме.
Работа с многократно используемым содержимым SVG является одним из сложных вопросов SVG, это связано с поведением и местом расположения клонируемого кода. Здесь возникает очень много смежных вопросов, которые могут стать темой отдельных статей.