ShadowDOM vs document Fragments-чем они отличаются? [закрытый]
Глядя на статьи о ShadowDOM, кажется, что это улучшение DocumentFragments. Какова реальная польза от теневого господства? Специфика CSS? Разве я не могу сделать примерно то же самое с фрагментами?
Я ищу список возможностей для каждого. Например, и то и другое, по-видимому, позволяет собрать дерево dom в памяти и вне основного пути визуализации. Тем не менее, ShadowDOM, похоже, имеет дополнительное преимущество scoped CSS.
В каких случаях вы бы использовали ShadowDOM vs where вы просто хотите использовать фрагменты документов?
Обновить
Изучив это более подробно, я вижу, что эти две технологии полностью ортогональны.
Примечание: поскольку вопрос закрыт, я не могу ответить на него сам. Первоначально я поместил детали своих находок в комментарий ниже, но решил, что больше людей будут проверять текст здесь.Фрагменты документа - это инструмент построения Javascript / DOM, используемый для создания не heirarchical коллекции узлов (каждый из которых может быть родителем других узлов) с дом. Они по существу являются оболочкой вокруг коллекции узлов, которая отбрасывается, как только фрагмент добавляется к DOM. DocumentFragments позволяет собирать несколько узлов на одном уровне и присоединять их к другому узлу DOM как родственные элементы.
Shadow Dom -это все об изоляции побочных эффектов внутри более крупного визуализированного DOM. ShadowDom позволяет создавать песочницы многоразовые компоненты с инкапсулированными стилями. Когда компонент на основе ShadowDom добавляется в более крупное веб-приложение, его стили CSS не будут просачиваться в остальную часть приложения, а собственные стили приложения не будут влиять на визуализацию компонента.
Обратите внимание, что CSS-комбинаторы, такие как /deep/
и ::shadow
, существуют для стилизации (и выбора) компонентов shadowDom из родительского dom, но они не рекомендуются в ближайшем будущем. Из-за этого рекомендуется многоразовое использование Компоненты, использующие ShadowDOM, полагаются на переменные CSS для стилизации, если они предназначены для настройки приложением, которое их использует.