Как добавить класс, когда стиль ограничен?

Question

Этот пример должен окрашивать тело в красный цвет, но это не из-за атрибута scoped.

<template>
   <div></div>
</template>
<script>
   export default {
      name: 'test',
      props: {},
      mounted(){
         document.body.classList.add('highlight');
      }
   }
</script>
<style lang="scss" scoped>
   .highlight {
      background-color: red;
   }
</style>

Есть ли обходной путь для этого случая?

Answer 1

Вы применяете класс области действия к элементу (body) вне компонента!

Все классы, объявленные в стиле области действия компонента, могут использоваться только для элементов внутри этого компонента, поскольку имя класса автоматически изменяется на что-то вроде этого: .highlight[2d35fds3sd]!

И все элементы внутри компонента имеют этот уникальный идентификатор:

<template>
  <div 2d35fds3sd>
     <span 2d35fds3sd>     </span>
  </div>
</template>

но элемент body не имеет этого уникального идентификатора!

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

Answer 2

Вам не нужны стили с областями, потому что ваши стили не ограничены вашим компонентом. Если вам нужно иметь как область видимости для компонентов, так и глобальные стили, вы должны объявить два тега стиля. Пример в официальных документах . Однако вам следует избегать глобальных стилей.