Polimeri condividono gli stili tra gli elementi

Devo condividere gli stili in più elementi del polymer. È accettabile creare un file "styles.html" e quindi importrlo nei miei diversi elementi o potrebbe cominciare ad avere implicazioni di performance quando l'applicazione cresce? So che per 0.5 c'era un core-styles, ma sembra inutile se le importzioni funzionino altrettanto bene.

styles.html

<style> button { background: red; } </style> 

my-button.html

 <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../styles/main-styles.html"> <link rel="import" href="../behaviors/mixins.html"> <dom-module id="my-button"> <template> <button>{{text}}</button> </template> </dom-module> <script> Polymer({ is: 'my-button', behaviors: [ButtonBehavior] }) </script> 

Come suggerito nella discussione sull'emissione del cromo registrato per deprecare / deep / and :: shadow selectors:

dire che i tuoi stili comuni sono in un file chiamato

common-style.css

Nel tuo componente hai un tag di stile simile a questo

@import url ('/common-style.css');

Questo inverte il controllo: invece di trasmettere i tuoi stili a chiunque di usare, i consumatori di stile devono sapere quali stili vogliono e richiederli triggersmente, che aiuta a evitare i conflitti. Con la cache del browser, non c'è sostanzialmente alcuna penalità per tante importzioni, in realtà è probabilmente più veloce di cascare gli stili attraverso più alberi ombreggiati utilizzando piercing.

Puoi creare uno style.css e importrli nei tuoi componenti inserendo un css @import nel tuo model. Non ci saranno più chiamate di networking, dal momento che il browser lo memorizza quando il primo componente viene caricato e per i componenti successivi verrà selezionato dalla cache.

Abbiamo usato webcomponents nelle nostre applicazioni di produzione per un po 'adesso utilizzando questa tecnica poiché / deep / è stato deprecato e non c'è stata alcuna differenza di performance significativa.

È ansible utilizzare gli stili condivisi di Polymer. Crea un documento con i tuoi stili:

 <dom-module id="shared-styles"> <template> <style> /* Your styles */ </style> </template> </dom-module> 

E poi importre i tuoi elementi e nelle loro definizioni aggiungere include="shared-styles" al tag <style> .

A partire da Polymer 1.1, gli autori dei progetti sul polymer consigliano di creare e importre un module di stile per risolvere questo problema.

Per condividere dichiarazioni di stile tra gli elementi, è ansible confezionare un insieme di dichiarazioni di stile all'interno di un elemento. In questa sezione, gli stili della holding sono chiamati un module di stile per la comodità.

Un module di stile dichiara un insieme di regole di stile che possono essere importte in una definizione di elementi o in un elemento di stile personalizzato.

Per saperne di più: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

Condividere gli stili creando un dom-module per loro, proprio come altri elementi personalizzati. Per includere gli stili condivisi in un elemento personalizzato, utilizzare <style include="style-module-name"> . Esempio completo qui sotto.

condiviso-styles.html

 <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="shared-styles"> <template> <style> /* CSS goes here */ </style> </template> </dom-module> 

some-element.html

 <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="shared-styles.html"> <dom-module id="some-element"> <template> <style include="shared-styles"> /* Element specific styles go here */ </style> <!-- HTML goes here --> </template> <script> Polymer({ is: 'some-element', properties: { } }); </script> </dom-module>