javascript - Polymer comparte estilos entre elementos

css shadow-dom

Question

Necesito compartir estilos a través de múltiples elementos Polymer. ¿Es aceptable crear un archivo "styles.html" y luego importarlo a mis diferentes elementos o esto comenzaría a tener implicaciones de rendimiento a medida que la aplicación crezca? Sé que para 0.5 había un estilo básico, pero parece innecesario que las importaciones funcionen igual de bien.

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>

Answer 1

A partir de Polymer 1.1, los autores del proyecto de polímeros recomiendan crear e importar un módulo de estilo para abordar este problema.

Para compartir declaraciones de estilo entre elementos, puede empaquetar un conjunto de declaraciones de estilo dentro de un elemento. En esta sección, los estilos de espera se denominan módulos de estilo por conveniencia.

Un módulo de estilo declara un conjunto de reglas de estilo con nombre que se pueden importar en una definición de elemento o en un elemento de estilo personalizado.

Ver más: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

Answer 2

Como se sugirió en la discussion sobre el problema registrado en Chrome para desaprobar / profundo / y :: selectores de sombra:

digamos que sus estilos comunes están en un archivo llamado

common-style.css

En su componente tenga una etiqueta de estilo que sea así

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

Esto invierte el control: en lugar de transmitir sus estilos para que cualquiera los use, los consumidores de estilos deben saber qué estilos desean y solicitarlos activamente, lo que ayuda a evitar conflictos. Con el almacenamiento en caché del navegador, esencialmente no hay penalización para tantas importaciones, de hecho, es probable que sea más rápido que poner en cascada los estilos a través de múltiples árboles de sombra utilizando perforadores.

Puede crear un style.css e importarlo en sus componentes poniendo un css @import en su plantilla. No habrá múltiples llamadas de red, ya que el navegador lo almacenará en caché cuando se cargue su primer componente y para los componentes posteriores se seleccionará del caché.

Hemos estado usando componentes web en nuestras aplicaciones de producción durante un tiempo usando esta técnica desde que / deep / ha quedado en desuso y no ha habido ninguna diferencia significativa en el rendimiento.

Answer 3

Comparta estilos creando un dom-module para ellos, al igual que otros elementos personalizados. Para incluir los estilos compartidos en un elemento personalizado, use <style include="style-module-name"> . Ejemplo completo a continuación.

shared-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>

Answer 4

Puede usar los estilos compartidos de Polymer. Crea un documento con tus estilos:

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

Y luego importe esto a sus elementos y en sus definiciones agregue include="shared-styles" a la etiqueta <style> .