Comment utiliser correctement “l'étendue” de styles en VueJS fichier unique des composants?

La docs sur VueJS état que scoped devrait limiter les styles avec le composant. Mais si je crée 2 composants avec le même baz le style, c'est une fuite d'un composant dans un autre:

foo.vue

<template>
<div class="baz">
  <Bar></Bar>
</div>
</template>

<style scoped>
.baz {
  color: red;
}
</style>

bar.vue

<template>
<div class="baz">bar</div>
</template>

<style scoped>
.baz {
  background-color: blue;
}
</style>

J'attends que baz sera différent dans les deux éléments. Mais après la génération d'une page web, je peux voir le texte rouge sur fond bleu, ce qui signifie que foo'étendue de style affecte la bar composant. Le code généré ressemble à ceci:

<div class="baz" data-v-ca22f368>
  <div class="baz" data-v-a0c7f1ce data-v-ca22f368>
    bar
  </div>
</div>

Comme vous pouvez le voir, la "fuite" est intentionnellement généré par VueJS via la spécification de deux attributs de données dans le bar composant. Mais pourquoi?

Il pourrait être un cas spécial, car les deux éléments sont imbriqués. Ne sais pas si il s'agit bien d'un bug, si.

OriginalL'auteur grigoryvp | 2017-08-26

  1. 16

    Vous pouvez lire sur le Vue du chargeur docs:

    Un composant enfant du nœud racine seront touchés à la fois par la mère de l'étendue de la CSS et de l'enfant de l'étendue de CSS.

    C'est apparemment ce qu'il est censé faire, même si cela peut sembler un peu déroutant.

    Si vous voulez éviter cela, vous devez utiliser des modules css:

    <template>
<div :class="$style.baz">
  <Bar></Bar>
</div>
</template>

<style module>
.baz {
  color: red;
}
</style>
    Bien fait. Un peu de sérieux impressionnant interprétation. Le ci-dessus docs citation est donc l'esprit-la déformation qu'il pourrait tout aussi bien être un low-res gif d'un ruban de möbius illustration.

    OriginalL'auteur Mario Lamacchia