Содержание
В 2023 году поддержка браузерами веб-компонентов (также известных как пользовательские элементы) будет очень хорошей. Никогда еще не было лучшего времени, чтобы начать создавать свои собственные пользовательские элементы.
Веб-компоненты, также известные как пользовательские элементы, - это новые элементы HTML, которые вы создаете сами. В этих элементах заключена разметка, стиль и интерактивность.
В этой статье вы познакомитесь с основами веб-компонентов и создадите очень простой веб-компонент, отображающий текущую дату.
Это руководство предназначено для легкого введения в концепцию, поэтому в нем не будут рассмотрены некоторые более сложные аспекты, такие как шаблоны, слоты или теневой DOM. Однако все это - мощные строительные блоки для создания компонентов, которые вам следует изучить по мере развития своих навыков.
Что такое веб-компонент?
Веб-компонент - это пользовательский элемент HTML, который вы определяете, с собственным именем тега. Думайте о нем как об инкапсулированном, многократно используемом фрагменте кода. Как и обычные элементы HTML, веб-компоненты могут принимать атрибуты и прослушивать события.
Веб-компоненты - это хороший способ добавить дополнительную функциональность в ваше веб-приложение. Поскольку это веб-стандарт, нет необходимости в дополнительном коде сторонних разработчиков.
Веб-компонент может быть простым или сложным: он может просто отображать текст (как в примере из этой статьи), а может быть очень интерактивным.
Основы веб-компонентов
Чтобы определить веб-компонент, создайте класс, который расширяется от HTMLElement. Этот класс будет содержать все поведение вашего веб-компонента. После этого вам нужно зарегистрировать его в браузере, вызвав customElements.define.
class MyComponent extends HTMLElement {
// Implementation of the component goes here
}
customElements.define('my-component', MyComponent);
После этого вы сможете использовать свой компонент, просто добавив в HTML элемент <my-component>. Вот и все! Вы только что добавили веб-компонент на свою страницу.
Обратите внимание, что в имени компонента есть дефис. Этого требует спецификация, чтобы предотвратить столкновение имен с потенциальными будущими стандартными элементами HTML.
Обратные вызовы жизненного цикла
У веб-компонентов есть несколько обратных вызовов жизненного цикла. Это функции, которые браузер вызывает на разных этапах жизненного цикла компонента. Вот некоторые из этих обратных вызовов:
connectedCallback: Вызывается, когда элемент впервые добавляется в DOM disconnectedCallback: Вызывается, когда элемент удаляется из DOMattributeChangedCallback: Вызывается при изменении одного из наблюдаемых атрибутов элемента. Чтобы атрибут можно было наблюдать, необходимо добавить его в статическое свойство observedAttributes класса компонента.
Для этого простого компонента вам понадобится только connectedCallback.
Как создать компонент
В новом файле JavaScript создайте класс компонента и добавьте вызов customElements.define, как показано выше. Вот первый вариант компонента CurrentDate:
class CustomDateElement extends HTMLElement {
connectedCallback() {
// Create a Date object representing the current date.
const currentDate = new Date();
// Format the date and time into a human-readable string.
const formattedDate = currentDate.toLocaleString();
// Set the formatted date and time as the text content of this element.
this.textContent = formattedDate;
}
}
// Register the CustomDateElement component using the tag name <custom-date>.
customElements.define('custom-date', CustomDateElement);
В connectedCallback вы получаете текущую дату и вызываете toLocaleDateString, который форматирует часть даты объекта Date в более удобный для человека формат. Например, в локали en-US это будет формат 10/18/2023.
Здесь нет слушателей событий, которые нужно очищать, поэтому нет необходимости в disconnectedCallback.
Поскольку CurrentDate расширяется от HTMLElement, он включает в себя все его свойства и методы. Поэтому вы можете использовать свойство textContent, как и для любого другого HTML-элемента. Это позволит установить отформатированную дату в качестве значения текстового узла внутри элемента <current-date>.
Как использовать компонент
Прежде чем использовать компонент, необходимо загрузить его с помощью оператора import или тега script. Вот простой пример использования с помощью тега script:
<script src="https://www.freecodecamp.org/news/build-your-first-web-component/./currentDate.js"></script>
<h2>Сегодняшняя дата</h2>
Текущая дата составляет: <current-date></current-date>
Обратите внимание, что пользовательские элементы, даже если у них нет дочернего содержимого, не могут использовать синтаксис самозакрывающихся тегов, поддерживаемый некоторыми элементами. Они всегда должны иметь явный закрывающий тег.
Будущие усовершенствования
Вот некоторые способы, которыми вы можете усовершенствовать компонент CurrentDate:
Использовать Intl.DateTimeFormat для создания более понятного человеку формата даты. Можно даже добавить атрибуты для настройки используемого формата даты.Добавить поддержку атрибута date и адаптировать компонент таким образом, чтобы он мог отображать любую произвольную дату, а не только текущую. Конечно, в этом случае вы захотите изменить название с CurrentDate на что-нибудь другое, например FormattedDate.Используйте элемент HTML time внутри компонента компонент для создания более семантической разметкиВывод
В этой статье вы сделали первый шаг в мир веб-компонентов.
Веб-компоненты не имеют сторонних зависимостей, поэтому их использование не окажет большого влияния на размер вашего пакета. Но для более сложных компонентов вам, возможно, стоит обратиться к библиотекам вроде Svelte или Lit.