[Vue Plugin] Scoped styles on body element

[baryla]

Problem

If we have the following scenario:

<!-- App.vue -->
<template>
    <h1 class="heading">Hello World!</h1>
</template>
<script>
    export default { name: 'app' };
</script>
<style lang="scss" scoped>
@import "./app.scss";

h1 {
    color: red;
}
</style>

// Imported from App.vue
$color: pink;

body {
    background: $color;
}

The body background in app.scss will not be set because the styles are scoped and for now, the generated scopeId doesn't work on root dom elements such as html, body.

Solution

?

To do

Need to confirm if this is actually valid and expected behaviour.