В чем разница между Native и ShadowDom ViewEncapsulation?

Question

В моем текущем приложении angular 7 мы боремся с компонентом из библиотеки, который требует некоторых ресурсов CSS.Мы не хотим применять эти ресурсы ко всему остальному нашему приложению, но к одному конкретному компоненту, его детям и внукам.

В ходе нашего исследования мы обнаружили два интересных варианта:

encapsulation: ViewEncapsulation.Native

и:

encapsulation: ViewEncapsulation.ShadowDom

Следовательно, оба они, похоже, используют реализацию браузера теневого типа.

В чем разница между этими параметрами?

Answer 1

Это меня озадачило несколько дней назад, потом я понял, что они немного сходятся, но не полностью .Различие на самом деле составляет около более новой версии shadowDOM (v1) .Как вы можете видеть здесь в кодовом источнике angular, они добавили другое условие для ViewEncapsulation.ShadowDom:

Здесь они разделяют одно и то же значение return

 case ViewEncapsulation.Native:
 case ViewEncapsulation.ShadowDom:
      return new ShadowDomRenderer(this.eventManager, this.sharedStylesHost, element, type);    

И затем они проверяют, является ли оно ViewEncapsulation.ShadowDom илине (еще условие)

     if (component.encapsulation === ViewEncapsulation.ShadowDom) {
          this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
        } else {
          this.shadowRoot = (hostEl as any).createShadowRoot();
        }

Таким образом, ViewEncapsulation.ShadowDom - это шаг для добавления поддержки к ShadowDOM V1 и возможно устарели ViewEncapsulation.Native, как описано здесь:

ViewEncapsulation.Shadow добавлен в качестве нового API, а не изменяет поведение параметра ViewEncapsulation.Native, что может привести к неожиданным результатам для разработчиков, в настоящее время использующих API v0.Это должно (в конце концов?) Исключить опцию ViewEncapsulation.Native.

Answer 2

Angular использует ViewEncapsulation для ограничения стилей и представлений компонентом, в котором они были упомянуты, я думаю, вы уже знаете это.Native не имеет много деталей, я знаю, что он избирателен для браузеров, не все браузеры на самом деле признают это.Для ShadowDom у Angular docs есть объяснение, но оно не слишком подробное, этот фрагмент проясняет некоторые части: «Обратите внимание, что теневой DOM ни в коем случае не новость - браузеры давно используют его для инкапсуляции внутренней структурыэлемента, например элемент с открытыми элементами управления браузера по умолчанию. Все, что вы видите в DOM - это элемент, но он содержит ряд кнопок и других элементов управления внутри своей теневой модели DOM. Спецификация теневой модели DOM сделала этотак что вам разрешено фактически управлять теневым DOM ваших собственных пользовательских элементов. "Подробнее здесь: Документы MDN