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@next

Step 2 - Verifique la instalación y la versión correctas con el siguiente comando.

polymer --version

Si 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-js

Step 4- Para inicializar su proyecto, ejecute el siguiente comando en su directorio Polymer-js .

polymer init

Despué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: 4

Step 5 - Seleccione la aplicación polímero-2 de las opciones dadas anteriormente.

Ahora, inicie su proyecto usando el siguiente comando.

polymer serve

Instalació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 bower

Step 2 - Instale el polímero usando el siguiente comando.

npm install -g polymer-cli@next

Step 3 - Verifique la instalación exitosa y la versión de Polymer, usando el siguiente comando.

polymer --version

Si 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.3

Step 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 Polymer

Step 6 - Inicie su proyecto usando el siguiente comando.

polymer serve

Construyendo 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-compile

El comando anterior construirá el proyecto para construir / predeterminado y puede iniciar este directorio, usando el siguiente comando.

polymer serve build/default

Polymer 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 serve

Ahora 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>
   &ltbutton>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 serve

Ahora 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 serve

Ahora 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.

  • x - Proporciona la coordenada clientX para un evento.

  • y - Proporciona las coordenadas del cliente para un evento.

  • sourceEvent - Especifica la acción de caída causada por el evento DOM.

2

up

Especifica que el dedo / botón se ha movido hacia arriba.

  • x - Proporciona la coordenada clientX para un evento.

  • y - Proporciona las coordenadas del cliente para un evento.

  • sourceEvent - Especifica la acción ascendente causada por el evento DOM.

3

tap

Especifica la ocurrencia de acciones hacia arriba y hacia abajo.

  • x - Proporciona la coordenada clientX para un evento.

  • y - Proporciona las coordenadas del cliente para un evento.

  • sourceEvent - Especifica la acción de toque causada por el evento DOM.

4

track

Especifica la ocurrencia de acciones hacia arriba y hacia abajo.

  • x - Proporciona la coordenada clientX para un evento.

  • y - Proporciona las coordenadas del cliente para un evento.

  • state - Es una cadena de tipo que especifica el estado de seguimiento.

  • dx - Realiza los cambios en píxeles de forma horizontal, cuando se realiza un seguimiento del primer evento.

  • dy - Realiza verticalmente los cambios en píxeles, cuando rastrea el primer evento.

  • ddx - Realiza horizontalmente los cambios en píxeles, cuando rastrea el último evento.

  • ddy - Realiza verticalmente los cambios en píxeles, cuando rastrea el último evento.

  • hover() - Se utiliza para determinar el elemento suspendido actualmente.

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

o

attribute-name$=annotation-or-compound-binding

El 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.