Impossible de styliser du html rendu avec v-html

Bonjour,

J'ai un petit problème avec vue.js, que je suis en train d'apprendre. J'utilise webpack et les fichiers .vue, et je travail toujours en style scoped (c'est important pour la suite). Mon but est d'afficher dans une div qui posséde la classe .render du html, fournie par une chaine de caractère et de styler ce html (par exemple changer la couleur des paragraphes).

Le problème est que mon selecteur css .render p ne sélectionne rien, le style n'est pas appliqué. Voici un exemple simplifié de code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
    <div class="render" v-html="response"></div>
</template>

<script>
    export default {
        data () {
            return {
                response = "<p>je suis un paragraphe !</p>"
            }
        }
    }
</script>

<style scoped="true">
    .render p {
        color: red /* Ne fonctionne pas oO */
    }
</style>


<style>
    .render p {
        color: red /* Fonctionne si le style est non scoped oO */
    }
</style>

Le style scoped n'est pas appliqué alors que le style non scoped lui est appliqué, ce qui est un peu embêtant. Pour l'instant je contourne le problème avec un identifiant unique et un style global mais j'aimerai bien pour garder un style interne au composant pour styler du html rendu avec la directive v-html histoire que ça soit propre (le fix du style externe n'est peut être pas possible dans tous les cas, même si dans mon projet ça ne pose pas de souçis).

Merci d'avance pour vos réponses

Tu as essayé de mettre la balise <style> dans le template ?

Car l'attribut scoped fait en sorte que le contenu ne s'applique qu'à son parent et sa descendance.

Quand ton template est utilisé, son contenu est donc déplacé, tu perds donc la filiation.

Salut !

Je ne peux pas faire ça, le but des fichiers vue.js est de séparer le template, le fonctionne via <script> et le style. Si je met mon style dans le template, le linter n'est pas content du tout

Le problème ne vient pas du style scoped, si j'écris le code suivant le paragraphe sera bien affiché en rouge :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<template>
    <div class="render"><p>Je suis un paragraphe en rouge !</p></div>
</template>

<script>
    export default {
        data () {
            return {
            }
        }
    }
</script>

<style scoped="true">
    .render p {
        color: red /*fonctionne oO */
    }
</style>

Le problème semble vraiment venir de la directive v-html et de la façon dans le style scoped est injecté. J'avoue que j'ai résolu le problème avec un style non scoped et une classe unique pour éviter que ça n'interfère avec le reste du code, je ne maitrise pas assez les rouages de vue.js pour creuser afin de comprendre précisément d'où vient le problème.

As-tu regardé le HTML généré par Vue.js, justement, pour voir où il mettait ton CSS par rapport au HTML ?

As-tu regardé le HTML généré par Vue.js, justement, pour voir où il mettait ton CSS par rapport au HTML ?

Normalement il génère des classes uniques ou des id uniques pour les éléments scoped. Je pense que le probléme vient de là : le style scoped est probablement intégré avec l'interprétation du v-html ce qui doit empêcher les selecteurs de s'appliquer.

Pour l'instant ma solution me convient bien, mais t'as question m'a fait réfléchir au probléme ce qui est toujours utile ! La bonne façon de faire serait peut être de mettre un style dynamique via un :bind-style, il faudra que je test a l’occasion.

Merci pour ton aide !