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 для стилизации, если они предназначены для настройки приложением, которое их использует.

1 6

1 ответ:

Из того, что я прочитал и как я его использую, это ShadowDom имеет отношение к инкапсуляции, как если бы вы поместили тег <style> внутрь ShadowDom css будет применяться только к ShadowDom, а фрагменты документов - к браузеру reflow