Библиотека Polymer предоставляет набор функций для создания пользовательских элементов. Эти функции призваны упростить и ускорить создание настраиваемых элементов, которые работают как стандартные элементы DOM. Подобно стандартным элементам DOM, элементы Polymer могут быть:

  • Создается с использованием конструктора или document.createElement.
  • Настраивается с использованием атрибутов или свойств.
  • Заполняется внутренней DOM внутри каждого экземпляра.
  • Реагирует на изменения свойств и атрибутов.
  • Стили с внутренними настройками по умолчанию или внешними.
  • Отзывчивый на методы, которые манипулируют его внутренним состоянием.

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

«Предварительная версия Polymer 3.0 доступна для экспериментов, и сегодняшний выпуск поможет вам начать работу. Но учтите, что мы сознательно используем слово «эксперимент». Это очень ранний предварительный просмотр, и здесь определенно много шероховатостей ».

Теперь вы можете начать работать с полимером с помощью ваших любимых инструментов, таких как менеджер пакетов NPM, например npm, yarn и модули, использующие ES6.

Установка

Для начала вам необходимо обновить свой полимерный интерфейс командной строки.

npm install -g polymer-cli

Вам также потребуется установить диспетчер пакетов Yarn для установки компонентов. См. Инструкции на странице установки Yarn.

Теперь, чтобы проверить предварительный просмотр, вам необходимо иметь Chrome 61 или последнюю версию Safari, так как они поддерживают полифил в браузере.

Установите зависимости с помощью Yarn

В npm полимерные компоненты публикуются под namespace@polymer

Инициализируем проект:

yarn init

Отредактируйте созданный файл package.json и добавьте свойство "flat": true.

{
  "name": "my-app",
  "flat": true,
  ...

Установите компоненты, используя yarn add, что эквивалентно bower install --save. Например:

yarn add @polymer/polymer@next
yarn add @webcomponents/webcomponentsjs

Импортировать зависимости

Вы можете импортировать модуль в HTML, используя ‹script type="module">. Например, ваш index.html может выглядеть так:

<!doctype html>
<html>
  <head>
    <!-- Load polyfills. Same as 2.x, except for the path -->
    <script
        src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js">
    </script>

    <!-- Import the my-app element's module. -->
    <script type="module" src="src/my-app.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

Изнутри модуля вы можете импортировать модуль с помощью оператора import:

import {Element as PolymerElement}
    from "../node_modules/@polymer/polymer/polymer-element.js"

Как и в случае с зависимостями Bower, повторно используемые элементы не должны включать node_modules в путь (например, ../@polymer/polymer/polymer-element.js).

Следует отметить несколько важных моментов, касающихся модулей и оператора import:

  • Как и при импорте HTML, при импорте должен использоваться путь, а не имя модуля.
  • Импортированный путь должен начинаться с «./», «../» или «/».
  • Оператор import может использоваться только внутри модуля (то есть внешнего файла или встроенного скрипта, загруженного с <script type="module">.
  • Модули всегда работают в строгом режиме.

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

import "../@polymer/paper-button/paper-button.js"

Что касается поведения, вы обычно импортируете его явно:

import {IronResizableBehavior}
    from "../@polymer/iron-resizable-behavior/iron-resizable-behavior.js"

Для служебных модулей, таких как Async, которые экспортируют несколько элементов, вы можете импортировать отдельные элементы или весь модуль:

import * as Async from "../@polymer/polymer/lib/utils/async.js"
Async.microTask.run(callback);

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

Определение элементов

Вместо определения элементов в HTML-импорте вы определите элементы в модулях ES6. Помимо очевидной разницы, заключающейся в том, что вы пишете файл JavaScript вместо файла HTML, в новом формате есть три основных отличия:

  • При импорте используется синтаксис импорта ES6, а не <link rel="import">.
  • Шаблоны определяются путем предоставления template получателя, который возвращает строку, а не элементы <dom-module> и <template>.
  • Вместо определения глобальных переменных (например, при определении поведения или миксинов) используйте оператор export для экспорта символов из модулей.

Например:

my-app.js

// Element is the same as Polymer.Element in 2.x
// Modules give you the freedom to rename the members that you import
import {Element as PolymerElement}
    from '../node_modules/@polymer/polymer/polymer-element.js';

// Added "export" to export the MyApp symbol from the module
export class MyApp extends PolymerElement {

  // Define a string template instead of a `<template>` element.
  static get template() {
    return `<div>This is my [[name]] app.</div>`
  }

  constructor() {
    super();
    this.name = '3.0 preview';
  }

  // properties, observers, etc. are identical to 2.x
  static get properties() {
    name: {
      Type: String
    }
  }
}

customElements.define('my-app', MyApp);

Как видите, за исключением изменений, отмеченных выше, определение элемента выглядит так же, как в 2.x. На данный момент в API 2.x внесено лишь несколько изменений, связанных с динамическим импортом: в частности, функция Polymer.importHref больше не поддерживается; его планируется заменить динамическим импортом ES6.

Для многоразового элемента при импорте класса Polymer Element папка node_modules будет опущена:

import {Element as PolymerElement}
    from '../@polymer/polymer/polymer-element.js';

Запустить проект

polymer serve --npm
polymer test --npm