Polímero - elementos personalizados

Polymer é uma estrutura que permite criar elementos personalizados usando elementos HTML padrão. Os elementos da web personalizados fornecem os seguintes recursos -

Ele fornece o nome do elemento personalizado com a classe de associação.
Quando você altera o estado da instância do elemento personalizado, ele solicitará os retornos de chamada do ciclo de vida.
Se você alterar os atributos em uma instância, o retorno de chamada será solicitado.

Você pode definir o elemento personalizado usando a classe ES6 e a classe pode ser associada ao elemento personalizado, conforme mostrado no código a seguir.

//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);

O elemento personalizado pode ser usado como um elemento padrão, conforme mostrado abaixo -

<element-demo></element-demo>

Note - O nome do elemento personalizado deve começar com uma letra minúscula e conter um traço entre os nomes.

Ciclo de vida do elemento personalizado

O ciclo de vida do elemento customizado fornece um conjunto de reações do elemento customizado que são responsáveis pela mudança no ciclo de vida do elemento e são definidas na tabela a seguir.

Sr. Não.	Reações e descrição
1	constructor Quando você cria um elemento ou define o elemento criado anteriormente, esta reação do elemento será chamada.
2	connectedCallback Quando você adiciona um elemento a um documento, a reação desse elemento será chamada.
3	disconnectedCallback Quando você remove um elemento de um documento, a reação desse elemento é chamada.
4	attributeChangedCallback Sempre que você alterar, anexar, remover ou substituir um elemento de um documento, essa reação de elemento será chamada.

Upgrades de elemento

Podemos usar elementos personalizados antes de defini-los por especificação e quaisquer instâncias existentes de um elemento serão atualizadas para a classe personalizada adicionando uma definição a esse elemento.

O estado do elemento personalizado contém os seguintes valores -

uncustomized - O nome do elemento personalizado válido é um elemento integrado ou desconhecido, que não pode se tornar um elemento personalizado.
undefined - O elemento pode ter um nome de elemento personalizado válido, mas não pode ser definido.
custom - O elemento pode ter um nome de elemento personalizado válido, que pode ser definido e atualizado.
failed - Tentando atualizar o elemento com falha de uma classe inválida.

Definindo um Elemento

Um elemento personalizado pode ser definido criando uma classe que estende Polymer.Element e passa a classe para o método customElements.define. A classe contém um método getter que retorna um nome de marca HTML do elemento personalizado. Por exemplo -

//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');

Importações e APIs

Os elementos Polymer podem ser definidos especificando-se as três seguintes importações de HTML -

polymer-element.html - Especifica a classe base Polymer.Element.
legacy-element.html- Ele estende Polymer.Element usando a classe base Polymer.LegacyElement e adiciona API legada compatível 1.x. Ele também cria elementos híbridos definindo o método de fábrica Polymer () legado.
polymer.html - Compreende as classes de base do polímero junto com os elementos auxiliares, que foram incluídos no polímero 1.x.html.

Defina um elemento no documento HTML principal

Você pode definir um elemento no documento HTML principal usando a função HTMLImports.whenReady ().

Exemplo

O exemplo a seguir mostra como definir um elemento no documento HTML principal. Crie um arquivo index.html e adicione o código a seguir.

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

Agora crie um elemento personalizado chamado define-element.html e inclua o código a seguir.

<dom-module id = "define-element">
   <template>
      <h2>Welcome to Tutorialspoint!!!</h2>
   </template>
   
   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })  
   </script>
</dom-module>

Resultado

Para executar o aplicativo, navegue até o diretório do projeto criado e execute o seguinte comando.

polymer serve

Agora abra o navegador e navegue até http://127.0.0.1:8081/. A seguir será a saída.

Defina um elemento legado

O elemento legado pode ser usado para registrar um elemento usando a função Polymer, que leva o protótipo para um novo elemento. O protótipo deve conteris que define o nome da marca HTML para um elemento personalizado.

Exemplo

//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();

Callbacks do ciclo de vida

Retornos de chamada do ciclo de vida são usados para realizar as tarefas de recursos integrados de Polymer.Elementclasse. O Polymer usa um retorno de chamada pronto, que será invocado quando o Polymer concluir a criação e inicialização dos elementos DOM.

A seguir está uma lista de retornos de chamada legados em Polymer.js.

created - É chamado quando você cria um elemento antes de definir os valores da propriedade e inicializar o DOM local.
ready - É chamado quando você cria um elemento após definir os valores da propriedade e inicializar o DOM local.
attached - É chamado após anexar o elemento ao documento e pode ser chamado mais de uma vez durante a vida útil de um elemento.
detached - É chamado depois de desanexar o elemento do documento e pode ser chamado mais de uma vez durante a vida útil de um elemento.
attributeChanged - É chamado quando há alterações nos atributos de um elemento e contém as alterações dos atributos, que não são compatíveis com as propriedades declaradas.

Declarando Propriedades

As propriedades podem ser declaradas em um elemento para adicionar valor padrão e outros recursos específicos no sistema de dados e podem ser usadas para especificar os seguintes recursos -

Ele especifica o tipo de propriedade e o valor padrão.
Chama o método observador, quando houver alteração no valor da propriedade.
Ele especifica o status somente leitura para interromper as mudanças inesperadas no valor da propriedade.
Ele fornece suporte para vinculação de dados bidirecional, que dispara um evento quando você altera os valores da propriedade.
É uma propriedade computada, que calcula um valor dinamicamente dependendo das outras propriedades.
Ele atualiza e reflete o valor do atributo correspondente, quando você altera os valores da propriedade.

A tabela a seguir mostra as chaves de cada propriedade, que são suportadas pelo objeto de propriedades.

Sr. Não.	Chave e descrição	Tipo
1	type Ele desserializa de um atributo cujo tipo de propriedade é determinado usando o construtor do tipo.	construtor (booleano, data, número, string, matriz ou objeto)
2	value Ele especifica o valor padrão da propriedade e, se for uma função, usa o valor de retorno como o valor padrão da propriedade.	booleano, número, string ou função.
3	reflectToAttribute Se esta chave for definida como verdadeira, ela definirá o atributo correspondente no nó do host. O atributo pode ser criado como um atributo booleano HTML padrão, se você definir o valor da propriedade como Booleano.	boleano
4	readOnly Você não pode definir a propriedade diretamente por atribuição ou vinculação de dados, se esta chave for definida como verdadeira.	boleano
5	notify Você pode usar a propriedade para vinculação de dados bidirecional, se esta chave for definida como true e quando você alterar a propriedade, o evento de alteração do nome da propriedade será acionado.	boleano
6	computed Você pode calcular o valor de um argumento sempre que ele mudar, invocando o método e o valor será simplificado como nome do método e lista de argumentos.	corda
7	observer Invoque o nome do método, que é simplificado por um valor, quando o valor da propriedade mudar.	corda

Desserialização de Atributo

Desserializa o nome da propriedade que corresponde a um atributo na instância de acordo com o tipo especificado e o mesmo nome da propriedade na instância do elemento, se a propriedade estiver configurada no objeto de propriedades.

Você pode definir o tipo especificado diretamente como o valor da propriedade, se não houver outras opções de propriedades definidas no objeto de propriedades; caso contrário, ele fornecerá o valor para a chave de tipo no objeto de configuração de propriedades.

Configurando Propriedades Booleanas

A propriedade booleana pode ser configurada a partir da marcação, definindo-a como falsa e, se for definida como verdadeira, você não pode configurar a partir da marcação porque o atributo com ou sem um valor é igualado a verdadeiro. Portanto, é conhecido como um comportamento padrão para atributos na plataforma web.

As propriedades do objeto e da matriz podem ser configuradas passando-as no formato JSON como -

<element-demo player = '{ "name": "Sachin", "country": "India" }'></element-demo>

Configurando Valores de Propriedade Padrão

A propriedade padrão pode ser configurada usando o campo de valor no objeto de propriedades e pode ser um valor primitivo ou uma função que retorna um valor.

Exemplo

O exemplo a seguir descreve como configurar os valores de propriedade padrão no objeto de propriedades.

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

Resultado

Execute o aplicativo conforme mostrado no exemplo anterior e navegue até http://127.0.0.1:8000/. A seguir será a saída.

Propriedades somente leitura

Você pode evitar mudanças inesperadas nos dados produzidos definindo o sinalizador readOnly como true, no objeto de propriedades. O elemento usa o setter da convenção _setProperty (value), para alterar o valor da propriedade.

Exemplo

O exemplo a seguir descreve o uso de propriedades somente leitura no objeto de propriedades. Crie um arquivo index.html e adicione o seguinte código a ele

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

Agora, crie outro arquivo chamado my-element.html e inclua o código a seguir.

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

Em seguida, crie mais um arquivo chamado prop-element.html e adicione o código a seguir.

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

Resultado

Execute o aplicativo conforme mostrado no exemplo anterior e navegue até http://127.0.0.1:8081/. A seguir será a saída.

Após clicar no botão, ele mudará o valor conforme mostrado na imagem a seguir.

Refletindo Propriedades para Atributos

O atributo HTML pode ser sincronizado com o valor da propriedade, definindo o reflectToAttribute como true em uma propriedade no objeto de configuração de propriedades.

Serialização de Atributo

O valor da propriedade pode ser serializado para o atributo, enquanto reflete ou vincula uma propriedade a um atributo e, por padrão, os valores podem ser serializados dependendo do tipo atual do valor.

String - Não há necessidade de serialização.
Date or Number - Use toString para serializar os valores.
Boolean - Defina o atributo sem valor exibido como verdadeiro ou falso.
Array or Object - Use o JSON.stringify para serializar o valor.