Polymer: CSS y cómo renderizar elementos dentro del componente web


Muy buenas a todos,

En una entrada anterior, os contaba cómo podríamos usar este framework para crear un componente web que fuese fácilmente reutilizable. Os contaba también, algunos de los aspectos básicos de funcionamiento de Polymer para dotar a ese componente web de atributos y el binding que incorpora el framework y las oportunidades que nos ofrece.

Introducción a Polymer. Mi primer componente web

Hoy os quiero contar otras dos funcionalidades relevantes que nos ofrece este framework Javascript en un breve post, y que espero que junto con el anterior os aporte un conocimiento más profundo sobre el uso de esta herramienta para desarrollo web.

¿Podemos estilar nuestro componente web?

Pues la respuesta es si, podemos añadir código CSS para estilar el componente. Para ver cómo hacerlo voy a utilizar el componente que había creado en el post anterior y le voy a añadir código CSS.

<polymer-element name="example-polymer" attributes="attr1 attr2">
	<template>
		<style>
			:host
			{
				width:50%;
				margin-left:25%;
				margin-top:5%;
				background-color:#DDD;
				display: block;
				padding: 1em;
			}

			h1
			{
				color:red;
			}

			.ejemploClase
			{
				color:blue;
				cursor:pointer;
			}
		</style>
		<h1>Esto es un ejemplo de uso de Polymer</h1>
		<p>{{attr1}}</p>
		<input type="text" value="{{attr2}}" />

		<h2>Usando el binding</h2>
		<p class="ejemploClase">Ejemplo de binding {{attr2}}</p>
	</template>
	<script>
		Polymer({
			attr2Changed: function(){
				if(this.attr2.length == 11)
					console.log("Esta es una cadena de 11 caracteres");
			}
		});
	</script>
</polymer-element>

Aquí hay solo un aspecto importante que destacar y es el uso de la pseudo-clase :host en el CSS. Esta clase hace referencia a la raíz del componente web, es decir, al propio componente web. Además de esto, podemos definir los estilos y clases de CSS como habitualmente lo hacemos, con la única salvedad de que solo afectarán a los elementos en el interior del componente. Vamos a ver el resultado de aplicar estos estilos.

Captura de pantalla 2015-01-24 a las 18.30.26

¿Cómo puedo renderizar elementos insertados dentro de mi componente web?

Volviendo al ejemplo del post anterior, se nos puede ocurrir, como hacemos con cualquier etiqueta del HTML estándar, hacer algo como lo siguiente:

<example-polymer attr1="Ejemplo" attr2="Otro ejemplo">
	<h3>Ejemplo</h3>
</example-polymer>

Si probamos este código, observaremos que no funciona correctamente, es decir, el navegador no renderiza los elementos hijos del componente web, lo que se traduce en que el tag h3 no se ve en nuestro navegador. ¿Quiere decir esto que no puedo insertar elementos dentro del componente web?, pues no. Podemos hacerlo, pero para ello tenemos que crear lo que se conoce en Polymer como Insertion Points, lo que le dirá al navegador donde tiene que renderizar los hijos en nuestro componente.

<polymer-element name="example-polymer" attributes="attr1 attr2">
	<template>
		<style>
			:host
			{
				width:50%;
				margin-left:25%;
				margin-top:5%;
				background-color:#DDD;
				display: block;
				padding: 1em;
			}

			h1
			{
				color:red;
			}

			.ejemploClase
			{
				color:blue;
				cursor:pointer;
			}
		</style>
		<h1>Esto es un ejemplo de uso de Polymer</h1>
		<p>{{attr1}}</p>
		<input type="text" value="{{attr2}}" />

		<h2>Usando el binding</h2>
		<p class="ejemploClase">Ejemplo de binding {{attr2}}</p>
                <content select="h3"></content>
	</template>
	<script>
		Polymer({
			attr2Changed: function(){
				if(this.attr2.length == 11)
					console.log("Esta es una cadena de 11 caracteres");
			}
		});
	</script>
</polymer-element>

Para crear lo que hemos denominado Insertion Points, utilizamos el tag content y en el atributo select indicamos la etiqueta que queramos. Con esto, estamos indicándole a Polymer que en el caso de que haya un nodo hijo con la etiqueta h3, se renderice en ese lugar. Si volvemos ahora a usar el componente web como dijimos anteriormente veremos el resultado que nos da, y como ahora si renderiza la etiqueta h3

Captura de pantalla 2015-01-24 a las 18.48.01

¿Puedo estilar esos elementos renderizados por medio de <content>?

Nuevamente la respuesta es si. Para ello haremos uso de la siguiente estructura dentro del style del componente

polyfill-next-selector { content: 'h3'; }
::content h3 {
     color: green;
}

con la pseudo-clase ::content se selecciona un Insertion Point (creado por el tag content), y con ::content h3 se selecciona cualquier h3 definido a través de content como Insertion Point.

Para los navegadores que no soportan Shadow DOM se utiliza la regla polyfill-next-selector, para indicarle cómo proceder con la pseudo-clase ::content.

Si nuevamente probamos nuestro código, vemos que el estilo se ha aplicado correctamente.

Captura de pantalla 2015-01-24 a las 19.07.18

Y esto es todo por hoy, espero que os sirva de utilidad para conocer en más profundidad formas de trabajar con Polymer. Próximamente, veremos cómo usar modelos dentro de un componente Polymer.

Un saludo a todos, buen fin de semana

Anuncios

Un comentario en “Polymer: CSS y cómo renderizar elementos dentro del componente web

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s