En src/polymer-muestra-inicial-app/polymer-muestra-inicial-app.html, agrego un ligero estilo y una pequeña línea, de tal forma que el fichero queda de la siguiente forma:
<link href="../../bower_components/polymer/polymer-element.html" rel="import"></link>
<link href="/src/componentes/entradas/vt-entrada.html" rel="import"></link>
<link href="/src/componentes/etiquetas/vt-etiqueta.html" rel="import"></link>
<dom-module id="polymer-muestra-inicial-app">
<template>
<style>
:host {
display: block;
}
p,label {
background-color: aliceblue;
}
</style>
<h2>
Hello [[prop1]]!</h2>
<vt-entrada contenido="{{contenido}}"></vt-entrada>
<vt-etiqueta contenido="[[contenido]]"></vt-etiqueta>
Este es texto desde el componente padre polymer-muestra-inicial-app<br />
</template>
<script>
/**
* @customElement
* @polymer
*/
class PolymerMuestraInicialApp extends Polymer.Element {
static get is() { return 'polymer-muestra-inicial-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'polymer-muestra-inicial-app'
},
contenido:{
type: String,
value: 'Desde componente host'
}
};
}
}
window.customElements.define(PolymerMuestraInicialApp.is, PolymerMuestraInicialApp);
</script>
</dom-module>
Luego,
src/componentes/entradas/vt-entrada.html ha quedado de la siguiente forma: Y sí, sólo agregue un color de fondo y subrayado para el texto:<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<dom-module id="vt-entrada">
<template>
<style>
:host {
display: block;
}
p {
background-color: beige;
text-decoration: underline;
}
</style>
<input type="text" value="{{contenido::input}}">
<p> Este es nuestro contenido escribiente: [[contenido]]</p>
</template>
<script>
class VtEntrada extends Polymer.Element {
static get is() {
return 'vt-entrada';
}
static get properties() {
return {
contenido: {
type: String,
notify: true,
}
}
}
}
window.customElements.define(VtEntrada.is, VtEntrada);
</script>
</dom-module>
El resultado viene siendo elsiguiente:
- Los estilos no suben desde un componente hijo a un componente padre. Lo que se esperaba pues. Esto se puede demotrar mejor si se elimina el estilo en src/polymer-muestra-inicial-app/polymer-muestra-inicial-app.html
- Parece que los estilos no bajan desde el componente padre al componente hijo. Esto se puede demostrar si se elimina el estilo en src/componentes/entradas/vt-entrada.html
Primer instalamos Pure mediante bower de la siguiente forma:
bower install pure --saveLuego, modificamos a src/index.html ara agregar los estilos de Pure:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer-muestra-inicial</title>
<meta name="description" content="Breve descripción de mi persona">
<!-- See https://goo.gl/OOhYW5 -->
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/polymer-muestra-inicial-app/polymer-muestra-inicial-app.html">
<link rel="stylesheet" href="/bower_components/pure/base.css">
<link rel="stylesheet" href="/bower_components/pure/grids.css">
<link rel="stylesheet" href="/bower_components/pure/grids-responsive.css">
</head>
<body>
<polymer-muestra-inicial-app></polymer-muestra-inicial-app>
</body>
</html>
Y hacemos la maquetación dentro de polymer-muestra-inicial-app en src/polymer-muestra-inicial-app/polymer-muestra-inicial-app.html de la siguiente forma:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="/src/componentes/entradas/vt-entrada.html">
<link rel="import" href="/src/componentes/etiquetas/vt-etiqueta.html">
<dom-module id="polymer-muestra-inicial-app">
<template>
<style>
:host {
display: block;
}
p,label {
background-color: aliceblue;
}
</style>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-2-5">
<h2>Hello [[prop1]]!</h2>
</div>
<div class="pure-u-1 pure-u-md-3-5">
<vt-entrada contenido="{{contenido}}"></vt-entrada>
<vt-etiqueta contenido="[[contenido]]"></vt-etiqueta>
<p>Este es texto desde el componente padre polymer-muestra-inicial-app</p>
</div>
</div>
</template>
<script>
/**
* @customElement
* @polymer
*/
class PolymerMuestraInicialApp extends Polymer.Element {
static get is() { return 'polymer-muestra-inicial-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'polymer-muestra-inicial-app'
},
contenido:{
type: String,
value: 'Desde componente host'
}
};
}
}
window.customElements.define(PolymerMuestraInicialApp.is, PolymerMuestraInicialApp);
</script>
</dom-module>
Que ahora se ve de la siguiente forma:
