|
28 | 28 | </template> |
29 | 29 | ``` |
30 | 30 |
|
31 | | -#### Примечания |
| 31 | +#### Советы |
32 | 32 |
|
33 | | -1. Вы можете использовать в компоненте локальные и глобальные стили одновременно: |
| 33 | +### Использование локальных и глобальных стилей |
34 | 34 |
|
35 | | - ``` html |
36 | | - <style> |
37 | | - /* глобальные стили */ |
38 | | - </style> |
| 35 | +Вы можете сочетать использование в компоненте локальных и глобальных стили одновременно: |
39 | 36 |
|
40 | | - <style scoped> |
41 | | - /* локальные стили */ |
42 | | - </style> |
43 | | - ``` |
| 37 | +``` html |
| 38 | +<style> |
| 39 | +/* глобальные стили */ |
| 40 | +</style> |
| 41 | + |
| 42 | +<style scoped> |
| 43 | +/* локальные стили */ |
| 44 | +</style> |
| 45 | +``` |
| 46 | + |
| 47 | +### Корневой узел дочернего компонента |
| 48 | + |
| 49 | +С помощью `scoped`, стили родительского компонента не будут влиять на содержимое дочерних компонентов. Тем не менее, корневой узел дочернего компонента будет зависеть как от scoped CSS из родительского элемента, так и от scoped CSS дочернего. Это предусмотрено специально, чтобы родительский элемент мог стилизовать корневой элемент дочернего компонента например для целей макета. |
| 50 | + |
| 51 | +### Глубокие селекторы |
| 52 | + |
| 53 | +Если вы хотите, чтобы селектор в `scoped` стилях был "глубоким", т.е. влиял на дочерние компоненты, вы можете использовать комбинатор `>>>`: |
| 54 | + |
| 55 | +``` html |
| 56 | +<style scoped> |
| 57 | +.a >>> .b { /* ... */ } |
| 58 | +</style> |
| 59 | +``` |
| 60 | + |
| 61 | +Указанное выше будет скомпилировано в: |
| 62 | + |
| 63 | +``` css |
| 64 | +.a[data-v-f3f3eg9] .b { /* ... */ } |
| 65 | +``` |
44 | 66 |
|
45 | | -2. Корневой тег компонента потомка будет попадать под область видимости родительского локального CSS и своего локального CSS. |
| 67 | +Некоторые пре-процессоры, такие как SASS, не могут правильно обработать `>>>`. В таких случаях вы можете использовать комбинатор `/deep/` — это псевдоним для `>>>` работающий точно также. |
46 | 68 |
|
47 | | -3. Partials не затрагиваются локальными стилями. |
| 69 | +### Динамически генерируемый контент |
48 | 70 |
|
49 | | -4. **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно. |
| 71 | +DOM-содержимое, создаваемое с помощью `v-html` не попадает под область действия scoped-стилей, но вы всё равно можете его стилизовать воспользовавшись deep-селекторами. |
50 | 72 |
|
51 | | -5. **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу. |
| 73 | +### О чём следует помнить |
52 | 74 |
|
53 | | -6. Если вам нужны вложенные селекторы в `scoped` стилях, вам нужно будет использовать оператор `>>>` для CSS и `/deep/` для `scss`: |
| 75 | +- **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно. |
54 | 76 |
|
55 | | - ``` html |
56 | | - <style scoped> |
57 | | - .a >>> .b { |
58 | | - |
59 | | - } |
60 | | - </style> |
61 | | - |
62 | | - <style lang="scss" scoped> |
63 | | - .a /deep/ .b { |
64 | | - |
65 | | - } |
66 | | - </style> |
67 | | - ``` |
| 77 | +- **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу. |
0 commit comments