Web

Элементы веб-страницы: как использовать программу webcomponents

Lorem ipsum dolor

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

На текущий момент технология «web components» находится в разработке. Часть процессов уже поддерживается современными браузерами, но некоторые браузеры все еще «тянут» с внедрением этой технологии. Если присутствует желание ее попробовать, тогда это можно сделать в Google Chrome. Разработчики этого браузера «впереди всей планеты», поэтому они первыми внедрили поддержку веб-компонентов в свое детище.

Веб-компоненты возникли, как альтернатива фреймворкам и сторонним библиотекам. С этой технологией ничего не нужно подключать «со стороны». Суть ее сводится к тому, что веб-разработчик пишет какой-то код единожды и оформляет его как «веб-компонент». А потом использует в своей работе уже готовый веб-компонент сколько угодно раз, причем не нужно переписывать код  компонента раз за разом.

Такой компонентный подход в веб-разработке раньше был только у «модных» фреймворков типа Vue.js  или React.js, а теперь стал доступен в «чистом» HTML, что не может не радовать веб-разработчиков.

Веб-компоненты, как элементы страницы

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

Возьмем в качестве примера компьютер:

  • в его состав входит множество разнообразных компонентов: процессор, видеокарта, SSD или HDD, экран, клавиатура и др.;

  • каждый отдельный компонент может состоять из множества более мелких элементов;

  • каждый отдельный компонент достаточно сложно устроен и может быть разработан  разнообразными компаниями из разнообразных частей нашей планеты;

  • собрав все компоненты вместе мы имеем работающее устройство, удовлетворяющее нашим потребностям.

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

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

  • заголовок и верхняя навигация;

  • основной контент сайта;

  • боковая часть виджетов и бокового меню;

  • подвал сайта с нижним меню и какой-то информацией.

Если зайти на страницу социальной сети, тогда там можно разглядеть  другие компоненты. Например еще:

  • информация о пользователе с его фотографией;

  • статус пользователя и предложение подписаться на него;

  • компонент отправки сообщения;

  • лента новостей от друзей;

  •  и др.

Каждый такой компонент может состоять из других более мелких компонентов. Каждый «более мелкий компонент» может быть самостоятельным компонентом или нет и т. д.

Как определить, что компонент на сайте является отдельным веб-компонентом? Зайдя на страницу, веб-компонент можно определить визуально. А с технической стороны он определяется следующими свойствами:

  • отдельный компонент обладает собственным JavaScript-классом;

  • DOM-структура компонента контролируется только собственным классом и инкапсулирована от внешнего воздействия;

  • к компоненту применяются собственные CSS-свойства;

  • компонент может взаимодействовать с другими компонентами при помощи API.

По такому принципу веб-компоненты формируются в различных фреймворках и в «web components». Разница в том, что фреймворки — это внешние инструменты, а  «web components» — это инструмент, который встроен непосредственно в браузер. 

Как создать веб-компоненты

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

Пользовательские веб-компоненты бывают двух видов:

  1. Абсолютно новые веб-компоненты. Это те, которые были созданы пользователем «с нуля».

  2. Встроенные веб-компоненты. Это те, которые были созданы на основе существующих 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

Как использовать array_filter() для фильтрации ключей массива в PHP

Web

Когда я использую Plesk, отображается фатальная ошибка PHP

Web

Как определить язык браузера в PHP

Web

Как создать сервер веб-сокетов на PHP

×