Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Как создавать собственные HTML элементы с помощью Web Components

by
Length:MediumLanguages:
This post is part of a series called Strange and Unusual HTML.
Introducing the HTML5 “Menu” and “Menuitem” Elements
Meta Tags and SEO

Russian (Pусский) translation by Aleksandr Dokin (you can also view the original English article)

О веб-компонентах в настоящий момент говорят как о предстоящем "тектоническом сдвиге в веб-разработке", обещая постоянное изменение ландшафта веб дизайна. Крупные игроки движутся вперед, чтобы воплотить веб-компоненты в реальность. Google и Mozilla уже постепенно выкатывают нативную поддержку в своих браузерах.

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

Понимание веб-компонент

Самый легкий путь понять, как веб-компоненты позволяют использовать кастомные HTML элементы - это взглянуть на существующий, уже известный нам тег <video>. Используя этот элемент, вы можете размещать видео при помощи нескольких строк кода:

Вы видите только несколько строк, но вот как реально выглядит элемент <video>:

По умолчанию браузер прячет этот длинный код, так что вам не нужно его видеть или заботиться о его написании, когда хотите разместить видео. Вы просто пишете теги <video> и <source> и все в порядке.

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

Возьмем к примеру слайд-шоу картинок. Обычно для него требуется несколько div-элементов со специальными классами: для обертки всего слайд-шоу, каждого слайда, а также для добавления подписей (captions) и миниатюр (thumbnails). Еще нужно будет установить какие-то общие параметры слайд-шоу, такие как например эффекты перехода слайдов (slide transition effects), встраивая для этого JQuery / JavaScript код.

Что если бы вы могли пропустить все это и просто использовать:

Это именно то, что можно сделать при помощи веб-компонентов.

Создание собственных HTML элементов

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

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

до создания презентаций..

и генерации QR кода.

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

Что делает веб-компонент

Веб-компоненты (как они существуют на данный момент) состоят из четырех частей:

  • Кастомные элементы
  • Теневой DOM
  • Шаблоны
  • HTML импорты

Кастомные элементы

Кастомные элементы - это элементы, которые могут быть названы как угодно и работать так, как вам захочется. И когда я говорю "как захочется", я действительно имею это ввиду. Для примера представляю вам элемент <x-gangnam-style>:

Демо - направляйте на цветную панель

Кастомные элементы объявляются в простом виде, например так:

Когда вы создаете кастомный элемент, можете делать это полностью с нуля, или же можете расширить существующий HTML элемент (к примеру <button>) и изменить его функциональные возможности или представление (отображение) так, как нужно.

Примечание: стоит отметить, что тег <element> был признан устаревшим в 2013 году из-за возникших осложнений. Его еще могут вернуть, но в то же время существует варианты с polyfill, о которых будет сказано чуть позже. Спасибо Эдди Османи (Addy Osmani) за то, что указал на это!

Теневой DOM

Теневой DOM является действительно основным аспектом работы веб-компонентов. Ранее мы посмотрели на элемент <video> и показали, что несмотря на видимые нам несколько строк, в действительности имеется довольно много кода, скрытого по умолчанию. Место, где "живет" этот скрытый код называется «Теневой DOM» (shadow DOM).

Производители браузеров используют этот теневой DOM годами для реализации нативной поддержки таких элементов, как input, audio, video и т.д. Теперь же они могут использоваться любым разработчиком через веб-компоненты.

Основная идея заключается в том, что вы берете весь код, который реально не надо видеть во время написания разметки, и прячете его в теневой DOM, чтобы не мешался. Это позволяет нам иметь дело лишь с соответствующей информацией, например при использовании элемента <video> это высота, ширина и путь к файлу.

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

И наоборот, CSS и JavaScript со страницы не повлияют на ваш веб-компонент, за исключением стилевых хуков (style hooks), которые вы можете создать специально для разрешения внешних CSS-правил. Все это означает не более чем беспокойство об именовании id и классов, дабы избежать конфликтов.

Если вы хотите увидеть, как выглядит теневой DOM, это легко. Удостоверьтесь что используете последнюю версию Chrome, откройте Dev Tools (инструменты разработчика), кликните по иконке шестеренки для открытия настроек и, наконец, установите флажок Show user agent shadow DOM:

Когда вы просматриваете элемент с теневым DOM, вы видите его полный код. Взгляните на <x-gangnam-style> с включенным и выключенным показом shadow DOM: http://html5-demos.appspot.com/gangnam

Для полного понимания теневого DOM прочтите: Intro to Shadow DOM

Шаблоны

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

Для этого используются теги <template>...</template>, и внутри включают любой HTML и CSS, которые нужны для компонента.

Для примера взгляните на код созданного <x-gangnam-style>. На 4 строке открывается <template>, а на 201 закрывается </template>. Внутри тегов вы увидите весь CSS, нужный для позиционирования и создания анимаций, а также HTML для вставки всех необходимых изображений.

HTML импорты

HTML импорты позволяют принять все вышеописанные вещи и фактически заставляют их работать на вашей странице. Веб-компоненты определяются во внешнем HTML файле, который необходимо импортировать, чтобы кастомный элемент заработал. HTML импорты делаются с помощью тега <link>, который вам наверняка знаком по импортированию внешних CSS файлов.

К примеру, перед тем как вы сможете использовать веб-компонент <x-gangnam-style>, вам нужно импортировать HTML файл следующим образом:

Поддержка браузерами и Polyfills

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

http://jonrimmer.github.io/are-we-componentized-yet/

Нативная поддержка реализуется в Chrome, Opera и Firefox, но еще не завершена. IE и Safari еще не заявляли о своих планах, однако, учитывая, что большинство браузеров будут поддерживать веб-компоненты, считается, что в конечном счете и остальные браузеры последуют этому примеру.

А если вы хотите начать работать с веб-компонентами прямо сейчас - вам нужно использовать один из доступных polyfills. Хорошая новость заключается в том, два самых популярных решения создаются в Google и Mozilla, поэтому мы можем ожидать определенную согласованность с тем, как в конечном счете будет работать их нативная поддержка в браузере.

Polymer от Google

Трудно не склониться к использованию Polymer, учитывая что Chrome в настоящее время является наиболее распространенным браузером. Вы могли бы предположить, что в процессе разработки будет учитываться то, как код веб-компонент проиндексируется поисковиком Google.

Polymer поставляется с полной библиотекой готовых веб-компонентов. Он включает в себя функционально ориентированные "Polymer Core elements" и дизайн-ориентированные "Paper elements".

При создании кастомных элементов с использованием Polymer, вместо такого формата <element name="..."> применяется <polymer-element name="...">.

Polymer позиционируется как "developer preview" вместо production ready, однако также говорится

... несмотря на это, многие уже успешно применяют Polymer в production.

Поддержка браузерами

  • Chrome Android
  • Chrome
  • Canary
  • Firefox
  • IE 10+
  • Safari 6+
  • Mobile Safari

Если вам нужна поддержка IE9, который занимает от 1,9% до 5.11% доли рынка, то к сожалению, Polymer - не ваш вариант. Однако вы можете воспользоваться Mozilla X-Tags.

X-Tags от Mozilla

X-Tags - это JavaScript библиотека от Mozilla, в настоящее время имеющая преимущество над Polymer в плане более широкой поддержки браузерами. Если это важно, можете выбирать X-Tags.

Поддержка браузерами

  • Firefox 5+ desktop & mobile
  • Chrome 4+
  • Chrome Android 2.1+
  • Safari 4+ desktop & mobile
  • IE9+
  • Opera 11+ desktop & mobile

Поддержка IE8

Если вам нужно поддерживать IE8, то на сегодня, к сожалению, нет подходящих средств, т.к. все существующие polyfills для веб-компонентов имеют поддержку IE9+. По оценкам, имеется от 2,1% до 3,82% пользователей с IE8, но, конечно, если ваша собственная статистика говорит о другом, вам придется самим принять решение по этому поводу.

Компоненты Ember.js и Angular.js

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

Компоненты, созданные сообществом

Узнайте больше

Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.