Полимер - Краткое руководство

Polymer.js - это библиотека JavaScript, созданная Google, которая позволяет повторно использовать элементы HTML для создания приложений с компонентами.

Polymer - это библиотека JavaScript с открытым исходным кодом, разработанная разработчиками Google и первоначально выпущенная 27 мая 2015 года. Стабильная версия - 1.7.0, выпущенная 29 сентября 2016 года.

Зачем использовать Polymer.js?

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

Особенности Polymer.js

Это библиотека JavaScript, построенная на основе API веб-стандартов, которые позволяют создавать собственные элементы HTML.
Он предоставляет полифиллы (спецификации веб-компонентов) для создания наших собственных настраиваемых и повторно используемых элементов.
Он использует стандарты веб-компонентов для создания многоразовых виджетов в веб-документах и веб-приложениях.
Он использует материальный дизайн Google для разработки гибридного мобильного приложения.
Он распределяет пользовательские элементы по сети, и пользователи могут использовать эти элементы с помощью HTML Imports.

Polymer легко настроить в вашей системе. Ниже приведены два способа установки Polymer.

Polymer CLI (интерфейс командной строки)
Беседка

Установка Polymer с помощью Polymer CLI

Step 1 - Установите Polymer с помощью следующей команды npm.

npm install -g polymer-cli@next

Step 2 - Проверьте успешную установку и версию с помощью следующей команды.

polymer --version

Если он установлен успешно, он покажет версию как -

Step 3 - Создайте каталог с именем по вашему выбору и переключитесь в этот каталог.

mkdir polymer-js 
cd polymer-js

Step 4- Чтобы инициализировать ваш проект, выполните следующую команду в своем каталоге polymer-js .

polymer init

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

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 - Выберите приложение «Полимер-2» из приведенных выше вариантов.

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

polymer serve

Установка полимера с помощью Bower

Step 1 - Чтобы начать с нуля, используя метод Bower, установите Bower с помощью следующей команды.

npm install -g bower

Step 2 - Установите полимер, используя следующую команду.

npm install -g polymer-cli@next

Step 3 - Проверьте успешную установку и версию Polymer, используя следующую команду.

polymer --version

Если он установлен успешно, он покажет версию как -

0.18.0-pre.13.

Step 4 - Чтобы установить последнюю версию Polymer 2.0 RC из bower, используйте следующую команду.

bower install Polymer/polymer#^2.0.0-rc.3

Step 5 - Создать index.html файл и добавьте следующий код в тег <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 - Запустите свой проект, используя следующую команду.

polymer serve

Строительство для развертывания

Чтобы собрать свой проект для развертывания, polymer build command - это более простой способ, который минимизирует, скомпилирует или объединит ваш код в зависимости от флагов командной строки.

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

polymer build --js-compile

Приведенная выше команда соберет проект для build / default, и вы можете запустить этот каталог, используя следующую команду.

polymer serve build/default

Polymer 2.0 использует пользовательские элементы ES6 и HTML. Лучше всего использовать ES6 для браузеров с полной поддержкой ES6 и скомпилировать ES5 для старых браузеров, которые не поддерживают ES6. В следующей таблице показана лучшая стратегия для вашего проекта.

Стратегия	Самый простой для кросс-браузерной поддержки	Самый оптимальный для производительности WC v1
Сервер	Работает любой сервер, в том числе статический	Требуется дифференциальное обслуживание
Развернутый код	ES5 передан	ES6
Загрузчик полифиллов	webcomponents-es5-loader.js	webcomponents-loader.js

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

Sr.No.	Типы и описание
1	элементы приложения Элементы приложения полезны при создании приложений целиком.
2	железные элементы Это основные строительные блоки для создания приложения.
3	бумажные элементы Бумажные элементы - это набор компонентов пользовательского интерфейса, предназначенных для реализации рекомендаций Google по материальному дизайну.
4	веб-компоненты Google Веб-компонент Google - это набор веб-компонентов для API и служб Google.
5	золотые элементы Золотые элементы созданы для конкретных случаев использования электронной коммерции.
6	неоновые элементы Он используется для реализации анимированных переходов для элементов Polymer с помощью веб-анимации.
7	платиновые элементы Платиновые элементы предоставляют функции, позволяющие превратить вашу веб-страницу в настоящее веб-приложение.
8	молекулы элементов Элемент молекула помогает легко разрабатывать приложение и используется для подключения группы плагинов к приложению 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>

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

Жизненный цикл настраиваемого элемента

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

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

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

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

Состояние настраиваемого элемента содержит следующие значения -

uncustomized - Допустимое имя настраиваемого элемента - это либо встроенный элемент, либо неизвестный элемент, который не может стать настраиваемым элементом.
undefined - Элемент может иметь действительное имя настраиваемого элемента, но его нельзя определить.
custom - Элемент может иметь действительное имя настраиваемого элемента, которое можно определить и обновить.
failed - Попытка обновить отказавший элемент недопустимого класса.

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

Пользовательский элемент может быть определен путем создания класса, который расширяет Polymer.Element и передает этот класс методу customElements.define. Класс содержит метод получения, который возвращает имя тега 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 и добавляет устаревший API, совместимый с 1.x. Он также создает гибридные элементы, определяя устаревший фабричный метод Polymer ().
polymer.html - Он включает базовые классы Polymer вместе с вспомогательными элементами, которые были включены в 1.xpolymer.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, которая принимает прототип для нового элемента. Прототип должен содержатьis который определяет имя тега 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.

created - Он вызывается, когда вы создаете элемент перед установкой значений свойств и инициализацией локальной модели DOM.
ready - Он вызывается, когда вы создаете элемент после установки значений свойств и инициализации локальной модели DOM.
attached - Он вызывается после присоединения элемента к документу и может вызываться более одного раза в течение всего времени существования элемента.
detached - Он вызывается после отсоединения элемента от документа и может вызываться более одного раза в течение всего времени существования элемента.
attributeChanged - Он вызывается, когда есть изменения в атрибутах элемента, и он содержит изменения атрибутов, несовместимые с объявленными свойствами.

Объявление свойств

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

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

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

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

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

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

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

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

Свойство Boolean можно настроить из разметки, установив для него значение 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 в объекте свойств. Element использует установщик соглашения _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 можно синхронизировать со значением свойства, установив reflectToAttribute значение true для свойства в объекте конфигурации свойств.

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

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

String - Нет необходимости в сериализации.
Date or Number - Используйте toString для сериализации значений.
Boolean - Установите для отображаемого неценного атрибута значение true или false.
Array or Object - Используйте JSON.stringify для сериализации значения.

Shadow DOM - это новое свойство DOM, используемое для создания компонентов.

Example

В следующем коде компонент заголовка включает заголовок страницы и кнопку меню.

<header-demo>
   <header>
      <h1>
         <button>

Shadow DOM позволяет размещать потомков в поддереве с заданной областью видимости, которое известно как shadow tree.

<header-demo>
   #shadow-root
   <header>
      <h1>
      <button>

Корень теневого корня называется вершиной теневого дерева, а элемент, который прикреплен к дереву, называется теневым хостом (демонстрационный заголовок). Этот теневой хост включает свойство shadowRoot, которое указывает корень тени. Теневой корень идентифицирует элемент хоста с помощью свойства хоста.

Shadow DOM и композиция

Теневое дерево может быть визуализировано вместо дочерних элементов, если в теневой DOM есть элемент. Дочерние элементы элемента можно отобразить, добавив элемент <slot> в теневое дерево.

Например, используйте следующее теневое дерево для <header-demo>.

<header>
   <h1><slot></slot></h1>
   &ltbutton>Menu</button>
</header>

Добавьте дочерние элементы в элемент <my-header> как -

<header-demo>Shadow DOM</header-demo>

Заголовок заменяет элемент </slot> указанными выше дочерними элементами как -

<header-demo>
   <header>
      <h1>Shadow DOM</h1>
      <button>Menu</button>
   </header>
</header-demo>

Резервный контент

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

<my-element>
   #shadow-root
   <slot id = "myimgicon">
      <img src = "img-demo.png">
   </slot>
   <slot></slot>
<my-element>

Вы можете предоставить свой собственный значок для элемента как -

<my-element>
   <img slot = "myimgicon" src = "warning.png">
<my-element>

Многоуровневое распределение

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

Например, возьмите два уровня теневого дерева, как показано ниже -

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

Рассмотрим следующий код -

<parent-element>
   <p>This is light DOM</p>
<parent-element>

Структура сплющенного дерева выглядит следующим образом.

<parent-element>
   <child-element>
      <div>
         <slot id = "child-slot">
            <slot id = "parent-slot">
               <p>This is light DOM</p>

Shadow DOM использует следующие API слотов для проверки распределения:

HTMLElement.assignedSlot - Он выделяет слот для элемента и возвращает ноль, если элемент не назначен слоту.
HTMLSlotElement.assignedNodes - Он предоставляет список узлов вместе со слотом и возвращает распределенные узлы, когда вы устанавливаете для параметра flatten значение true.
HTMLSlotElement.slotchange - Это событие запускается при изменении распределенных узлов слота.

Ретаргетинг событий

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

Example

В следующем примере показано использование ретаргетинга событий в Polymer.js. Создайте файл с именем 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 = "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>

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

<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

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

polymer serve

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

Щелкните текст выше и откройте консоль, чтобы увидеть событие с перенацеливанием, как показано на следующем снимке экрана.

Стиль Shadow DOM

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

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>

Шаблоны DOM

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

Шаблон DOM можно указать двумя способами:

Создайте элемент <dom-module>, который должен соответствовать имени элемента вместе с атрибутом id.
Определите элемент <template> внутри <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>

Стиль теневого DOM элемента

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

Давайте стилизуем элемент хоста, используя :hostселектор (элемент, прикрепленный к теневой DOM, называется хостом). Создайте файл с именем полимер-app.html и добавьте в него следующий код.

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

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

Содержимое со стилем

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

Example

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

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

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

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

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

Использование модулей стилей

Вы можете использовать стили между элементами вместе с модулями стилей. Укажите стили в модуле стиля и поделитесь ими между элементами.

Example

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

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

Создайте еще один файл с именем style-module.html со следующим кодом.

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

Теперь создайте еще один файл с именем colors-module.html , который предоставляет модули стилей для элементов, как показано в следующем коде.

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

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

Использовать настраиваемые свойства

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

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

При наследовании CSS, если для элемента не определен стиль, он унаследует стиль от своего родителя, как показано в следующем коде.

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

События используются элементами, которые могут обмениваться данными об изменениях состояния дерева DOM с родительскими элементами и используют стандартные API-интерфейсы DOM для создания, отправки и прослушивания событий. Вannotated event listeners используются Polymer, который определяет слушателей событий как небольшие фрагменты шаблона DOM и может быть добавлен к дочерним элементам DOM с помощью аннотаций onevent в шаблоне.

пример

В следующем примере в шаблон добавляются аннотированные прослушиватели событий. Создайте файл с именем 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 = "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>

Вывод

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

polymer serve

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

Щелкните текст, чтобы увидеть результат в консоли, как показано на следующем снимке экрана.

Пользовательские события

Пользовательские события могут запускаться с помощью стандартного конструктора CustomEvent и метода dispatchEvent из элемента хоста.

Рассмотрим следующий пример, который запускает настраиваемое событие из ведущего элемента. Откройте файл 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 = "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>

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

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

Вывод

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

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

Теперь перейдем к «перенацеливанию событий», который указывает цель события, где элемент может быть представлен в той же области, что и элемент прослушивания. Например, цель может рассматриваться как элемент в основном документе при использовании слушателя в основном документе, а не в теневом дереве. Вы можете обратиться к главе, посвященной стилю Polymer shadow dom, для получения дополнительных объяснений и примеров.

События жестов

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

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

В следующей таблице перечислены различные типы событий жестов.

Sr.No.	Тип и описание события	Свойства
1	down Он указывает, что палец / кнопка переместились вниз.	x - Предоставляет координату clientX для события. y - Предоставляет клиентскую координату для мероприятия. sourceEvent - Он указывает действие, вызванное событием DOM.
2	up Он указывает, что палец / кнопка переместились вверх.	x - Предоставляет координату clientX для события. y - Предоставляет клиентскую координату для мероприятия. sourceEvent - Он определяет действие, вызванное событием DOM.
3	tap Он определяет возникновение действий вверх и вниз.	x - Предоставляет координату clientX для события. y - Предоставляет клиентскую координату для мероприятия. sourceEvent - Он определяет действие касания, вызванное событием DOM.
4	track Он определяет возникновение действий вверх и вниз.	x - Предоставляет координату clientX для события. y - Предоставляет клиентскую координату для мероприятия. state - Это строка типа, определяющая состояние отслеживания. dx - По горизонтали вносит изменения в пикселях, когда вы отслеживаете первое событие. dy - По вертикали вносит изменения в пикселях, когда вы отслеживаете первое событие. ddx - По горизонтали вносит изменения в пикселях, когда вы отслеживаете последнее событие. ddy - Вертикально вносит изменения в пикселях, когда вы отслеживаете последнее событие. hover() - Используется для определения текущего зависшего элемента.

пример

В следующем примере указывается использование типов событий жестов в шаблоне. Создайте файл с именем 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 = "gesture-event.html">
   </head>
   
   <body>
      <gesture-event></gesture-event>
   </body>
</html>

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

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

Вывод

Запустите приложение, как показано в предыдущем примере, и перейдите к http://127.0.0.1:8081/. Теперь начните перетаскивать мышь в элемент, он отобразит состояние, как показано на следующем снимке экрана.

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

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

Полимер позволяет наблюдать за изменениями свойств элемента, выполняя различные действия, такие как:

Observers - Он вызывает обратные вызовы при изменении данных.
Computed Properties - Он вычисляет виртуальные свойства на основе других свойств и повторно вычисляет их при изменении входных данных.
Data Bindings - Он обновляет свойства, атрибуты или текстовое содержимое узла DOM, используя аннотации при изменении данных.

Пути к данным

Path- это строка в системе данных, которая предоставляет свойство или подсвойство относительно области. Область видимости может быть ведущим элементом. Пути могут быть связаны с разными элементами с помощью привязки данных. Изменение данных можно перемещать от одного элемента к другому, если элементы связаны с привязкой данных.

пример

<dom-module id = "my-profile">
   <template>
      . . .
      <address-card address="{{myAddress}}"></address-card>
   </template>
   . . .
</dom-module>

Два указанных выше пути (my-profile и address-card) могут быть связаны с привязкой данных, если <address-card> находится в локальной DOM элемента <my-profile>.

Ниже приведены специальные типы сегментов пути в Polymer.js:

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

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

Сегменты пути разделены точками. Например: «яблоко. Виноград. Апельсин».
В массиве строк каждый элемент массива представляет собой либо сегмент пути, либо путь с точками. Например: [«яблоко», «виноград», «апельсин»], [«яблоко. Виноград», «апельсин»].

Поток данных

пример

В следующем примере указывается двусторонняя привязка потока данных. Создайте файл 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/. Ниже будет вывод.

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

Связывание двух путей

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

пример

linkPaths('myTeam', 'players.5');

Связь пути может быть удалена с помощью метода unlinkPaths, как показано ниже -

unlinkPaths('myTeam');

Наблюдатели

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

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

Связывание данных

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

<dom-module id = "myhost-element">
   <template>
      <target-element target-property = "{{myhostProperty}}"></target-element>
   </template>
</dom-module>

Анатомия привязки данных в локальном шаблоне DOM выглядит следующим образом:

property-name=annotation-or-compound-binding

или же

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

Левая часть привязки указывает целевое свойство или атрибут, а правая часть привязки указывает либо аннотацию привязки, либо составную привязку. Текст в аннотации привязки заключен в двойные фигурные скобки ({{}}) или двойные квадратные скобки ([[]]) разделители, а составная привязка включает одну или несколько аннотаций привязки строкового литерала.

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

Template Repeater - Экземпляр содержимого шаблона может быть создан для каждого элемента в массиве.
Array Selector - Предоставляет состояние выбора для массива структурированных данных.
Conditional Template - Вы можете идентифицировать контент, если условие выполняется.
Auto-binding Template - Указывает привязку данных за пределами полимерного элемента.

Дерево DOM запускает событие dom-change, если вспомогательные элементы обновляют дерево DOM. Иногда вы можете взаимодействовать с DOM, изменяя данные модели, а не взаимодействуя с созданными узлами. Следовательно, вы можете использовать событие dom-change для прямого доступа к узлам.