Полимер — нестандартные элементы

Polymer — это фреймворк, позволяющий создавать собственные элементы с использованием стандартных элементов HTML. Пользовательские веб-элементы предоставляют следующие функции —

• Предоставляет настраиваемое имя элемента с ассоциированным классом.

• Когда вы изменяете состояние экземпляра пользовательского элемента, он запрашивает обратные вызовы жизненного цикла.

• Если вы измените атрибуты в экземпляре, будет запрошен обратный вызов.

Предоставляет настраиваемое имя элемента с ассоциированным классом.

Когда вы изменяете состояние экземпляра пользовательского элемента, он запрашивает обратные вызовы жизненного цикла.

Если вы измените атрибуты в экземпляре, будет запрошен обратный вызов.

Вы можете определить пользовательский элемент, используя класс ES6, и класс можно связать с пользовательским элементом, как показано в следующем коде.

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

Пользовательский элемент может быть использован в качестве стандартного элемента, как показано ниже —

<element-demo></element-demo>

Примечание. Имя пользовательского элемента должно начинаться со строчной буквы и содержать тире между именами.

Пользовательский жизненный цикл элемента

Настраиваемый жизненный цикл элемента предоставляет набор пользовательских реакций элемента, которые отвечают за изменение жизненного цикла элемента и определены в следующей таблице.

Sr.No.	Реакции и описание
1	конструктор Когда вы создаете элемент или определяете ранее созданный элемент, вызывается эта реакция элемента.
2	connectedCallback Когда вы добавляете элемент в документ, будет вызвана эта реакция элемента.
3	disconnectedCallback Когда вы удаляете элемент из документа, будет вызвана эта реакция элемента.
4	attributeChangedCallback Всякий раз, когда вы изменяете, добавляете, удаляете или заменяете элемент из документа, будет вызываться эта реакция элемента.

конструктор

Когда вы создаете элемент или определяете ранее созданный элемент, вызывается эта реакция элемента.

connectedCallback

Когда вы добавляете элемент в документ, будет вызвана эта реакция элемента.

disconnectedCallback

Когда вы удаляете элемент из документа, будет вызвана эта реакция элемента.

attributeChangedCallback

Всякий раз, когда вы изменяете, добавляете, удаляете или заменяете элемент из документа, будет вызываться эта реакция элемента.

Улучшения Элемента

Мы можем использовать пользовательские элементы, прежде чем определять их по спецификации, и любые существующие экземпляры элемента будут обновлены до пользовательского класса путем добавления определения к этому элементу.

Пользовательское состояние элемента содержит следующие значения —

• uncustomized — допустимое имя пользовательского элемента является либо встроенным элементом, либо неизвестным элементом, который не может стать пользовательским элементом.

• undefined — элемент может иметь допустимое имя пользовательского элемента, но его нельзя определить.

• custom — Элемент может иметь допустимое имя пользовательского элемента, которое может быть определено и обновлено.

• failed — Попытка обновить ошибочный элемент недопустимого класса.

uncustomized — допустимое имя пользовательского элемента является либо встроенным элементом, либо неизвестным элементом, который не может стать пользовательским элементом.

undefined — элемент может иметь допустимое имя пользовательского элемента, но его нельзя определить.

custom — Элемент может иметь допустимое имя пользовательского элемента, которое может быть определено и обновлено.

failed — Попытка обновить ошибочный элемент недопустимого класса.

Определение элемента

Пользовательский элемент может быть определен путем создания класса, который расширяет Polymer.Element и передает класс методу customElements.define. Класс содержит метод getter, который возвращает имя тега HTML пользовательского элемента. Например —

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

Импорт и API

Элементы Polymer можно определить, указав следующие три импорта HTML —

• Polymer-element.html — Определяет базовый класс Polymer.Element.

• legacy-element.html — расширяет Polymer.Element с помощью базового класса Polymer.LegacyElement и добавляет 1.x совместимый устаревший API. Он также создает гибридные элементы, определяя устаревший фабричный метод Polymer ().

• Polymer.html — содержит базовые классы Polymer и вспомогательные элементы, которые были включены в 1.x Polymer.html.

Polymer-element.html — Определяет базовый класс Polymer.Element.

legacy-element.html — расширяет Polymer.Element с помощью базового класса Polymer.LegacyElement и добавляет 1.x совместимый устаревший API. Он также создает гибридные элементы, определяя устаревший фабричный метод Polymer ().

Polymer.html — содержит базовые классы Polymer и вспомогательные элементы, которые были включены в 1.x Polymer.html.

Определить элемент в основном документе HTML

Вы можете определить элемент в основном документе HTML, используя функцию HTMLImports.whenReady ().

пример

В следующем примере показано, как определить элемент в основном документе HTML. Создайте файл index.html и добавьте следующий код.

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

Теперь создайте пользовательский элемент с именем define-element.html и включите следующий код.

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

Выход

Чтобы запустить приложение, перейдите в каталог созданного проекта и выполните следующую команду.

polymer serve

Теперь откройте браузер и перейдите по ссылке http://127.0.0.1:8081/ . Ниже будет вывод.

Определить элемент наследия

Устаревший элемент можно использовать для регистрации элемента с помощью функции Polymer, которая берет прототип для нового элемента. Прототип должен содержать , который определяет имя тега HTML для пользовательского элемента.

пример

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

Обратные вызовы жизненного цикла

Обратные вызовы жизненного цикла используются для выполнения задач для встроенных функций класса Polymer.Element . Polymer использует готовый обратный вызов, который будет вызван, когда Polymer завершит создание и инициализацию элементов DOM.

Ниже приведен список устаревших обратных вызовов в Polymer.js.

• созданный — вызывается, когда вы создаете элемент перед установкой значений свойств и инициализацией локальной модели DOM.

• ready — вызывается при создании элемента после установки значений свойств и инициализации локального DOM.

• присоединенный — он вызывается после присоединения элемента к документу и может вызываться более одного раза в течение всего срока службы элемента.

• detached — вызывается после отсоединения элемента от документа и может вызываться более одного раза за время существования элемента.

• attributeChanged — вызывается при изменении атрибутов элемента и содержит изменения атрибутов, которые не совместимы с объявленными свойствами.

созданный — вызывается, когда вы создаете элемент перед установкой значений свойств и инициализацией локальной модели DOM.

ready — вызывается при создании элемента после установки значений свойств и инициализации локального DOM.

присоединенный — он вызывается после присоединения элемента к документу и может вызываться более одного раза в течение всего срока службы элемента.

detached — вызывается после отсоединения элемента от документа и может вызываться более одного раза за время существования элемента.

attributeChanged — вызывается при изменении атрибутов элемента и содержит изменения атрибутов, которые не совместимы с объявленными свойствами.

Объявление недвижимости

Свойства могут быть объявлены для элемента, чтобы добавить значение по умолчанию и другие специфические функции в системе данных, и они могут быть использованы для указания следующих функций:

• Он определяет тип свойства и значение по умолчанию.

• Он вызывает метод наблюдателя, когда происходят изменения в значении свойства.

• Он определяет состояние только для чтения, чтобы остановить неожиданные изменения значения свойства.

• Он обеспечивает поддержку двусторонней привязки данных, которая вызывает событие при изменении значений свойства.

• Это вычисляемое свойство, которое вычисляет значение динамически в зависимости от других свойств.

• Он обновляет и отражает соответствующее значение атрибута при изменении значений свойства.

Он определяет тип свойства и значение по умолчанию.

Он вызывает метод наблюдателя, когда происходят изменения в значении свойства.

Он определяет состояние только для чтения, чтобы остановить неожиданные изменения значения свойства.

Он обеспечивает поддержку двусторонней привязки данных, которая вызывает событие при изменении значений свойства.

Это вычисляемое свойство, которое вычисляет значение динамически в зависимости от других свойств.

Он обновляет и отражает соответствующее значение атрибута при изменении значений свойства.

В следующей таблице приведены ключи для каждого свойства, которые поддерживаются объектом свойств.

Sr.No.	Ключ и описание	Тип
1	тип Он десериализуется из атрибута, тип свойства которого определяется с помощью конструктора типа.	конструктор (логическое значение, дата, число, строка, массив или объект)
2	значение Он задает значение по умолчанию для свойства и, если это функция, то использует возвращаемое значение в качестве значения по умолчанию для свойства.	логическое значение, число, строка или функция.
3	reflectToAttribute Если этот ключ имеет значение true, то он устанавливает соответствующий атрибут на узле хоста. Атрибут может быть создан как стандартный булев атрибут HTML, если вы установите значение свойства как Булево.	логический
4	доступен только для чтения Вы не можете установить свойство напрямую путем присваивания или привязки данных, если для этого ключа установлено значение true.	логический
5	поставить в известность Вы можете использовать это свойство для двусторонней привязки данных, если для этого ключа задано значение true и при изменении свойства будет инициировано событие имя-свойства-измененное.	логический
6	вычисленный Вы можете вычислить значение аргумента всякий раз, когда он изменяется, вызывая метод и значение будет упрощено как имя метода и список аргументов.	строка
7	наблюдатель Вызвать имя метода, которое упрощается значением, когда значение свойства изменяется.	строка

тип

Он десериализуется из атрибута, тип свойства которого определяется с помощью конструктора типа.

значение

Он задает значение по умолчанию для свойства и, если это функция, то использует возвращаемое значение в качестве значения по умолчанию для свойства.

reflectToAttribute

Если этот ключ имеет значение true, то он устанавливает соответствующий атрибут на узле хоста. Атрибут может быть создан как стандартный булев атрибут HTML, если вы установите значение свойства как Булево.

доступен только для чтения

Вы не можете установить свойство напрямую путем присваивания или привязки данных, если для этого ключа установлено значение true.

поставить в известность

Вы можете использовать это свойство для двусторонней привязки данных, если для этого ключа задано значение true и при изменении свойства будет инициировано событие имя-свойства-измененное.

вычисленный

Вы можете вычислить значение аргумента всякий раз, когда он изменяется, вызывая метод и значение будет упрощено как имя метода и список аргументов.

наблюдатель

Вызвать имя метода, которое упрощается значением, когда значение свойства изменяется.

Десериализация атрибутов

Десериализовать имя свойства, которое соответствует атрибуту экземпляра, в соответствии с указанным типом и тем же именем свойства в экземпляре элемента, если свойство настроено в объекте свойств.

Вы можете установить указанный тип непосредственно в качестве значения свойства, если в объекте свойств не определены другие параметры свойств; в противном случае он предоставит значение ключу типа в объекте конфигурации свойств.

Настройка логических свойств

Логическое свойство можно настроить из разметки, установив для него значение false, и если для него установлено значение true, вы не сможете настроить его из разметки, поскольку атрибут со значением или без него равен значению true. Поэтому он известен как стандартное поведение для атрибутов в веб-платформе.

Свойства объекта и массива можно настроить, передав их в формате JSON как —

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

Настройка значений свойств по умолчанию

Свойство по умолчанию можно настроить с помощью поля значения в объекте свойств, и оно может быть либо примитивным значением, либо функцией, которая возвращает значение.

пример

В следующем примере показано, как настроить значения свойств по умолчанию в объекте свойств.

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

Выход

Запустите приложение, как показано в предыдущем примере, и перейдите по адресу http://127.0.0.1:8000/ . Ниже будет вывод.

Свойства только для чтения

Вы можете избежать непредвиденных изменений в создаваемых данных, установив для флага readOnly значение true в объекте свойств. Элемент использует установщик соглашения _setProperty (value), чтобы изменить значение свойства.

пример

В следующем примере показано использование свойств только для чтения в объекте свойств. Создайте файл index.html и добавьте в него следующий код

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

Теперь создайте другой файл с именем my-element.html и включите следующий код.

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

Затем создайте еще один файл с именем prop-element.html и добавьте следующий код.

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

Выход

Запустите приложение, как показано в предыдущем примере, и перейдите по адресу http://127.0.0.1:8081/ . Ниже будет вывод.

После нажатия кнопки она изменит значение, как показано на следующем снимке экрана.

Отражение свойств для атрибутов

Атрибут HTML можно синхронизировать со значением свойства, установив для свойстваlectToAttribute значение true для свойства в объекте конфигурации свойств.

Сериализация атрибутов

Значение свойства может быть сериализовано для атрибута при отражении или привязке свойства к атрибуту, а по умолчанию значения могут быть сериализованы в зависимости от текущего типа значения.

Строка — Нет необходимости сериализации.

Дата или число — используйте toString для сериализации значений.

Boolean — Установите отображаемый ненулевой атрибут как true или false.

Массив или объект — используйте JSON.stringify для сериализации значения.