Введение
Поскольку веб-приложения становятся все более сложными, разработчики постоянно ищут способы создания многоразовых, модульных и масштабируемых компонентов пользовательского интерфейса. Веб-компоненты обеспечивают стандартизированный подход к созданию повторно используемых и интероперабельных пользовательских элементов, инкапсулируя их стили и поведение. В этом сообщении блога вы познакомитесь с основами веб-компонентов, их основными технологиями и практическими примерами, которые помогут вам приступить к созданию собственных многократно используемых компонентов пользовательского интерфейса.
Что такое веб-компоненты?
Веб-компоненты — это набор встроенных в браузер технологий, которые позволяют разработчикам создавать собственные, повторно используемые и инкапсулированные элементы HTML. Они состоят из трех основных частей:
- Cпользовательские элементы. Определите и зарегистрируйте новые HTML-теги, расширяющие стандартный набор HTML-элементов.
- Shadow DOM: инкапсулируйте структуру, стили и поведение компонента, чтобы избежать конфликтов с другими элементами на странице.
- Шаблоны HTML. Определяйте фрагменты HTML-разметки для повторного использования, которые при необходимости можно вставлять в модель DOM.
Создание пользовательского элемента
Во-первых, давайте создадим простой пользовательский элемент. В этом примере мы создадим компонент «карточка пользователя», который отображает имя пользователя и адрес электронной почты.
Определите класс пользовательского элемента
Создайте новый файл JavaScript с именем user-card.js и определите класс пользовательского элемента, расширив класс HTMLElement:
class UserCard extends HTMLElement {
constructor() {
super();
// Attach a shadow DOM to the custom element
this.attachShadow({ mode: 'open' });
}
}
// Register the custom element
customElements.define('user-card', UserCard);
Добавьте структуру и стили компонента
В конструкторе создайте шаблон для карточки пользователя и добавьте HTML-разметку и стили:
constructor() {
super();
// Attach a shadow DOM to the custom element
this.attachShadow({ mode: 'open' });
// Create a template for the user card
const template = document.createElement('template');
template.innerHTML = `
<style>
.user-card {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 4px;
padding: 16px;
}
.user-card img {
border-radius: 50%;
height: 48px;
width: 48px;
margin-right: 16px;
}
.user-info {
display: flex;
flex-direction: column;
}
</style>
<div class="user-card">
<img src="https://via.placeholder.com/48" alt="User Avatar" />
<div class="user-info">
<h4>Name</h4>
<p>Email</p>
</div>
</div>
`;
// Add the template content to the shadow DOM
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
Используйте пользовательский элемент в своем HTML
Теперь импортируйте скрипт user-card.js в свой HTML-файл и используйте элемент <user-card>:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Components Example</title> </head> <body> <user-card></user-card> <script src="user-card.js"></script> </body> </html>
Добавление атрибутов и прослушивателей событий
Чтобы сделать наш компонент <user-card> более динамичным, мы можем добавить атрибуты и прослушиватели событий. Это позволит нам передавать данные пользовательскому элементу и обрабатывать взаимодействия.
Добавить атрибуты
Измените класс UserCard, чтобы он принимал атрибуты name и email:
class UserCard extends HTMLElement {
constructor() {
super();
// Attach a shadow DOM to the custom element
this.attachShadow({ mode: 'open' });
// ...
// Update the template with attribute values
this.shadowRoot.querySelector('h4').textContent = this.getAttribute('name') || 'Name';
this.shadowRoot.querySelector('p').textContent = this.getAttribute('email') || 'Email';
}
}
// Register the custom element
customElements.define('user-card', UserCard);
Теперь вы можете передать атрибуты name и email элементу <user-card>:
<user-card name="John Doe" email="[email protected]"></user-card>
Добавить прослушиватели событий
Давайте добавим прослушиватель событий щелчка в карточку пользователя, который будет отображать оповещение с именем пользователя и адресом электронной почты:
class UserCard extends HTMLElement {
constructor() {
super();
// ...
// Add a click event listener
this.shadowRoot.querySelector('.user-card').addEventListener('click', () => {
alert(`User: ${this.getAttribute('name')} (${this.getAttribute('email')})`);
});
}
}
// Register the custom element
customElements.define('user-card', UserCard);
Теперь при нажатии на <user-card> будет отображаться предупреждение с информацией о пользователе.
HTML-шаблоны
Шаблоны HTML можно использовать для определения многократно используемых фрагментов разметки HTML, которые при необходимости можно вставлять в модель DOM. В нашем примере мы использовали шаблон в коде JavaScript. Однако вы также можете определить шаблон в своем HTML-файле и сослаться на него в своем пользовательском элементе:
<!-- Define the template in your HTML file --> <template id="user-card-template"> <!-- Add the same content as in the JavaScript template --> </template>
В своем классе UserCard ссылайтесь на шаблон по его идентификатору:
// Reference the template from the HTML file
const template = document.getElementById('user-card-template');
Заключение
Веб-компоненты предоставляют мощный и стандартизированный способ создания многоразовых, модульных и инкапсулированных компонентов пользовательского интерфейса. Поняв, что такое пользовательские элементы, Shadow DOM и HTML-шаблоны, вы сможете приступить к созданию собственных настраиваемых элементов, чтобы улучшить ремонтопригодность и масштабируемость ваших веб-приложений.
- Официальный сайт веб-компонентов
- Веб-документы MDN — веб-компоненты
- Разработчики Google — веб-компоненты
