Le style d'un parent chez l'enfant — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 6)

Le style d'un parent chez l'enfant

Vite et composants monofichiers · niveau 2

Énoncé

Avec les deux composants suivants, quels éléments reçoivent la bordure ocre ? Expliquer à l'aide du DOM produit.


<template>
  <div class="carte">
    <p class="carte">
      Intérieur de l’enfant
    </p>
  </div>
</template>


<script setup>
import EncadreLivre from "./EncadreLivre.vue";
</script>

<template>
  <p class="carte">
    Paragraphe du parent
  </p>
  <EncadreLivre />
</template>

<style scoped>
.carte {
  border: 2px solid #e07a1f;
}
</style>

Corrigé

Le DOM produit (en développement) est


<p data-v-0a79b686="" class="carte"> Paragraphe du parent </p>
<div data-v-0a79b686="" class="carte">
  <p class="carte"> Intérieur de l’enfant </p>
</div>

et les bordures mesurées :


p « Paragraphe du parent » : bordure 2px
div « Intérieur de l’enfant » : bordure 2px
p « Intérieur de l’enfant » : bordure 0px

Le paragraphe du parent a la bordure : c'est un élément de son gabarit. La racine de l'enfant (le <div>) l'a aussi : Vue lui ajoute l'attribut du parent, pour que le parent puisse placer ses enfants (marges, largeur) avec son style. Le paragraphe intérieur de l'enfant ne porte aucun attribut (l'enfant n'a pas de style scoped) : la règle du parent ne l'atteint pas. Pour l'atteindre, le parent écrirait :deep(.carte).