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