Posso creare uno stile modello esterno?
-
21-12-2019 - |
Domanda
in GOOGLE PILIMER LEZIONE 1 , hannoUn esempio che include un foglio di stili in linea. Mi piacerebbe spostarlo in un file CSS, ma lo stile è all'interno di un tag modello. Per peggiorare le cose, dice che è
.Utilizzato all'interno di un albero dell'ombra, il: host pseudo-class corrisponde al elemento che ospita l'albero.In questo caso, corrisponde al elemento.
Q: Posso spostare questo stile in un file CSS?
Soluzione
Se si desidera stilare gli elementi che fanno parte di un elementi personalizzati Shadow Dom è necessario utilizzare il selettore ::shadow
o il selettore /deep/
se si desidera selezionare elementi indipendentemente dal numero di livelli profondi si siedono all'interno di Shadow Dom.
Allora dall'esterno, ti eleggeresti un elemento p
che è all'interno del Dom Shadow Dom x-foo
come questo:
x-foo::shadow p {
}
.
Puoi leggere tutte quelle cose qui: http://www.polymer-project.org/articles/styling-elements.html
Altri suggerimenti
Se si scarica l'elemento seme da Questa pagina (o soloGuarda i contenuti elencati), vedrai che utilizza un file CSS esterno.Puoi esaminare l'elemento HTML per vedere come è usato, ma è molto semplice:
<polymer-element name="seed-element" attributes="notitle author">
<template>
<link rel="stylesheet" href="seed-element.css" />
<h1>Hello from seed-element</h1>
<content></content>
</template>
<script>
Polymer('seed-element', {
//...
}
</script>
</polymer-element>
.
Allora in Seed-Element.css per impostazione predefinita Hai il seguente:
:host {
display: block;
}
.
Il modo in cui lo capisco (nella mia consapevolezza limitata) è che se dovessi rinominare il seme-elemento al mio elemento, questo sarebbe lo stesso di
my-element {
display: block;
}
.