4
votes

StencilJS | Appliquer des styles d'hôte au composant

J'essaie d'appliquer les styles du site Web où un composant stencilJS est inclus ... mais je ne sais pas comment.

#red{
    color: red;
}

Le composant est inclus comme ceci:

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src='https://unpkg.com/component@0.0.2/dist/mycomponent.js'></script>
<my-component></my-component>

Dans mon fichier main.css, j'ai quelque chose comme ceci:

XXX

Je voudrais que le style soit appliqué à l'élément du composant pochoir. Est-ce possible?

javascript stenciljs

0 commentaires

3 Réponses :

2
votes

Votre composant a un "Shadow DOM", qui sert à tout encapsuler, y compris les styles dans un DOM séparé, donc il existe pratiquement pour vous empêcher de remplacer ses styles.

Auparavant, il y avait des "shadow piercing "Directives CSS comme / deep / et :: shadow , mais elles sont obsolètes et ne sont plus fonctionnelles.

C'est donc à peu près comme ça censé être.

Maintenant pour les solutions de contournement:

créez un fichier css partagé et incluez-le à la fois dans votre composant et dans votre application - ou
définissez le style à l'aide du javascript de votre application hôte à l'aide de la propriété shadowRoot:

var div = document.querySelector('#comp').shadowRoot.querySelector('div#red');
div.style['color'] = 'red';

1 commentaires

Salut. Merci pour le commentaire. Inclure le css deux fois ... ce n'est pas une option pour moi. J'utilise une application dont les styles sont automatiquement inclus. Pas même écrit par moi. J'ai essayé de définir shadow: false , mais je vois toujours le composant dans un dom # shadow-root .

1
votes

Vous devriez pouvoir utiliser le sélecteur psuedo : host dans votre feuille de style pour appliquer les styles au niveau de l'hôte:

:host {
    style: value
}

Vous pouvez facilement importer @ stencil.sass pour vos feuilles de style, lien ici: https://github.com/ionic-team/stencil-sass/blob/master/readme.md

Cela vous donnera une plus grande fonctionnalité avec vos styles au pochoir. p >

EDIT:

J'ai mal compris et je vois maintenant que vous voulez manipuler en dehors du composant. Vous pouvez fournir un élément dans votre composant Web et ajouter des éléments de style spécifiquement extérieurs au DOM des composants Web. Lien ici: https://developer.mozilla.org/en -US / docs / Web / HTML / Element / slot

3 commentaires

Salut. Je ne pense pas avoir posé la bonne question. Supposons donc que j'utilise Bootstrap dans un projet et que je souhaite utiliser un élément Bootstrap dans un composant Stencil. Dois-je également ajouter le bootstrap css à mon composant? Ou puis-je simplement créer le composant et le rendre à l'aide du css bootstrap d'origine trouvé dans le projet?

@Ciprian avez-vous trouvé une solution pour utiliser le bootstrap dans le composant stencil?

@Dark_Knight Non. Désolé

3
votes

Vous pouvez utiliser des variables css pour cela. Regardez les exemples de code suivants:

index.html

my -component>

my-component.css

#red {
    color: var(--text-color, black);
}

Dans le le style du composant vous attribuez une variable CSS comme valeur à la couleur du texte de la classe [id = "red"] . Dans votre application, vous pouvez désormais changer la couleur en définissant la valeur de la variable.

0 commentaires