Статьи

Построение нестандартного элемента из полимера

Январь 14, 2019

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

Позволяет авторам определять и использовать новые типы элементов DOM в документе.

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

  1. Приличное количество JavaScript
  2. Знание JavaScript API (ов) для создания пользовательского элемента
  3. Обработка кросс-браузерных несоответствий.

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

Если вам нужно быстро освежить информацию о Polymer и Web-компонентах, я настоятельно рекомендую прочитать мою предыдущую статью о SitePoint, в которой подробно рассматриваются эти понятия.

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

Разметка цитат

Довольно часто можно видеть блок-кавычки, в aside или даже простой элемент div , используемый для разметки кавычек. Настало время покончить с этой загадкой, создав новый пользовательский элемент с именем <pull-quote> который может точно представлять наш контент. К концу этой статьи вы сможете создать что-то вроде этого:

Пользовательский элемент pull-quote

Настройка пользовательского элемента

Прежде чем мы начнем с нашего пользовательского элемента, мы быстро настроим папку проекта, установив Polymer и все зависимости через Bower . 

 $ bower install --save Polymer/polymer

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

  1. Создайте файл HTML с именем пользовательского элемента.
  2. Импортируйте файл bower_components папки bower_components с помощью <link> .
  3. Объявите свой пользовательский элемент, используя <polymer-element>
  4. Добавьте стили и разметку, необходимые для определения вашего пользовательского элемента, используя <template> .
  5. Если ваш пользовательский элемент включает JavaScript, вызовите конструктор Polymer() чтобы зарегистрировать элемент в DOM.

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

 <pull-quote>Sample text and can even contain other HTML tags.</pull-quote>

Мы начнем с создания файла с именем pull-quote.html в корневом каталоге. Отредактируйте файл и импортируйте файл bower_components который находится в папке bower_components : 

 <link rel="import" href="bower_components/polymer/polymer.html">

Мы объявим наш новый элемент <pull-quote> с помощью атрибута name <polymer-element> следующим образом: 

 <polymer-element name="pull-quote" noscript> <!-- More to come --> </polymer-element>

Несколько замечаний:

  1. Имя пользовательского элемента должно содержать символ дефиса (U + 002D HYPHEN-MINUS), чтобы анализаторы HTML могли отличать пользовательские элементы от обычных элементов HTML.
  2. Атрибут noscript указывает, что этому элементу для работы не требуется JavaScript, и, следовательно, его можно немедленно зарегистрировать в DOM.

Добавление контента

Содержимое, составляющее пользовательский элемент, определяется внутри <template> . Тег <template> обеспечивает отделение презентации от контента. В нашем случае все, что мы напишем внутри <pull-quote> будет составлять содержимое пользовательского элемента, а примененные к нему стили будут формировать представление.

В двух словах, есть три типа элементов DOM, с которыми мы имеем дело:

  1. Light DOM — включает в себя то, что мы пишем внутри пользовательского элемента. Следовательно, пользователь пользовательского элемента предоставляет Light DOM.
  2. Shadow DOM — включает в себя все, что мы определяем в <template> . Он является внутренним по отношению к элементу и охватывает все, что требуется для работы настраиваемого элемента.
  3. Составной DOM — это то, что на самом деле отображает браузер. Для рендеринга легкий DOM распределяется в теневом DOM для создания составного DOM.

Типы элементов DOM в пользовательском элементе

Тег <content> представляет точку вставки, в которую содержимое Light DOM будет введено в Shadow DOM. Тег <content> имеет гораздо более сложное применение при выборе только определенного контента, который вы пишете внутри пользовательского элемента. Однако ради этого примера мы будем придерживаться основного использования этого тега. 

 <polymer-element name="pull-quote" noscript> <template> <content></content> </template> </polymer-element>

Стилизация пользовательского элемента

Для стилизации нашего пользовательского элемента Polymer предоставляет набор полезных селекторов. Например:

  1. :host — Нацелен на сам пользовательский элемент.
  2. :host(<pseudo-class>) — нацеливает различные состояния пользовательского элемента, такие как :host(:hover) :host(:active) и т. д.
  3. :host(<class-name>) — нацеливается только на те пользовательские элементы, которые имеют указанное имя класса.
  4. :host-context(<selector>) — этот псевдокласс нацелен на элемент host, если он или любой из его предков соответствует <selector> . Это особенно полезно для создания тем, когда вы применяете связанные с темой классы к тегам <html> или <body> .

Совет для профессионалов — если вы просто используете селекторы (например, p , #id или .class ) без :host то они автоматически станут наследующими селекторами. Например, чтобы нацелить тег абзаца внутри <pull-quote> мы можем просто использовать p { ... } и тогда он будет автоматически расширен как pull-quote p { ... } .

Мы можем выбрать стиль нашего пользовательского элемента, используя <style> : 

 <template> <style> :host { display: inline-block; font-style: italic; text-align: justify; width: 325px; line-height: 30px; } </style> <content></content> </template>

Или мы можем написать наш CSS в новом файле, таком как pull-quote.css а затем импортировать этот файл в наш файл pull-quote.html используя <link> : 

 <link rel="stylesheet" href="pull-quote.css">

Несколько замечаний:

  1. По умолчанию все пользовательские элементы установлены как display: inline . Следовательно, мы должны явно объявить display: inline-block .
  2. Селектор :host имеет самую низкую специфичность. Следовательно, пользователи могут переопределять ваши стили вне пользовательского элемента.

На момент написания статьи использование псевдоэлементов ( ::before и ::after ) в селекторе :host , например :host::before {...} , не работает должным образом в браузерах Blink (Chrome и Opera). Похоже, это известная ошибка , которая была исправлена ​​и скоро будет поставлена ​​с Chrome 38. Но это не должно помешать нам использовать их в целом.

Чтобы окружить наши pull-кавычки реальными кавычками, у нас есть три варианта.

Добавление цитат с помощью :host псевдоэлементов :host

Первый вариант — использовать :host::before и :host::after из пользовательского элемента для добавления двойных кавычек: 

 :host::before { content: '\201C'; } :host::after { content: '\201D'; }

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

Добавление кавычек с регулярными псевдоэлементами

Вы также можете использовать pull-quote::before и pull-quote::after для добавления двойных кавычек извне пользовательского элемента. 

 pull-quote::before { content: '\201C'; } pull-quote::after { content: '\201D'; }

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

Добавление цитат с дополнительным HTML

Последний вариант — использовать HTML для добавления двойных кавычек в сам шаблон: 

 <template> <span>&quot;</span> <content></content> <span>&quot;</span> </template>

Это работает во всех браузерах тоже! Кроме того, вы можете также стилизовать кавычки с помощью CSS, который затем может находиться внутри <template> .

Используя наш готовый элемент pull-quote

Убедитесь, что вы добавили polyfill platform.js в <head> вашего документа. Этот polyfill гарантирует, что ваши пользовательские элементы продолжат работать должным образом даже в браузерах, которые их не поддерживают. 

 <script src="bower_components/platform/platform.js"></script>

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

  1. Загрузите пакет Custom Element через Bower.
  2. Импортируйте соответствующий файл .html в ваш документ.

  3. Используйте разметку пользовательского элемента в любом месте вашего документа. 

     <html> <head> <script src="bower_components/platform/platform.js"></script> <link rel="import" href="pull-quote.html"> </head> <body> <pull-quote>Sample text inside pull quote</pull-quote> <pull-quote> <p>Can also contain other tags</p> </pull-quote> </body> </html>

Ознакомьтесь с полным кодом вместе с демонстрацией на Plunker . Я также настроил репозиторий проекта на Github для пользовательского элемента pull-quote . И если вам нужно больше, CustomElements.io , проект Zeno Rocha, имеет полезную коллекцию пользовательских элементов, созданных с использованием Polymer, X-Tag и т. Д.

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

40
Share: