Polímero - Guía rápida
Polymer.js es una biblioteca de JavaScript creada por Google que permite reutilizar los elementos HTML para construir aplicaciones con componentes.
Polymer es una biblioteca JavaScript de código abierto desarrollada por los desarrolladores de Google y se lanzó inicialmente el 27 de mayo de 2015. La versión estable es 1.7.0 y se lanzó el 29 de septiembre de 2016.
¿Por qué utilizar Polymer.js?
Permite crear nuestros propios elementos personalizados fácilmente usando HTML, CSS y JavaScript para agregar interacciones al elemento.
Es creado por Google que proporciona aplicaciones compatibles con varios navegadores junto con los componentes web.
Proporciona enlace de datos unidireccional y bidireccional.
Proporciona una interfaz de línea de comandos de Polymer para administrar los proyectos, desde componentes simples hasta aplicaciones web complicadas.
Características de Polymer.js
Es una biblioteca de JavaScript construida sobre las API de estándares web que permiten crear elementos HTML personalizados.
Proporciona los polyfills (especificaciones de componentes web) para crear nuestros propios elementos personalizados y reutilizables.
Utiliza los estándares de componentes web para la creación de widgets reutilizables en documentos web y aplicaciones web.
Utiliza el diseño de materiales de Google para el desarrollo de aplicaciones móviles híbridas.
Distribuye los elementos personalizados a través de la red y los usuarios pueden utilizar estos elementos con la ayuda de HTML Imports.
Es fácil configurar Polymer en su sistema. Las siguientes son las dos formas de instalar Polymer.
- La CLI de polímero (interfaz de línea de comandos)
- El Bower
Instalación de polímero mediante la CLI de polímero
Step 1 - Instale Polymer usando el siguiente comando npm.
npm install -g polymer-cli@nextStep 2 - Verifique la instalación y la versión correctas con el siguiente comando.
polymer --versionSi se ha instalado correctamente, mostrará la versión como:
Step 3 - Cree un directorio con el nombre de su elección y cambie a ese directorio.
mkdir polymer-js
cd polymer-jsStep 4- Para inicializar su proyecto, ejecute el siguiente comando en su directorio Polymer-js .
polymer initDespués de ejecutar el comando anterior, mostrará algo como esto:
C:\polymer-js>polymer init
? Which starter template would you like to use?
1) polymer-1-element - A simple Polymer 1.0 element template
2) polymer-2-element - A simple Polymer 2.0 element template
3) polymer-1-application - A simple Polymer 1.0 application template
4) polymer-2-application - A simple Polymer 2.0 application
5) polymer-1-starter-kit - A Polymer 1.x starter application template, with
navigation and "PRPL pattern" loading
6) polymer-2-starter-kit - A Polymer 2.x starter application template, with
navigation and "PRPL pattern" loading
7) shop - The "Shop" Progressive Web App demo
Answer: 4Step 5 - Seleccione la aplicación polímero-2 de las opciones dadas anteriormente.
Ahora, inicie su proyecto usando el siguiente comando.
polymer serveInstalación de polímero con Bower
Step 1 - Para comenzar desde cero usando el método Bower, instale el Bower usando el siguiente comando.
npm install -g bowerStep 2 - Instale el polímero usando el siguiente comando.
npm install -g polymer-cli@nextStep 3 - Verifique la instalación exitosa y la versión de Polymer, usando el siguiente comando.
polymer --versionSi se ha instalado correctamente, mostrará la versión como:
0.18.0-pre.13.Step 4 - Para instalar la última versión de Polymer 2.0 RC de bower, use el siguiente comando.
bower install Polymer/polymer#^2.0.0-rc.3Step 5 - Crea un index.html y agregue el siguiente código en la etiqueta <head>.
<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script>
// it loads the polyfills
<link rel = "import" href = "/bower_components/polymer/polymer.html">
// it import PolymerStep 6 - Inicie su proyecto usando el siguiente comando.
polymer serveConstruyendo para la implementación
Para construir su proyecto para su implementación, polymer build El comando es una forma más fácil, que minificará, compilará o agrupará su código según los indicadores de la línea de comando.
Para crear una compilación universal que funcione en todos los navegadores, use el siguiente comando.
polymer build --js-compileEl comando anterior construirá el proyecto para construir / predeterminado y puede iniciar este directorio, usando el siguiente comando.
polymer serve build/defaultPolymer 2.0 utiliza elementos personalizados ES6 y HTML. Para las mejores prácticas, siempre es bueno usar ES6 para navegadores con soporte completo de ES6 y compilar ES5 para navegadores antiguos que no son compatibles con ES6. La siguiente tabla muestra la mejor estrategia para su proyecto.
| Estrategia | Más fácil para la compatibilidad con varios navegadores | Más óptimo para el rendimiento de WC v1 |
|---|---|---|
| Servidor | Cualquier servidor funciona, incluidos los estáticos | Se requiere servicio diferencial |
| Código implementado | ES5 transpilado | ES6 |
| Cargador Polyfill | webcomponents-es5-loader.js | webcomponents-loader.js |
Los elementos poliméricos son un conjunto de elementos visuales y no visuales diseñados para trabajar con las aplicaciones de diseño, interacción del usuario, selección y andamios. Estos incluyen todo, desde un simple botón hasta un cuadro de diálogo con efectos visuales nítidos. La siguiente tabla muestra diferentes tipos de elementos poliméricos.
| No Señor. | Tipos y descripción |
|---|---|
| 1 | elementos de la aplicación Los elementos de la aplicación son útiles al crear aplicaciones completas. |
| 2 | elementos de hierro Estos son los componentes básicos para crear una aplicación. |
| 3 | elementos de papel Los elementos de papel son un conjunto de componentes de la interfaz de usuario diseñados para implementar las pautas de diseño de materiales de Google. |
| 4 | componentes web de google El componente web de Google es un stock de componentes web para las API y los servicios de Google. |
| 5 | elementos de oro Los elementos de oro están diseñados para casos de uso específicos de comercio electrónico. |
| 6 | elementos de neón Se utiliza para implementar transiciones animadas para elementos de polímero mediante animaciones web. |
| 7 | elementos de platino Los elementos platino brindan características para convertir su página web en una verdadera aplicación web. |
| 8 | elementos de moléculas El elemento molécula ayuda a desarrollar una aplicación fácilmente y se utiliza para conectar un grupo de complementos a la aplicación Polymer. |
Polymer es un marco que permite crear elementos personalizados utilizando elementos HTML estándar. Los elementos web personalizados proporcionan las siguientes características:
Proporciona un nombre de elemento personalizado con la clase de asociación.
Cuando cambie el estado de la instancia del elemento personalizado, solicitará las devoluciones de llamada del ciclo de vida.
Si cambia los atributos en una instancia, se solicitará la devolución de llamada.
Puede definir el elemento personalizado utilizando la clase ES6 y la clase se puede asociar con el elemento personalizado como se muestra en el siguiente código.
//ElementDemo class is extending the HTMLElement
class ElementDemo extends HTMLElement {
// code here
};
//link the new class with an element name
window.customElements.define('element-demo', ElementDemo);El elemento personalizado se puede utilizar como un elemento estándar como se muestra a continuación:
<element-demo></element-demo>Note - El nombre del elemento personalizado debe comenzar con una letra minúscula y contener un guión entre los nombres.
Ciclo de vida del elemento personalizado
El ciclo de vida del elemento personalizado proporciona un conjunto de reacciones del elemento personalizado que son responsables del cambio en el ciclo de vida del elemento y se definen en la siguiente tabla.
| No Señor. | Reacciones y descripción |
|---|---|
| 1 | constructor Cuando crea un elemento o define el elemento creado previamente, se llamará a esta reacción de elemento. |
| 2 | connectedCallback Cuando agrega un elemento a un documento, se llamará a esta reacción de elemento. |
| 3 | disconnectedCallback Cuando elimina un elemento de un documento, se llamará a esta reacción de elemento. |
| 4 | attributeChangedCallback Siempre que cambie, agregue, elimine o reemplace un elemento de un documento, se llamará a esta reacción de elemento. |
Actualizaciones de elementos
Podemos usar elementos personalizados antes de definirlos por especificación y cualquier instancia existente de un elemento se actualizará a la clase personalizada agregando una definición a ese elemento.
El estado del elemento personalizado contiene los siguientes valores:
uncustomized - El nombre de elemento personalizado válido es un elemento integrado o un elemento desconocido, que no puede convertirse en un elemento personalizado.
undefined - El elemento puede tener un nombre de elemento personalizado válido, pero no se puede definir.
custom - El elemento puede tener un nombre de elemento personalizado válido, que se puede definir y actualizar.
failed - Intentando actualizar el elemento fallido de una clase no válida.
Definición de un elemento
Un elemento personalizado se puede definir creando una clase que amplíe Polymer.Element y pasa la clase al método customElements.define. La clase contiene un método getter que devuelve un nombre de etiqueta HTML del elemento personalizado. Por ejemplo
//ElementDemo class is extending the Polymer.Element
class ElementDemo extends Polymer.Element {
static get is() { return 'element-demo'; }
static get properties() {
. . .
. . .
}
constructor(){
super();
. . .
. . .
}
. . .
. . .
}
//Associate the new class with an element name
window.customElements.define(ElementDemo.is, ElementDemo);
// create an instance with createElement
var el1 = document.createElement('element-demo');Importaciones y API
Los elementos de polímero se pueden definir especificando las siguientes tres importaciones de HTML:
polymer-element.html - Especifica la clase base Polymer.Element.
legacy-element.html- Extiende Polymer.Element usando la clase base Polymer.LegacyElement y agrega API heredada compatible con 1.x. También crea elementos híbridos definiendo el método de fábrica heredado de Polymer ().
polymer.html - Comprende las clases base de polímero junto con elementos auxiliares, que se incluyeron en el polímero 1.x.html.
Definir un elemento en el documento HTML principal
Puede definir un elemento en el documento HTML principal utilizando la función HTMLImports.whenReady ().
Ejemplo
El siguiente ejemplo muestra cómo definir un elemento en el documento HTML principal. Cree un archivo index.html y agregue el siguiente código.
<!doctype html>
<html lang = "en">
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "define-element.html">
</head>
<body>
<define-element></define-element>
</body>
</html>Ahora cree un elemento personalizado llamado define-element.html e incluya el siguiente código.
<dom-module id = "define-element">
<template>
<h2>Welcome to Tutorialspoint!!!</h2>
</template>
<script>
HTMLImports.whenReady(function(){
Polymer ({
is: "define-element"
})
})
</script>
</dom-module>Salida
Para ejecutar la aplicación, navegue hasta el directorio del proyecto creado y ejecute el siguiente comando.
polymer serveAhora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.
Definir un elemento heredado
El elemento heredado se puede usar para registrar un elemento usando la función Polymer, que toma el prototipo de un nuevo elemento. El prototipo debe conteneris que define el nombre de la etiqueta HTML para un elemento personalizado.
Ejemplo
//registering an element
ElementDemo = Polymer ({
is: 'element-demo',
//it is a legecy callback, called when the element has been created
created: function() {
this.textContent = 'Hello World!!!';
}
});
//'createElement' is used to create an instance
var myelement1 = document.createElement('element-demo');
//use the constructor create an instance
var myelement2 = new ElementDemo();Devoluciones de llamada del ciclo de vida
Las devoluciones de llamada del ciclo de vida se utilizan para realizar las tareas de las funciones integradas de Polymer.Elementclase. Polymer usa devolución de llamada lista, que se invocará cuando Polymer complete la creación e inicialización de elementos DOM.
A continuación se muestra una lista de devoluciones de llamada heredadas en Polymer.js.
created - Se llama cuando crea un elemento antes de establecer los valores de propiedad e inicializar el DOM local.
ready - Se llama cuando crea un elemento después de establecer los valores de propiedad e inicializar el DOM local.
attached - Se llama después de adjuntar el elemento al documento y se puede llamar más de una vez durante la vida útil de un elemento.
detached - Se llama después de separar el elemento del documento y se puede llamar más de una vez durante la vida útil de un elemento.
attributeChanged - Se llama cuando hay cambios en los atributos de un elemento y contiene los cambios de atributo, que no son compatibles con las propiedades declaradas.
Declaración de propiedades
Las propiedades se pueden declarar en un elemento para agregar un valor predeterminado y otras características específicas en el sistema de datos y se pueden usar para especificar las siguientes características:
Especifica el tipo de propiedad y el valor predeterminado.
Llama al método del observador cuando hay cambios en el valor de la propiedad.
Especifica el estado de solo lectura para detener los cambios inesperados en el valor de la propiedad.
Proporciona soporte para el enlace de datos bidireccional, que desencadena un evento cuando cambia los valores de propiedad.
Es una propiedad calculada, que calcula un valor dinámicamente dependiendo de las otras propiedades.
Actualiza y refleja el valor de atributo correspondiente, cuando cambia los valores de propiedad.
La siguiente tabla muestra claves para cada propiedad, que son compatibles con el objeto de propiedades.
| No Señor. | Clave y descripción | Tipo |
|---|---|---|
| 1 | type Deserializa a partir de un atributo cuyo tipo de propiedad se determina utilizando el constructor del tipo. |
constructor (booleano, fecha, número, cadena, matriz u objeto) |
| 2 | value Especifica el valor predeterminado de la propiedad y, si es una función, utiliza el valor de retorno como valor predeterminado de la propiedad. |
booleano, número, cadena o función. |
| 3 | reflectToAttribute Si esta clave se establece en verdadero, entonces establece el atributo correspondiente en el nodo host. El atributo se puede crear como un atributo booleano HTML estándar, si establece el valor de la propiedad como booleano. |
booleano |
| 4 | readOnly No puede establecer la propiedad directamente mediante asignación o enlace de datos, si esta clave se establece en true. |
booleano |
| 5 | notify Puede usar la propiedad para el enlace de datos bidireccional, si esta clave se establece en verdadera y cuando cambia la propiedad, se activará el evento de cambio de nombre de propiedad. |
booleano |
| 6 | computed Puede calcular el valor de un argumento siempre que cambie, invocando el método y el valor se simplificará como nombre del método y lista de argumentos. |
cuerda |
| 7 | observer Invoque el nombre del método, que se simplifica mediante un valor, cuando cambia el valor de la propiedad. |
cuerda |
Deserialización de atributos
Deserialice el nombre de la propiedad que coincide con un atributo en la instancia según el tipo especificado y el mismo nombre de propiedad en la instancia del elemento, si la propiedad está configurada en el objeto de propiedades.
Puede establecer el tipo especificado directamente como el valor de la propiedad, si no hay otras opciones de propiedades definidas en el objeto de propiedades; de lo contrario, proporcionará el valor a la clave de tipo en el objeto de configuración de propiedades.
Configurar propiedades booleanas
La propiedad booleana se puede configurar desde el marcado, configurándola en falso y, si se establece en verdadero, no se puede configurar desde el marcado porque el atributo con o sin un valor se iguala a verdadero. Por lo tanto, se conoce como comportamiento estándar para atributos en la plataforma web.
Las propiedades del objeto y la matriz se pueden configurar pasándolas en formato JSON como:
<element-demo player = '{ "name": "Sachin", "country": "India" }'></element-demo>Configuración de valores de propiedad predeterminados
La propiedad predeterminada se puede configurar utilizando el campo de valor en el objeto de propiedades y puede ser un valor primitivo o una función que devuelve un valor.
Ejemplo
El siguiente ejemplo muestra cómo configurar los valores de propiedad predeterminados en el objeto de propiedades.
<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">
//it specifies the start of an element's local DOM
<dom-module id="polymer-app">
<template>
<style>
:host {
color:#33ACC9;
}
</style>
<h2>Hello...[[myval]]!</h2>
</template>
<script>
//cusom element extending the Polymer.Element class
class PolymerApp extends Polymer.Element {
static get is() { return 'polymer-app'; }
static get properties() {
return {
myval: {
type: String,
//displaying this value on screen
value: 'Welcome to Tutorialspoint;!!!'
},
data: {
type: Object,
notify: true,
value: function() { return {}; }
}
}
}
}
window.customElements.define(PolymerApp.is, PolymerApp);
</script>
</dom-module>Salida
Ejecute la aplicación como se muestra en el ejemplo anterior y navegue hasta http://127.0.0.1:8000/. Lo siguiente será la salida.
Propiedades de solo lectura
Puede evitar cambios inesperados en los datos producidos estableciendo el indicador readOnly en verdadero, en el objeto de propiedades. Element usa el establecedor de la convención _setProperty (value), para cambiar el valor de la propiedad.
Ejemplo
El siguiente ejemplo muestra el uso de propiedades de solo lectura en el objeto de propiedades. Cree un archivo index.html y agregue el siguiente código en él
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>Ahora, cree otro archivo llamado my-element.html e incluya el siguiente código.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "my-element">
<template>
<prop-element my-prop = "{{demoProp}}"></prop-element>
<p>Present value: <span>{{demoProp}}</span></p>
</template>
<script>
Polymer ({
is: "my-element", properties: {
demoProp: String
}
});
</script>
</dom-module>A continuación, cree un archivo más llamado prop-element.html y agregue el siguiente código.
//it specifies the start of an element's local DOM
<dom-module id="prop-element">
<template>
<button on-click="onClickFunc">Change value</button>
</template>
<script>
Polymer ({
is: "prop-element", properties: {
myProp: {
type: String,
notify: true,
readOnly: true,
value: 'This is initial value...'
}
},
onClickFunc: function(){
this._setMyProp('This is new value after clicking the button...');
}
});
</script>
</dom-module>Salida
Ejecute la aplicación como se muestra en el ejemplo anterior y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.
Después de hacer clic en el botón, cambiará el valor como se muestra en la siguiente captura de pantalla.
Reflejo de propiedades en atributos
El atributo HTML se puede sincronizar con el valor de la propiedad configurando el reflectToAttribute a verdadero en una propiedad en el objeto de configuración de propiedades.
Serialización de atributos
El valor de la propiedad se puede serializar al atributo, mientras refleja o vincula una propiedad a un atributo y, de forma predeterminada, los valores se pueden serializar según el tipo actual del valor.
String - No hay necesidad de serialización.
Date or Number - Utilice toString para serializar los valores.
Boolean - Establezca el atributo no valorado mostrado como verdadero o falso.
Array or Object - Utilice JSON.stringify para serializar el valor.
Shadow DOM es una nueva propiedad de DOM utilizada para construir componentes.
Example
En el siguiente código, el componente de encabezado incluye el título de la página y el botón de menú.
<header-demo>
<header>
<h1>
<button>Shadow DOM permite ubicar a los niños en un subárbol con ámbito, que se conoce como shadow tree.
<header-demo>
#shadow-root
<header>
<h1>
<button>La raíz de la raíz de la sombra se llama como la parte superior del árbol de la sombra y el elemento que se adjunta al árbol se llama host de la sombra (encabezado-demo). Este host de sombra incluye una propiedad llamada shadowRoot, que especifica la raíz de sombra. La raíz de sombra identifica el elemento de host mediante una propiedad de host.
Shadow DOM y composición
El árbol de sombra se puede representar en lugar de los elementos secundarios del elemento, si hay un elemento en el DOM de sombra. Los elementos secundarios del elemento se pueden representar agregando el elemento <slot> al árbol de sombra.
Por ejemplo, use el siguiente árbol de sombras para <header-demo>.
<header>
<h1><slot></slot></h1>
<button>Menu</button>
</header>Agregue los hijos al elemento <my-header> como -
<header-demo>Shadow DOM</header-demo>El encabezado reemplaza el elemento </slot> con los elementos secundarios especificados anteriormente como -
<header-demo>
<header>
<h1>Shadow DOM</h1>
<button>Menu</button>
</header>
</header-demo>Contenido de reserva
El contenido de reserva se puede mostrar cuando no hay nodos asignados a la ranura. Por ejemplo
<my-element>
#shadow-root
<slot id = "myimgicon">
<img src = "img-demo.png">
</slot>
<slot></slot>
<my-element>Puede proporcionar su propio icono para un elemento como:
<my-element>
<img slot = "myimgicon" src = "warning.png">
<my-element>Distribución multinivel
Puede asignar el elemento de ranura a una ranura, lo que se conoce como distribución multinivel.
Por ejemplo, tome dos niveles de un árbol de sombras como se muestra a continuación:
<parent-element>
#shadow-root
<child-element>
<!-- display the light DOM children of parent-element inside child-element -->
<slot id = "parent-slot">
<child-element>
#shadow-root
<div>
<!-- Render the light DOM children inside div by using child-element -->
<slot id = "child-slot">Considere el siguiente código:
<parent-element>
<p>This is light DOM</p>
<parent-element>La estructura de un árbol aplanado se parece a la siguiente.
<parent-element>
<child-element>
<div>
<slot id = "child-slot">
<slot id = "parent-slot">
<p>This is light DOM</p>Shadow DOM utiliza las siguientes API de ranuras para verificar la distribución:
HTMLElement.assignedSlot - Asigna la ranura para un elemento y devuelve nulo, si no hay asignación de un elemento a una ranura.
HTMLSlotElement.assignedNodes - Proporciona la lista de nodos junto con la ranura y devuelve los nodos distribuidos, cuando establece la opción aplanar en verdadero.
HTMLSlotElement.slotchange - Este evento se activa cuando hay cambios en los nodos distribuidos de la ranura.
Retargeting de eventos
Especifica el destino del evento en el que el elemento se puede representar en el mismo ámbito que el elemento de escucha. Proporciona un evento de un elemento personalizado, que parece provenir de la etiqueta del elemento personalizado, a diferencia de un elemento dentro.
Example
El siguiente ejemplo muestra el uso de retargeting de eventos en Polymer.js. Cree un archivo llamado index.html y coloque el siguiente código en él.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "retarget-event.html">
</head>
<body>
<template id = "myapp" is = "dom-bind">
<retarget-event on-tap = "clicky"></retarget-event>
</template>
<script>
var myval = document.querySelector('#myapp');
myval.clicky = function(e) {
console.log("The retargeted result:", Polymer.dom(myval));
console.log("Normal result:", e);
};
</script>
</body>
</html>Ahora, cree otro archivo llamado retarget-event.html e incluya el siguiente código.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "retarget-event">
<template>
<span>Click on this text to see result in console...</span>
</template>
<script>
Polymer ({
is: 'retarget-event',
});
</script>
</dom-module>Output
Para ejecutar la aplicación, navegue hasta el directorio del proyecto creado y ejecute el siguiente comando.
polymer serveAhora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.
Haga clic en el texto anterior y abra la consola para ver un evento reorientado como se muestra en la siguiente captura de pantalla.
Estilo Shadow DOM
Puede diseñar el DOM de sombra utilizando las propiedades de estilo, que heredan del host al árbol de sombra.
Example
<style>
.mydemo { background-color: grey; }
</style>
<my-element>
#shadow-root
<style>
//this div will have blue background color
div { background-color: orange; }
</style>
<div class = "mydemo">Demo</div>Plantillas DOM
El subárbol DOM se puede crear para un elemento utilizando la plantilla DOM. Puede crear la raíz de sombra para el elemento y copiar la plantilla en un árbol de sombra agregando la plantilla DOM a un elemento.
La plantilla DOM se puede especificar de dos formas:
Cree un elemento <dom-module>, que debe coincidir con el nombre de un elemento junto con un atributo id.
Defina un elemento <template> dentro del <dom-module>.
Example
<dom-module id = "my-template">
<template>I am in my template!!!</template>
<script>
class MyTemplate extends Polymer.Element {
static get is() { return 'my-template' }
}
customElements.define(MyTemplate.is, MyTemplate);
</script>
</dom-module>Aplicar estilo a la sombra DOM de un elemento
Shadow DOM permite diseñar los elementos personalizados utilizando propiedades de estilo como fuentes, colores de texto y clases, sin aplicarlo fuera del alcance de su elemento.
Diseñemos el elemento anfitrión usando el :hostselector (un elemento adjunto a la sombra DOM se llama como el host). Cree un archivo llamado polímero-app.html y agregue el siguiente código en él.
<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">
<dom-module id = "polymer-app">
<template>
<style>
:host {
color:#33ACC9;
}
</style>
<h2>Hello...[[myval]]!</h2>
</template>
<script>
class PolymerApp extends Polymer.Element {
static get is() { return 'polymer-app'; }
static get properties() {
return {
myval: {
type: String, value: 'Welcome to Tutorialspoint!!!'
}
};
}
}
window.customElements.define(PolymerApp.is, PolymerApp);
</script>
</dom-module>Ejecute la aplicación como se muestra en el capítulo anterior y navegue hastahttp://127.0.0.1:8000/. Lo siguiente será la salida.
Estilo de contenido ranurado
Es posible crear slots en la plantilla de un elemento, que están ocupados en tiempo de ejecución.
Example
El siguiente ejemplo muestra el uso de contenido ranurado en la plantilla del elemento. Cree un archivo index.html y agregue el siguiente código en él.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "slotted-content.html">
</head>
<body>
<slotted-content>
<div slot = "text">This is Polymer.JS Slotted Content Example</div>
</slotted-content>
</body>
</html>Ahora cree otro archivo llamado slotted-content.html e incluya el siguiente código.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<dom-module id = "slotted-content">
<template>
<style>
::slotted(*) {
font-family: sans-serif;
color:#E94A9D;
}
</style>
<h2>Hello...[[prop1]]</h2>
<h3>
<div><slot name='text'></slot></div>
</h3>
</template>
<script>
Polymer ({
is: 'slotted-content', properties: {
prop1: {
type: String,
value: 'Welcome to Tutorialspoint!!',
},
},
});
</script>
</dom-module>Ejecute la aplicación como se muestra en el ejemplo anterior y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.
Usar módulos de estilo
Puede compartir los estilos entre elementos junto con módulos de estilo. Especifique los estilos en el módulo de estilo y compártalos entre los elementos.
Example
El siguiente ejemplo muestra cómo utilizar el módulo de estilo entre los elementos. Cree un archivo index.html y agregue el siguiente código en él.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "style-module.html">
</head>
<body>
<style-module></style-module>
</body>
</html>Cree otro archivo llamado style-module.html con el siguiente código.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<dom-module id = "style-module">
<template>
<!-- here, including the imported styles from colors-module page -->
<style include="colors-module"></style>
<style>
:host {
font-family: sans-serif;
color: green;
}
</style>
<h2>Hello...[[prop1]]</h2>
<p class = "color1">Sharing styles with style modules 1...</p>
<p class = "color2">Sharing styles with style modules 2...</p>
<p class = "color3">Sharing styles with style modules 3...</p>
</template>
<script>
Polymer ({
is: 'style-module', properties: {
prop1: {
type: String, value: 'Welcome to Tutorialspoint!!',
},
},
});
</script>
</dom-module>Ahora, cree un archivo más llamado colors-module.html , que proporciona los módulos de estilo a los elementos como se muestra en el siguiente código.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<dom-module id = 'colors-module'>
<template>
<style>
p.color1 {
color: #EA5AA5;
}
p.color2 {
color: #4B61EA;
}
p.color3 {
color: #D3AA0A;
}
</style>
</template>
</dom-module>Ejecute la aplicación y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.
Usar propiedades personalizadas
Las propiedades CSS personalizadas se pueden usar para diseñar la apariencia del elemento en su aplicación usando el elemento Polymer. Las propiedades personalizadas proporcionan variables CSS en cascada, que se pueden usar fuera del entorno de elementos personalizados que evitan que los datos de estilo se esparzan por una hoja de estilo.
Las propiedades personalizadas se pueden definir de forma similar a las propiedades CSS estándar, que heredan del árbol DOM compuesto. En el ejemplo anterior, puede ver las propiedades CSS personalizadas definidas para los elementos.
Según la herencia CSS, si no hay un estilo definido para un elemento, heredará el estilo de su padre como se muestra en el siguiente código.
<link rel = "import" href = "components/polymer/myelement-style.html">
<myelement-style>
<style is = "myelement-style">
p {
color: var(--paper-red-900);
}
paper-checkbox {
--paper-checkbox-checked-color: var(--paper-red-900);
}
</style>
</myelement-style>
<body>
<p><paper-checkbox>Check Here</paper-checkbox></p>
</body>Los eventos son utilizados por los elementos que pueden comunicarse con los cambios de estado del árbol DOM a los elementos principales y utilizan las API DOM estándar para crear, enviar y escuchar eventos. losannotated event listeners son utilizados por Polymer, que define los oyentes de eventos como pequeños fragmentos de la plantilla DOM y se pueden agregar a los hijos DOM mediante anotaciones de un evento en la plantilla.
Ejemplo
El siguiente ejemplo agrega detectores de eventos anotados en la plantilla. Cree un archivo llamado index.html y coloque el siguiente código en él.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href="bower_components/polymer/polymer.html">
<link rel = "import" href = "annotated-eventlistners.html">
</head>
<body>
<template id = "myapp" is = "dom-bind">
//tap event is part of gesture events that fires consistently across both mobile
//and desktop devices
<annotated-eventlistners on-tap = "myClick"></annotated-eventlistners>
</template>
<script>
var myval = document.querySelector('#myapp');
myval.myClick = function(e) {
console.log('Hello World!!!');
};
</script>
</body>
</html>Salida
Para ejecutar la aplicación, navegue hasta el directorio del proyecto creado y ejecute el siguiente comando.
polymer serveAhora abra el navegador y navegue hasta http://127.0.0.1:8000/. Lo siguiente será la salida.
Haga clic en el texto para ver el resultado en la consola como se muestra en la siguiente captura de pantalla.
Eventos personalizados
Los eventos personalizados se pueden activar mediante el constructor CustomEvent estándar y el método dispatchEvent del elemento host.
Considere el siguiente ejemplo que activa el evento personalizado del elemento host. Abra el archivo index.html y agregue el siguiente código en él.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "custom-event.html">
</head>
<body>
<custom-event></custom-event>
<script>
document.querySelector('custom-event').addEventListener('customValue', function (e) {
console.log(e.detail.customval); // true
})
</script>
</body>
</html>Ahora, cree otro archivo llamado custom-event.html e incluya el siguiente código.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "custom-event">
<template>
<h2>Custom Event Example</h2>
<button on-click = "myClick">Click Here</button>
</template>
<script>
Polymer ({
is: "custom-event", myClick(e) {
this.dispatchEvent(new CustomEvent('customValue', {detail: {customval: true}}));
}
});
</script>
</dom-module>Salida
Ejecute la aplicación como se muestra en el ejemplo anterior y navegue hasta http://127.0.0.1:8000/. Lo siguiente será la salida.
Ahora haga clic en el botón, abra la consola y vea el valor real del evento personalizado como se muestra en la siguiente captura de pantalla.
Ahora avanzando con "retargeting de eventos", que especifica el objetivo del evento donde el elemento se puede representar en el mismo ámbito que el elemento de escucha. Por ejemplo, el destino se puede considerar como un elemento en el documento principal, mientras se usa un oyente en el documento principal, no en un árbol de sombra. Puede consultar el capítulo de estilo Polymer shadow dom para obtener más explicaciones y ejemplos.
Eventos de gestos
Los eventos de gestos se pueden utilizar para las interacciones del usuario, que definen una mejor interacción tanto en dispositivos táctiles como móviles. Por ejemplo, el evento de toque es parte de los eventos de gestos que se activa de manera constante en dispositivos móviles y de escritorio.
Puede consultar el ejemplo de evento de gesto explicado al principio de este capítulo, que utiliza on-tap evento que agrega oyentes de eventos anotados en la plantilla.
La siguiente tabla enumera diferentes tipos de eventos de gestos.
| No Señor. | Tipo de evento y descripción | Propiedades |
|---|---|---|
| 1 | down Especifica que el dedo / botón se ha movido hacia abajo. |
|
| 2 | up Especifica que el dedo / botón se ha movido hacia arriba. |
|
| 3 | tap Especifica la ocurrencia de acciones hacia arriba y hacia abajo. |
|
| 4 | track Especifica la ocurrencia de acciones hacia arriba y hacia abajo. |
|
Ejemplo
El siguiente ejemplo especifica el uso de tipos de eventos de gestos en la plantilla. Cree un archivo llamado index.html y coloque el siguiente código en él.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "gesture-event.html">
</head>
<body>
<gesture-event></gesture-event>
</body>
</html>Ahora, cree otro archivo llamado gesto-event.html e incluya el siguiente código.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "gesture-event">
<template>
<style>
#box {
width: 200px;
height: 200px;
background: #D7D0B7;
}
</style>
<h2>Gesture Event Types Example</h2>
<div id = "box" on-track = "myClick">{{track_message}}</div>
</template>
<script>
Polymer ({
is: 'gesture-event', myClick: function(e) {
switch(e.detail.state) {
case 'start':
this.track_message = 'Tracking event started...';
break;
case 'track':
this.track_message = 'Tracking event is in progress... ' +
e.detail.x + ', ' + e.detail.y;
break;
case 'end':
this.track_message = 'Tracking event ended...';
break;
}
}
});
</script>
</dom-module>Salida
Ejecute la aplicación como se muestra en el ejemplo anterior y navegue hasta http://127.0.0.1:8081/. Ahora comience a arrastrar el mouse en el elemento, mostrará el estado como se muestra en la siguiente captura de pantalla.
Después de arrastrar el mouse en el elemento, mostrará el progreso del seguimiento de eventos como se muestra en la siguiente captura de pantalla.
Cuando deje de arrastrar el mouse, finalizará el evento de seguimiento en el elemento como se muestra en la siguiente captura de pantalla.
Polymer permite observar los cambios en las propiedades de un elemento tomando diferentes acciones como:
Observers - Invoca las devoluciones de llamada cada vez que cambian los datos.
Computed Properties - Calcula las propiedades virtuales basándose en otras propiedades y las vuelve a calcular cada vez que cambian los datos de entrada.
Data Bindings - Actualiza las propiedades, atributos o el contenido de texto de un nodo DOM mediante anotaciones cada vez que cambian los datos.
Rutas de datos
Pathes una cadena en el sistema de datos, que proporciona una propiedad o una subpropiedad relativa a un ámbito. El alcance puede ser un elemento anfitrión. Las rutas se pueden vincular a diferentes elementos mediante el enlace de datos. El cambio de datos se puede mover de un elemento a otro, si los elementos están conectados con el enlace de datos.
Ejemplo
<dom-module id = "my-profile">
<template>
. . .
<address-card address="{{myAddress}}"></address-card>
</template>
. . .
</dom-module>Las dos rutas anteriores (my-profile y address-card) se pueden conectar con el enlace de datos, si <address-card> está en el DOM local del elemento <my-profile>.
A continuación se muestran los tipos especiales de segmentos de ruta en Polymer.js:
El carácter comodín (*) se puede utilizar como último segmento de una ruta.
Las mutaciones de la matriz se pueden mostrar en una matriz determinada colocando empalmes de cadenas como último segmento de una ruta.
Las rutas de los elementos de la matriz indican un elemento de una matriz y el segmento de ruta numérico especifica un índice de la matriz.
En una ruta de datos, cada segmento de ruta es un nombre de propiedad e incluye seguir dos tipos de rutas:
Los segmentos del camino separados por puntos. Por ejemplo: "apple.grapes.orange".
En una matriz de cadenas, cada elemento de la matriz es un segmento de ruta o una ruta de puntos. Por ejemplo: ["manzana", "uvas", "naranja"], ["manzana.grapes", "naranja"].
Flujo de datos
Ejemplo
El siguiente ejemplo especifica un enlace bidireccional de flujo de datos. Cree un archivo index.html y agregue el siguiente código en él.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>Ahora cree otro archivo llamado my-element.html e incluya el siguiente código.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "my-element">
<template>
<prop-element my-prop="{{demoProp}}"></prop-element>
<p>
Present value: <span>{{demoProp}}</span>
</p>
</template>
<script>
Polymer ({
is: "my-element", properties: {
demoProp: String
}
});
</script>
</dom-module>A continuación, cree un archivo más llamado prop-element.html y agregue el siguiente código.
//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
<template>
<button on-click = "onClickFunc">Change value</button>
</template>
<script>
Polymer ({
is: "prop-element", properties: {
myProp: {
type: String,
notify: true,
readOnly: true,
value: 'This is initial value...'
}
},
onClickFunc: function(){
this._setMyProp('This is new value after clicking the button...');
}
});
</script>
</dom-module>Salida
Ejecute la aplicación como se muestra en los capítulos anteriores y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.
Después de hacer clic en el botón, cambiará el valor como se muestra en la siguiente captura de pantalla.
Vincular dos caminos
Puede vincular las dos rutas al mismo objeto utilizando el método linkPaths y necesita usar el enlace de datos para generar cambios entre los elementos.
Ejemplo
linkPaths('myTeam', 'players.5');El vínculo de ruta se puede eliminar utilizando el método unlinkPaths como se muestra a continuación:
unlinkPaths('myTeam');Observadores
Los cambios observables que se producen en los datos del elemento invocan métodos conocidos como observadores. A continuación se muestran los tipos de observadores.
Los observadores simples se utilizan para observar una sola propiedad.
Los observadores complejos se utilizan para observar más de una propiedad o ruta.
El enlace de datos
El enlace de datos se puede utilizar para conectar la propiedad o un atributo de un elemento del elemento host en su DOM local. El enlace de datos se puede crear agregando anotaciones a la plantilla DOM como se muestra en el siguiente código.
<dom-module id = "myhost-element">
<template>
<target-element target-property = "{{myhostProperty}}"></target-element>
</template>
</dom-module>La anatomía del enlace de datos en la plantilla DOM local se parece a la siguiente:
property-name=annotation-or-compound-bindingo
attribute-name$=annotation-or-compound-bindingEl lado izquierdo del enlace especifica la propiedad o atributo de destino, mientras que el lado derecho del enlace especifica una anotación de enlace o un enlace compuesto. El texto en la anotación de enlace está encerrado por delimitadores entre corchetes dobles ({{}}) o corchetes dobles ([[]]) y el enlace compuesto incluye una o más anotaciones de enlace literal de cadena.
A continuación se muestran los elementos auxiliares, que se utilizan con casos de uso de enlace de datos:
Template Repeater - Se puede crear una instancia del contenido de la plantilla para cada elemento de una matriz.
Array Selector - Proporciona el estado de selección para una matriz de datos estructurados.
Conditional Template - Puede identificar el contenido, si la condición es verdadera.
Auto-binding Template - Especifica el enlace de datos fuera del elemento polímero.
El árbol DOM desencadena un evento de cambio de dom, si los elementos auxiliares actualizan el árbol DOM. A veces, puede interactuar con DOM cambiando los datos del modelo, no interactuando con los nodos creados. Por lo tanto, puede utilizar el evento dom-change para acceder a los nodos directamente.