Стили ViewEncapsulation.Emulated копируются в # shadow-root с помощью компонента ViewEncapsulation. (Native | ShadowDom). - PullRequest
Новая
       8

Стили ViewEncapsulation.Emulated копируются в # shadow-root с помощью компонента ViewEncapsulation. (Native | ShadowDom).

0 голосов
/ 03 ноября 2018

У меня есть образец репозитория https://github.com/collinstevens/angular-encapsulation, который демонстрирует мой вопрос.

Существует три компонента: EmulatedComponent, NativeComponent и ShadowDomComponent, которые используют ViewEncapsulation.Emulated, ViewEncapsulation.Native и ViewEncapsulation.ShadowDom соответственно.

Стили из EmulatedComponent копируются в <head>, как описано в https://angular.io/guide/component-styles,, но также копируются в каждый # shadow-root, и я хотел бы знать, почему и как предотвратить это, если это возможно.

emulated.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: black;
  display: inline-block;
}

native.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
}

shadow-dom.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: yellow;
  display: inline-block;
}

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

Это известная ошибка , в настоящее время обходной путь заключается в том, чтобы не смешивать режимы инкапсуляции.

Но сценарий, с которым я предполагаю, что вы сталкиваетесь, может заключаться в том, что вы смешиваете третьи стороны, имеющие разные типы режимов инкапсуляции? Если это так, то вы должны либо принять во внимание свою структуру CSS, либо просто переосмыслить, какую стороннюю библиотеку вы смешиваете.

Обновление

Чтобы прокомментировать, заставьте все компоненты выполнять собственную инкапсуляцию, сказав компилятору сделать это с compilerOptions , чтобы не конфликтовать с нативными веб-компонентами.

Сделайте это, добавив в свой файл tsconfig.json (это tsconfig.app.json в ng версии 6+): 

"angularCompilerOptions": {
    "defaultEncapsulation": 1
}
0 голосов
/ 03 ноября 2018

главное различие между тремя:

1- ViewEncapsulation.Emulated это предварительная обработка кода CSS для глубокой области видимости компонента, чтобы предотвратить конфликт, и это режим по умолчанию для углового режима из-за ограниченной поддержки теневого домена в браузерах ... для поддержки браузера могу ли я использовать

2- ViewEncapsulation.Native, который использует устаревшую версию shadow dom в соответствии с angular doc Read . он работает почти так же, как инкапсуляция теневого дома

3- ViewEncapsulation.ShadowDom когда вы используете ShadowDom, почему стиль копируется в каждый # shadow-root, потому что именно так он работает ... когда вы активны ShadowDom, это позволяет скрытым деревьям DOM присоединяться к обычное дерево это как дерево внутри обычного дерева DOM, поэтому оно копирует стиль, который применяется к элементам, создавая область высокого уровня, и то, что вы видите практически, является теневым домом, но теоретически это обычный DOM ...

для более подробной информации о Shadow Dom MDN статья

для лучшей практики и то, с чем рекомендует угловая команда, использует ViewEncapsulation.Emulated, который используется по умолчанию, но в некоторых редких случаях вы используете None или ShadowDom, но используйте его с осторожностью.

...