Всякий раз, когда мы используем любую из этих фрагментов, присутствующих на рынке, такие как реагирование, угловые, Vue и т. Д., Мы в основном сломаем наш пользовательский интерфейс на меньшие управляемые детали, называемые компонентами. Но вы когда-нибудь думали, что мы можем ли мы разделить наши UI на компоненты без использования этих рамх? Ответ на это да, и что помогает нам при этом – это веб-компоненты.
Что такое веб-компоненты?
Веб-компоненты – это сборник некоторых веб-API, которые позволяют разделить наш пользовательский интерфейс на более мелкие блоки, называемые компонентами. Это помогает нам инкапсулировать функциональность компонента в HTML-тег, который мы можем затем использовать в любом месте в нашем веб-приложении. Теперь вы можете подумать, что это звучит великолепно, но нам придется что-то установить? Ответ на это «нет», вам не нужно устанавливать что-либо, чтобы создать веб-компонент самого собственного, все это предлагается вам Vanilla JavaScript. Еще одна интересная особенность веб-компонентов состоит в том, что они могут, позже, которые будут использоваться с другими каркасами, такими как реагировать, угловые и Vue.
Технологии веб-компонентов
Чтобы предоставить вам функциональные возможности, инкапсулированные в рамках некоторых тегов HTML, веб-компоненты используют 3 основных технологий. Эти технологии помогают создавать универсальные компоненты без риска их столкновения в любой момент в нашем веб-приложении. Эти 3 основных технологии: –
1. Пользовательские элементы: – Пользовательские элементы позволяют нам создавать собственные собственные элементы HTML или расширить ранее существующие HTML-элементы и изменять их в соответствии с нашими требованиями. Чтобы создать наш собственный пользовательский элемент, нам нужно создать класс JavaScript, который расширяет класс HTMLELEMENT, чтобы определить функциональные возможности ранее существующих HTML-тегов. Пользовательские элементы имеют определенные методы жизненного цикла для определения событий, которые наш элемент пройдет. Некоторые из этих методов жизненного цикла: –
- Конструктор (): – ведет себя похожи на то, что ведет себя конструктор в нормальных объектно-ориентированных языках программирования. Метод жизненного цикла конструктора вызывается, когда создан экземпляр нашего элемента. Наиболее распространенными вещами в конструкторе инициализация состояния, добавление слушателей событий и т. Д.
- ConnectedCallback (): – Этот метод жизненного цикла называется, когда наш элемент вставлен в DOM (модель объекта документов).
- DisconnectedCallback (): – Этот метод жизненного цикла вызывается в любое время, когда наш элемент удален из DOM.
- AttributeChangedCallback (): – Этот метод жизненного цикла вызывается, когда любой атрибут либо добавлен, удален, обновляется или заменен в нашем элементе. Этот метод жизненного цикла принимает 3 параметра AttributeName, OldValue и NewValue.
2. Тень Дом: – Shadow DOM позволяет нам инкапсулировать «тень» DOM для нашего элемента. Это инкапсулирует стили и разметки для наших автономных компонентов. Это дает нашему элементу собственную идентичность, которая делает его отдельно от общего домика веб-страницы. Теневой Дом помогает предотвратить столкновение стилей и особенностей нашего компонента из общего глобального стиля и особенности страницы. Shadow DOM создается с помощью метода AttChidshadow с нашим именем элемента:
element_name.attachShadow({mode:open})
3. HTML шаблоны: – Шаблоны HTML позволяют нам определить инкапсулированную разметку веб-компонента. Метка шаблона сохраняет разметку на странице и может включать в себя HTML, так и CSS для нашего компонента. Слоты используются для добавления пользовательского текста на наш компонент. Оба шаблона, так и слота позволяют нам записывать разметки, которые не отображаются на представленной странице.
Давайте теперь создадим наш веб-компонент, обратитесь к этому блогу, чтобы получить подробные шаги по созданию собственного веб-компонента.
Оригинал: “https://dev.to/tejeshwer25/web-components-2303”