polymer: 6. estilos

Cómo se trabajan con polymer las css

Vincent Van Gogh

archivado en: JavaScript / 24 febrero, 2016 / taller:

En esta entrada veremos cómo trabajar las css de los web components polymerescos y para eso vamos a preparar un listado de fichas, que en este ejemplo son de libros, pero que podéis preparar con lo que más os guste: películas, canciones, pokemons...

Luego lo complicaremos, pero de momento nuestro componente será muy sencillo. En un subdirectorio que podemos llamar components creamos otro denominado book-list y ahí creamos un archivo html con el mismo nombre que apenas es una lista con contents, que recordemos servían para incorporar contenido del dom-light. Algo así:

./components/book-list/book-list.html

<dom-module id="book-list">

<template>

<article>

<header>

<content select="#title"></content>

</header>

<div>

<ul>

<li>

<content select="#author"></content>

</li>

<li>

<content select="#location"></content>, <content select="#year"></content>

</li>

<li>

<content select="#category"></content>

</li>

</ul>

</div>

</article>

</template>

<script>

Polymer({

is: "book-list"

});

</script>

</dom-module>

Ahora, en otro archivo que podemos llamar demo.html, insertamos nuestro componente y le pasamos unos primeros datos.

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<title>Web Components</title>

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="import" href="bower_components/polymer/polymer.html">

<link rel="import" href="components/book-list/book-list.html">

</head>

<body>

<book-list>

<span id="title">La conjura de los necios</span>

<span id="author">John Kennedy Toole</span>

<span id="location">Baton Rouge (Luisiana)</span>

<span id="year">1980</span>

<span id="category">novela</span>

</book-list>

</body>

</html>

Claro está, sin estilo alguno, de momento nuestro componente es apenas un esqueleto de lo más feúcho.

wc-lib00

Vamos a arreglarlo, pero antes una advertencia: la encapsulación de las css en el dom de un web component es muy compleja, como vimos cuando hablé de los web components en general, por lo que el equipo de polymer ha dado varios bandazos sobre su tratamiento de versión en versión. Por lo tanto, es importante avisar que en el momento de escribir estas líneas estoy basándome en la versión 1.2, cuya longevidad desconozco.

Encapsular con host:

Lo primero que podríamos hacer es darle un estilo a la cabecera del componente, al título del libro, a la que añadimos una clase:

<header class="main-titles">

<content select="#title"></content>

</header>

La clase main-titles definirá, por ejemplo, una regla para el color, otra para el tamaño de la fuente, que sea en negrita y que además se muestre en versalitas.

<dom-module id="book-list">

<template>

<style>

.main-titles {

font-weight: bold;

font-size: 1.2em;

font-variant: small-caps;

color: #a204ba;

}

</style>

...

Si colocamos tal cual esta regla, polymer no la encapsula en un #shadow root normal, sino que la convierte en un selector que combina dos clases, una es la que hemos definido y otra con el nombre del componente, que a su vez inyecta de forma automática en el tag.

wc-lib01

 

Aunque no es una encapsulación real, al menos algo hace, pero lo cierto es que el componente sigue estando demasiado expuesto, pues si en otro sitio tuviéramos esa misma combinación de clases, tendríamos un problema. Por fortuna contamos con :host, un selector raíz que equivale al body, pero referido al componente. Así, por ejemplo, si pusiéramos esta regla directamente en :host, todo el componente se mostraría en una fuente verdana.

:host {

font-family: 'Verdana';

}

Esto, insisto, equivaldría a aplicar una regla directamente al body.

body {

font-family: 'Verdana';

}

Y lo bueno es que podemos combinar este pseudoselector con los demás selectores del componente para pseudo-encapsulizarlo aún más. Volviendo a nuestro titular:

:host .main-titles {

font-weight: bold;

...

Lo cual se convierte en una regla que solo se rompe si tuviéramos esa intención, pues estaría precedida por el nombre del componente, que se supone que sí que es único en toda la página o aplicación web.

book-list .main-titles.book-list {

font-weight: bold;

font-size: 1.2em;

...

Ojo, el uso del pseudo-selector ::shadow se considera deprecated en polymer y se recomienda encarecidamente no usarlo.

Variables y mixins

Si nunca hemos usado algún preprocesador css, lo que sigue nos sonará a chino, pero lo cierto es que hace ya tiempo que podemos usar variables en las css. Es más, existe ya una propuesta experimental para usar variables de forma nativa, aunque todavía está muy verde. Polymer usa un shim, una librería pequeña para hacer apaños, que permite utilizar una variante muy parecida al futuro estándar. Esto es:

1. Las variables se declaran precedidas por dos guiones.

--miVariable: miValor

2. Luego se invocan como si fuera un parámetro de una función denominada var.

var(miVariable)

Por ejemplo, vamos a definir una variable con el color corporativo de nuestro componente y luego la vamos a utilizar para definir el color de los datos de la ficha.

<style>

:host {

font-family: 'Verdana';

--brand-color: #666;

}

:host li {

color: var(--brand-color);

}

...

Esto de las variables podría parecernos una frivolidad, pues un componente es por definición una pieza pequeña que no necesita mayores alaracas, sin embargo, como veremos más adelante, es fundamental usarlas cuando el componente se va a usar en distintos proyectos, pues es la manera correcta de tunear las css desde fuera, tal y como explica Monica Dinculescu.

Además, polymer permite aplicar mixins, esto es, conjuntos de estilo agrupados bajo una variable-regla. Se definen normalmente:

:host {

--box-standar: {

border: 1px solid;

background: #ededed;

}

}

Y luego se heredan mediante @apply(nombre del mixin).

:host .box-grey {

@apply(--box-standar);

border-color: #ccc;

}

Para terminar este tema, indicar que las variables se pueden modificar de forma dinámica refiriéndose a ellas con la fórmula this.customStyle['nombre de la variable'] y lanzando luego el método updateStyles(). Por ejemplo:

...

<p>

<button on-tap="setClass">Cambiar la clase</button>

</p>

</template>

<script>

Polymer({

is: "book-list",

setClass: function() {

this.customStyle['--brand-color'] = 'red';

this.updateStyles();

}

});

</script>

Hojas de estilo compartidas

Lo normal es que trabajemos con varios componentes y que estos compartan estilos, como puede ser la fuente, los colores corporativos etcétera. Para eso, lo que se hace es crear un componente en el que se agrupan todas las reglas comunes. Luego se incorpora a los distintos componentes incluyéndolo como un componente más y añadiendo el atributo include a un <style>. Por ejemplo, vamos a sacar algunas reglas de nuestro componente y vamos a ponerlas en otro nuevo que podemos llamar sharred-style.html.

sharred-style.html

<dom-module id="sharred-style">

<template>

<style>

:host {

font-family: 'Verdana';

--brand-color: #666;

}

:host .main-titles {

font-weight: bold;

font-size: 1.2em;

font-variant: small-caps;

color: #a204ba;

}

</style>

</template>

<script>

Polymer({

is: "sharred-style"

});

</script>

</dom-module>

Y ahora lo enlazamos en nuestro componente:

<link rel="import" href="../style-theme.html">

<dom-module id="book-list">

<template>

<style include="sharred-style"></style>

<style>

:host li {

color: var(--brand-color);

}

</style>

...

Termino ya con un apunte breve, pues retomaré este tema más adelante, cuando veamos los componentes del catálogo de polymer. Como decía, la manera chula de modificar un estilo de un componente es seteando sus variables y para eso se usa la fórmula <style is="custom-style"></style>, la cual se sitúa en el head del documento principal o en un componente antes de los estilos que queramos modificar. Y estos estilos que vamos a pisar van precedidos del pseudoselelector :root. Este galimatías queda claro con un ejemplo.

Imaginemos que queremos usar nuestro componente de fichas, peeeeeero necesitamos que el texto sea azul en lugar de gris. Como está bien hecho, el color de la fuente es tuneable, ya que lo hemos definido en una variable (--brand-color), por lo que para modificarlo basta con escribir algo así:

<dom-module id="book-list">

<template>

<style is="custom-style">

:root {

--brand-color: blue;

}

</style>

...

Bueno, quedan cosas relacionadas con las css por explicar, pero me remito a la documentación del proyecto.

los ejemplos de esta entrada están en git

|| Tags: ,

valoración de los lectores sobre polymer: 6. estilos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (5 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario


*