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» в браузере в ближайшее время не вытеснят веб-фреймворки.

Схожие статьи

Валидный e-mail: что это, проверка почты на валидность через валидатор
Web

Валидный e-mail: что это, проверка почты на валидность через валидатор

Краткая инструкция, как заливать на Github коды собственных программ
Web

Краткая инструкция, как заливать на Github коды собственных программ

Web

Сортировка многомерного массива по нескольким столбцам

Web

Почему json_encode возвращает пустую строку