Polymer condivide gli stili tra gli elementi

Devo condividere gli stili tra più elementi Polymer. È accettabile creare un file “styles.html” e quindi importarlo nei miei diversi elementi o questo comincerebbe ad avere implicazioni sulle prestazioni man mano che l’app cresce? So che per 0.5 esistevano stili di base, ma non sembra necessario se le importazioni funzioneranno altrettanto bene.

styles.html

 button { background: red; }  

my-button.html

          Polymer({ is: 'my-button', behaviors: [ButtonBehavior] })  

    Come suggerito nella discussione sul problema registrato in chromium per deprecate / deep / e :: shadow selettori:

    dì 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 lo usi, i consumatori devono sapere quali stili desiderano e triggersmente richiederli, il che aiuta a evitare i conflitti. Con la memorizzazione nella cache del browser, non c’è praticamente alcuna penalità per così tante importazioni, in effetti è più veloce di sovrapporre gli stili attraverso più alberi ombra usando i piercer.

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

    Abbiamo utilizzato i webcomponents nelle nostre app di produzione da un po ‘di tempo usando questa tecnica poiché / deep / è stato deprecato e non c’è stata alcuna differenza di prestazioni di significazione.

    Puoi usare gli stili condivisi di Polymer. Crea un documento con i tuoi stili:

        

    E poi importa questo ai tuoi elementi e nelle loro definizioni aggiungi include="shared-styles" al tag

    .

    Condividi gli stili creando un dom-module per loro, proprio come gli altri elementi personalizzati. Per includere gli stili condivisi in un elemento personalizzato, usa

    . Esempio completo di seguito.

    condiviso-styles.html

         

    some-element.html

           

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

    Per condividere le dichiarazioni di stile tra gli elementi, è ansible impacchettare un insieme di dichiarazioni di stile all’interno di un elemento. In questa sezione, uno stile di attesa è chiamato un modulo di stile per comodità.

    Un modulo di stile dichiara un set denominato di regole di stile che possono essere importate in una definizione di elemento o in un elemento di stile personalizzato.

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