Блог

В этом примере тело должно быть окрашено в красный цвет, но это не так из 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>
  

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

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

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

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

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

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

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

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