Веб-компоненты — это набор стандартов, который дает возможность придумывать новые собственные HTML-элементы, а потом их использовать по своему назначению. У каждого собственного HTML-элемента будут свои свойства, методы, стили и др.
На текущий момент технология «web components» находится в разработке. Часть процессов уже поддерживается современными браузерами, но некоторые браузеры все еще «тянут» с внедрением этой технологии. Если присутствует желание ее попробовать, тогда это можно сделать в Google Chrome. Разработчики этого браузера «впереди всей планеты», поэтому они первыми внедрили поддержку веб-компонентов в свое детище.
Веб-компоненты возникли, как альтернатива фреймворкам и сторонним библиотекам. С этой технологией ничего не нужно подключать «со стороны». Суть ее сводится к тому, что веб-разработчик пишет какой-то код единожды и оформляет его как «веб-компонент». А потом использует в своей работе уже готовый веб-компонент сколько угодно раз, причем не нужно переписывать код компонента раз за разом.
Такой компонентный подход в веб-разработке раньше был только у «модных» фреймворков типа Vue.js или React.js, а теперь стал доступен в «чистом» HTML, что не может не радовать веб-разработчиков.
Веб-компоненты, как элементы страницы
Веб-компоненты — это отдельные элементы страницы. В компонентном подходе ничего нового нет. Как мы уже говорили, его используют некоторые фреймворки в веб-разработке. Но и в быту он применяется довольно часто.
Возьмем в качестве примера компьютер:
в его состав входит множество разнообразных компонентов: процессор, видеокарта, SSD или HDD, экран, клавиатура и др.;
каждый отдельный компонент может состоять из множества более мелких элементов;
каждый отдельный компонент достаточно сложно устроен и может быть разработан разнообразными компаниями из разнообразных частей нашей планеты;
собрав все компоненты вместе мы имеем работающее устройство, удовлетворяющее нашим потребностям.
При этом один и тот же компонент компьютера может работать в разных устройствах с разными параметрами и разным назначением.
Веб-компоненты имеют схожий принцип работы, только они относятся к веб-сайтам. В принципе, зайдя на любой веб-сайт, его можно визуально «разделить» на несколько компонентов. Например:
заголовок и верхняя навигация;
основной контент сайта;
боковая часть виджетов и бокового меню;
подвал сайта с нижним меню и какой-то информацией.
Если зайти на страницу социальной сети, тогда там можно разглядеть другие компоненты. Например еще:
информация о пользователе с его фотографией;
статус пользователя и предложение подписаться на него;
компонент отправки сообщения;
лента новостей от друзей;
и др.
Каждый такой компонент может состоять из других более мелких компонентов. Каждый «более мелкий компонент» может быть самостоятельным компонентом или нет и т. д.
Как определить, что компонент на сайте является отдельным веб-компонентом? Зайдя на страницу, веб-компонент можно определить визуально. А с технической стороны он определяется следующими свойствами:
отдельный компонент обладает собственным JavaScript-классом;
DOM-структура компонента контролируется только собственным классом и инкапсулирована от внешнего воздействия;
к компоненту применяются собственные CSS-свойства;
компонент может взаимодействовать с другими компонентами при помощи API.
По такому принципу веб-компоненты формируются в различных фреймворках и в «web components». Разница в том, что фреймворки — это внешние инструменты, а «web components» — это инструмент, который встроен непосредственно в браузер.
Как создать веб-компоненты
После того как пользовательские веб-компоненты будут созданы, они могут использоваться как стандартные HTML-компоненты. Очень удобно, что даже имя тега можно придумать собственное.
Пользовательские веб-компоненты бывают двух видов:
Абсолютно новые веб-компоненты. Это те, которые были созданы пользователем «с нуля».
Встроенные веб-компоненты. Это те, которые были созданы на основе существующих HTML-компонентов.
Создание веб-компонентов сводится к тому, что нужно объявить браузеру определенную информацию о компоненте, чтобы он мог с ним правильно взаимодействовать. Эта информация добавляется с помощью объявления класса веб-компонента со специальными методами. Методы можно объявлять, а можно не объявлять. Каждый метод отвечает за какое-то событие с вашим веб-компонентом. Если вам важно, чтобы браузер правильно реагировал на это событие, тогда объявляйте нужный метод.
Веб-компоненты создаются по такому шаблону:
class PrivateElement extends HTMLElement {
constructor() {
super();
//на этом этапе мы создали собственный веб-компонент
}
//далее объявляем дополнительные методы веб-компонента
connectedCallback() {
// когда компонент добавляется в HTML-документ, тогда браузер обращается к этому методу
// браузер может обращаться к этому методу сколько угодно раз
}
disconnectedCallback() {
// когда веб-компонент удаляется из HTML-документа, тогда браузер обращается к этому методу
// браузер может обращаться к этому методу сколько угодно раз
}
static get observedAttributes() {
return [/* определяем набор атрибутов нашего веб-компонента, чтобы отслеживать его изменения */];
}
attributeChangedCallback(name, oldValue, newValue) {
// браузер обращается к этому методу, когда один из атрибутов, объявленных выше, изменился
}
adoptedCallback() {
// браузер обращается к этому методу, когда веб-компонент был перемещен в другой HTML-документ
}
// веб-компоненту можно прописать множество других методов.
}
Когда веб-компонент был полностью сформирован, его нужно «зарегистрировать» в браузере, чтобы браузер понимал о его наличии. Это делается вот такой строкой кода:
customElements.define("private-element", PrivateElement);
После таких небольших манипуляций вы можете использовать собственный HTML-компонент с тегом <private-element>. Причем обращаться к нему можно и с помощью JavaScript.
Важно отметить один нюанс. Обязательным условием при создании веб-компонентов является использование в имени пользовательского компонента «дефиса» при его «регистрации» в браузере. Например как у нас «private-element». Это нужно для того, чтобы в дальнейшем избежать конфликта между именами пользовательских и встроенных компонентов.
Заключение
«Web components» — что это за программа? Такой вопрос часто задают начинающие разработчики. Это не совсем программа, это специальный инструмент, встроенный в браузер, который позволяет создавать и использовать веб-компоненты в своей работе.
Веб-компоненты, как технология, уже известны давно и активно используются многими фреймворками для веб-разработки. Веб-компоненты, как инструмент встроенный в браузер, используются относительно недавно и находятся в стадии «развития». Часть веб-разработчиков пророчат, что когда веб-компоненты станут функционировать на полную мощь, тогда отпадет потребность использовать фреймворки для веб-разработки. Это довольно сомнительное «пророчество», так как «компонентность» — это всего лишь одно из преимуществ веб-фреймворков и далеко не основное. Поэтому «web components» в браузере в ближайшее время не вытеснят веб-фреймворки.
Web