Веб-компоненты кратко

Привет, Вы узнаете о том , что такое веб-компоненты, Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое веб-компоненты , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).

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

Веб-компоненты не нужно путать с HTML-компонентами ( HTC ) — это устаревшая технология .

Вот основные концепции веб-компонентов:

1. Custom Elements (Пользовательские элементы):

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

   • Позволяют разработчикам создавать свои собственные HTML-теги с пользовательской логикой и стилями.
   • Пример: < my-custom-element >< /my-custom-element >.

2. Shadow DOM (Теневой DOM):

   Shadow DOM — это функция, которая позволяет веб-браузеру отображать элементы DOM , не помещая их в дерево DOM основного документа. Это создает барьер между тем, чего могут достичь разработчик и браузер; разработчик не может получить доступ к Shadow DOM так же, как к вложенным элементам, в то время как браузер может отображать и изменять этот код так же, как и к вложенным элементам. Влияние CSS, ограниченного областью Shadow DOM конкретного элемента, заключается в том, что элементы HTML могут быть инкапсулированы без риска утечки стилей CSS и влияния на элементы, на которые они не должны были влиять. Хотя эти элементы инкапсулированы с учетом HTML и CSS, они все равно могут генерировать события, которые могут быть получены другими элементами документа.

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

   Теневой DOM всегда должен быть подключен к существующему элементу либо путем прикрепления его как буквального элемента, либо с помощью сценария . В JavaScript теневые DOM прикрепляются к элементу с помощью Element.attachShadow().

   • Предоставляет изолированный DOM для компонента, что позволяет избежать конфликтов стилей и скриптов с остальной частью страницы.
   • Улучшает инкапсуляцию и повторное использование компонентов.

3. HTML Templates (HTML-шаблоны):

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

     Шаблон HTML — это способ вставки фрагментов HTML, клонированных из шаблона по желанию. Об этом говорит сайт https://intellect.icu . Синтаксис HTML-шаблонов выглядит следующим образом:

     < html > 
         < template > 
             < h1 >< slot  name = "title" >/ slot >/ h1 > 
             < p >< slot  name = "description" >/ slot >/ p > 
         </ template > 
     </ html >
     

     Сценарии не будут выполняться, а ресурсы, находящиеся внутри шаблона, не будут извлекаться до тех пор, пока не будет создан экземпляр шаблона.

4. HTML Imports (Импорты HTML):

   • Позволяют импортировать и использовать HTML, CSS и JavaScript из других файлов, улучшая организацию кода.

5. JavaScript API (JavaScript-интерфейс прикладного программирования):

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

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

Пример создания пользовательского элемента с использованием Custom Elements API может выглядеть следующим образом. Допустим, вы хотите создать простой пользовательский элемент <my-greeting> для вывода приветствия с именем. Давайте реализуем это с использованием HTML, CSS и JavaScript:

1. HTML:

2. CSS (styles.css):

/* Стили для пользовательского элемента */
 my-greeting { 
      font-family: Arial, sans-serif; 
      color: green; 
 } 

3. JavaScript (script.js):

 
// Определение класса для пользовательского элемента
class MyGreeting extends HTMLElement {
  constructor() {
    super();

    // Получение значения атрибута "name"
    const name = this.getAttribute('name') || 'Guest';

    // Создание Shadow DOM
    const shadow = this.attachShadow({ mode: 'open' });

    // Создание элемента для отображения приветствия
    const greetingElement = document.createElement('span');
    greetingElement.textContent = `Hello, ${name}!`;

    // Присоединение элемента к Shadow DOM
    shadow.appendChild(greetingElement);
  }
}

// Регистрация пользовательского элемента
customElements.define('my-greeting', MyGreeting);

В этом примере:

• Мы создаем класс MyGreeting, расширяющий HTMLElement.
• В конструкторе получаем значение атрибута name и создаем Shadow DOM для изоляции стилей.
• Создаем элемент span с приветствием и добавляем его в Shadow DOM.
• Регистрируем пользовательский элемент с именем my-greeting с использованием customElements.define.

Теперь, если вы откроете HTML-файл в браузере, вы увидите "Hello, John!" с примененными стилями из CSS. Вы также можете использовать этот пользовательский элемент в других местах вашего проекта.

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

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

Обратная совместимость со старыми браузерами реализована с помощью полифилов на основе JavaScript .

Библиотеки

Существует множество библиотек, построенных на веб-компонентах с целью повышения уровня абстракции при создании пользовательских элементов. Некоторые из этих библиотек: X-Tag , Slim.js , Polymer , Bosonic , Riot.js , Salesforce Lightning Web Components , DataFormsJS и Telepathy.

Из приведенного выше списка Bosonic, Polymer, Telepathy и DataFormsJS предоставляют готовые компоненты, которые можно использовать бесплатно. Эти компоненты можно использовать взаимозаменяемо, поскольку все они созданы на основе открытых веб-технологий. В то время как Bosonic, Polymer и DataFormsJS имеют гораздо больше готовых компонентов. Телепатия «сама близка к железу» в том смысле, что ее единственная цель — помочь разработчику быстро создавать легко поддерживаемые веб-компоненты.

Сообщество

Сообщество прилагает многочисленные усилия для развития экосистемы веб-компонентов. WebComponents.org предоставляет интерфейс для поиска любых существующих веб-компонентов, Custom Elements Everywhere проверяет, совместимы ли популярные интерфейсные платформы и готовы ли они к использованию стандарта веб-компонентов, с набором ожидающих ошибок и доступных обходных путей. Более того, в Vaadin Tutorials есть специальный раздел, в котором показано, как эффективно использовать эти обходные пути с примерами демонстрационных приложений и аналогичными темами.

История

В 2011 году веб-компоненты были впервые представлены Алексом Расселом на конференции Fronteers.

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

В 2016 году RequireJS был представлен как библиотека JavaScript и плагин-загрузчик AMD для пользовательских элементов.

В 2017 году команда Ionic (инфраструктура мобильных приложений) создала StencilJS , компилятор JavaScript, который генерирует веб-компоненты.

В 2018 году в Angular 6 были представлены элементы Angular, которые позволяют упаковывать ваши компоненты Angular в виде пользовательских веб-элементов, которые являются частью набора веб-компонентов API-интерфейсов веб-платформы.

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

В 2018 году LitElement был разработан командой Google Chrome как часть более крупного проекта Polymer . LitElement был разработан как легкая и простая в использовании платформа для создания веб-компонентов.

Вау!! 😲 Ты еще не читал? Это зря!

• HTML-компоненты
• Веб- фреймворк
• Веб-ресурс

Исследование, описанное в статье про веб-компоненты, подчеркивает ее значимость в современном мире. Надеюсь, что теперь ты понял что такое веб-компоненты и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)