Как понять инкапсуляцию стилей?

Question

[zlodiak]

Помогите пожалуйста написать учебный пример чтобы было видно действие и выгода инкапсуляции стилей. Мой вариант тут. Здесь проблема в том, что непонятно какое действие осуществляет метааргумент encapsulation: ViewEncapsulation.None,

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

Нельзя ли более наглядно показать выгоду от использования ViewEncapsulation для случая вложенных элементов?

Answer 1

[0xD34F]

Помогите пожалуйста написать учебный пример чтобы было видно действие и выгода инкапсуляции стилей. Мой вариант тут.

"Помогите"? Да вы и сами справились. Только зачем-то сами же всё и поломали.

непонятно какое действие осуществляет метааргумент encapsulation: ViewEncapsulation.None

Это отключение инкапсуляции стилей компонента.

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

Кажется, вы забыли о том, что у вас в стилях дочернего компонента background закомментирован - потому и применяется стиль из родительского компонента. Уберите комментирование - и оба элемента будут стилизованы в соответствие с правилом из дочернего компонента.

А ещё лучше - прекратите вдобавок отключать инкапсуляцию, и тогда элементы из разных компонентов будут стилизованы каждый по-своему, несмотря на то, что имя класса - одно и то же. Собственно, в этом и состоит, как вы там выразились? - "выгода инкапсуляции" - вы можете в каждом из компонентов определять собственные правила стилей, не беспокоясь о том, что они будут пересекаться со стилями других компонентов.

Comments

[zlodiak]

кажется, начинаю понимать. но прокомментируйте пожалуйста ход моей мысли:
в иерархии вложенных компонентов, стили всплывают из глубины, подобно тому как всплывают события в DOM. но это поведение можно изменить при помощи ViewEncapsulation

пример:
1. есть в компонент app в него вложен компонент in. по умолчанию в них действует encapsulation: ViewEncapsulation.Emulated,. это значит, что стили компонента in находятся в своём отдельном неймспейсе, а стили компонента находятся в своём отдельном неймспейсе. значит они не аффектят друг на друга

2. но это можно изменить. если в компоненте in прописать encapsulation: ViewEncapsulation.None, то стили компонентов app и in окажутся в пределах одного неймспейса. при этом больший вес будет у стилей компонента app, потому что он выше в иерерархии

3. но если в компоненте in прописать encapsulation: ViewEncapsulation.Emulated, а в компоненте app прописать encapsulation: ViewEncapsulation.None, то стили компонента app должны оказаться в одном неймспейсе со стилями syles.css. и по аналогии с пунктом2, больший вес должны иметь стили из файла styls.css. НО этого не происходит

где я не прав?..

[0xD34F]

zlodiak, подозреваю, что везде не правы - дальше "стили всплывают" читать не стал, извините.

Как реализована инкапсуляция стилей в angular'е. Рекомендую попробовать разобраться самому - открываете консоль, вкладка с DOM-деревом, смотрите как выглядят элементы и стили с инкапсуляцией. Затем отключаете инкапсуляцию и смотрите ещё раз. Осознаёте, в чём разница. Если же лень, то...

...жмите сюда

Всем элементам компонента с инкапсулированными стилями добавляется уникальный атрибут (в смысле - у каждого компонента свой), и этот же атрибут добавляется всем css-селекторам стилей компонента - таким образом гарантируется, что стили не будут применены за пределами компонента.

Если же у какого-то компонента инкапсуляция отключена, то появляется возможность применения его стилей к элементам других компонентов - просто в силу большей специфичности. Можете попробовать в своём примере отключить инкапсуляцию у одного из компонентов (любого, это не важно) и добавить к его background'у !important - элемент второго компонента, несмотря на включенную инкапсуляцию, перекрасится в цвет первого.

[zlodiak]

0xD34F, вот это очень помогло разобраться, теперь всё встало на свои места