Как фронтенд-программисты, мы, конечно, испытывали проблемы при разработке нашего приложения. Один из них - добавлять каждый раз одну и ту же строку кода для одного и того же дизайна. Представьте, что в вашем приложении есть раздел со сложным дизайном и длинными именами классов, который также должен создавать дополнительные уникальные атрибуты (например, id, class и т. Д.) Для каждой из этих частей для обработки различных событий в Javascript. Конечно, это утомительная работа, которая заставляет нас тратить много времени только на что-то однообразное.
Итак, вот и герой! представить веб-компонент. Веб-компонент предоставляет стандартную компонентную модель для Интернета, позволяющую инкапсулировать и взаимодействовать с отдельными элементами HTML [1]. В качестве простого объяснения мы можем создать сложный дизайн, который содержит различные типы содержимого, и поместить его в простой HTML-тег ONE, точно так же, как вы строите здание или другой объект с помощью lego, веб-компонент является части лего, которые вы можете создать и сочетать с другими частями лего, зависят от слота. Звучит интересно, правда?
Если вы использовали современный JS фреймворк, такой как React или Vue, и используете их компоненты, вы, вероятно, знаете о некоторых основных веб-компонентах. Итак, в этой статье мы узнаем больше о веб-компоненте, создав простой веб-компонент с нуля. Хорошо пойдем..
Базовая настройка
Перейдите в любимый текстовый редактор и сделайте index.html в стандартном формате HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Web Component</title>
</head>
<body>
</body>
</html>
Затем внутри тела добавьте тег настраиваемого компонента, подобный этому
... <body> <my-custom-component></my-custom-component> </body> ...
Если вы откроете / запустите index.html сейчас в браузере, вы увидите только пустую страницу, потому что мы не заполнили никаких специальных элементов / тегов. Итак, мы переходим к следующему шагу, который должен сделать шаблон и функционировать как часть настраиваемого элемента.
Добавить тег шаблона
Первый. Создайте тег шаблона под тегом настраиваемого элемента. Тег шаблона - это HTML-тег, который скрывает свое содержимое от клиента. Контент внутри тега шаблона не будет отображаться. Контент можно увидеть и отобразить позже с помощью JavaScript. Используйте тег шаблона, когда у вас есть HTML-код, который вы хотите использовать снова и снова, но только после того, как вы его попросите [2]. Хорошо, добавьте это так:
...
<body>
<my-custom-component></my-custom-componet>
<template id="ElementCustom">
<h1>This is from Custom Component</h1>
</template>
</body>
...
Мы должны добавить атрибут id в шаблон тега в качестве маркера для классов и функций в javascript, который мы затем создадим для извлечения содержимого из шаблона тега и перемещения его в ‹my-custom-element› ‹/ my-custom -элемент › теги.
Сделать класс для настраиваемого элемента
Итак, на следующем шаге мы создадим класс Javascript для обработки содержимого настраиваемого элемента, добавим класс MyCustomComponent с конструктором функции в тег ниже шаблона.
<body>
...
<template id="ElementCustom">
<h1>This is from Custom Component</h1>
</template>
<script type="text/javascript">
class MyCustomComponent extends HTMLElement{
constructor() {
// Always call this method in the constructor
super();
}
}
</script>
</body>
Затем мы создадим функцию для доступа к тегу шаблона через DOM с помощью селектора запросов и клонируем его содержимое. Посмотрите следующий код и добавьте его в функцию-конструктор.
...
class MyCustomComponent extends HTMLElement{
constructor() {
// Always call this method in the constructor
super();
/** Get Object template tag via DOM who define
* by id 'Element Custom'
* you can also use function getEmelentById()
*/
let template = document.querySelector('#ElementCustom')
// Clone content inside template tag
let templateHTML = template.content.cloneNode(true);
}
}
...
На следующем шаге мы будем использовать метод Shadow DOM для прикрепления значения клонированного содержимого из тега шаблона в настраиваемый элемент. Shadow DOM дает нам возможность инкапсулировать стили и разметку наших компонентов. Это дочернее дерево DOM, прикрепленное к элементу DOM, чтобы гарантировать, что ни один из наших стилей не просочится или не будет перезаписан какими-либо внешними стилями. Это делает его отличным для модульности [3].
Чтобы использовать его, см. Код ниже
...
class MyCustomComponent extends HTMLElement{
constructor() {
...
// Initialize a Shadow DOM
let shadowdom = this.attachShadow({mode:'open'});
// Attach value of Template content into Shadow DOM
shadowdom.appendChild(templateHTML)
}
}
...
На последнем этапе нам нужно использовать класс MyCustomComponent для определения элемента ‹my-custom-component› ‹/my-custom-component›.
См. Следующий код
...
class MyCustomComponent extends HTMLElement{
constructor() {
...
}
}
customElements.define("my-custom-component",MyCustomComponent)
...
Если вы правильно выполните это руководство, мы получим в браузере следующее изображение
Если вы хотите скопировать текст «Это из пользовательского компонента», вам просто нужно скопировать только тег ‹my-custom-component› ‹/my-custom-component›. Итак, результаты будут такими
Это основная концепция повторно используемого компонента, вам не нужно переписывать много кода, чтобы сделать что-то, что вы делали раньше, просто нужно вызвать небольшой и простой тег.
Стиль в веб-компоненте
Ранее мы использовали метод Shadow DOM для прикрепления содержимого из тега шаблона к пользовательскому компоненту. Итак, что, если мы хотим стилизовать веб-компонент с помощью CSS? Давайте попробуем увидеть сравнение между общим тегом html и веб-компонентом, добавив приведенный ниже код вверху тега пользовательского компонента.
...
<body>
<style>
h1{ color:red; }
</style>
<h1>This is from general HTML Tag</h1>
<my-custom-component></my-custom-component>
...
</body>
...
Результат будет таким
Как видите, стиль css влияет только на общий тег html, а не на стиль пользовательского компонента, потому что мы использовали Shadow DOM. Если мы хотим изменить стиль пользовательского компонента, мы должны добавить специальный стиль в содержимое шаблона.
...
<template id="ElementCustom">
<style>
h1{ color:blue; }
</style>
<h1>This is from Custom Component</h1>
</template>
...
И результат будет такой
Посмотрите полный код ниже или попробуйте jsfiddle, нажав здесь
Заключение
В этой первой части мы говорим только о создании простого веб-компонента, в котором мы использовали некоторые базовые вещи из веб-компонентов, а именно специальные элементы и шаблоны теневого DOM и HTML-тегов. В следующем разделе мы дополнительно обсудим веб-компонент, создав проект, состоящий из нескольких отдельных веб-компонентов со специальными свойствами, и узнаем, как обрабатывать события в веб-компонентах.
