Polímero - Elementos personalizados

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 de 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 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 válido del elemento personalizado 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 pase 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 utiliza 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 las 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 por 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 propiedad que coincide con un atributo en la instancia de acuerdo con 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 estableciendo 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 en el 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.

↰ Previous page Next page ↱