Про Shadow DOM и его отличие от обычного дерева DOM. 2023
Обычно у каждого сайта есть своё дерево DOM, который строит браузер, но есть и Shadow DOM. Теневое дерево, которое скрыто от внешнего мира.
✅Поставь лайк и дочитай до конца
В начале нужно вспомнить что такое DOM дерево.
DOM (Document Object Model) - это программный интерфейс для HTML и XML документов, который позволяет получать доступ к элементам и содержимому документа, изменять их свойства и структуру, создавать новые элементы и удалять существующие.
DOM представляет документ в виде иерархической структуры узлов, которые представляют элементы, атрибуты и текстовое содержимое документа. DOM позволяет программистам работать с этой структурой, изменять ее и обновлять содержимое документа динамически.
DOM также позволяет добавлять обработчики событий к элементам документа, что позволяет реагировать на действия пользователя, такие как клики, наведение курсора и т.д.
DOM является стандартом W3C и поддерживается всеми современными браузерами. Он является основой для создания динамических и интерактивных веб-страниц и веб-приложений.
Про Shadow DOM и отличия.
Shadow DOM (от англ. "shadow" - тень и "DOM" - Document Object Model) - это технология, которая позволяет создавать изолированные деревья DOM внутри основного дерева DOM веб-страницы.
Основное отличие между Shadow DOM и обычным DOM заключается в том, что Shadow DOM позволяет создавать изолированные компоненты с их собственными деревьями DOM, стилями и логикой, которые могут быть вложены в основное дерево DOM без взаимного влияния на другие элементы на странице.
Таким образом, Shadow DOM позволяет создавать более сложные и надежные веб-компоненты, которые могут быть повторно использованы в различных местах на странице или даже на других страницах, не пересекаясь с другими элементами на странице и не подвергаясь влиянию стилей и скриптов других элементов.
Другое отличие между Shadow DOM и обычным DOM заключается в том, что Shadow DOM может быть скрыт от внешнего мира с помощью CSS-селекторов, что делает его полезным для создания пользовательских элементов, которые не должны быть доступны для стилизации или изменения извне.
Про минус Shadow DOM.
Что касается тестирования, то например одним из минусов Shadow DOM для автотестирования является то, что элементы, созданные внутри Shadow DOM, не могут быть обнаружены и получены доступ к ним стандартными методами автоматизации браузера, такими как Selenium WebDriver. В итоге придется использовать специальные методы, например, в Selenium WebDriver существует метод execute_script, который позволяет выполнить JavaScript-код в контексте страницы и получить доступ к элементам внутри Shadow DOM.
Канал для будущих тестировщиков: