Веб компонент

Что такое веб компонент

Веб компонент (web component) — это самостоятельный элемент интерфейса в браузере и является связкой кода состоящая из HTML, CSS и JavaScript. Ярким примером веб компонента может служить аудио (или видео) плейер. Он вставляется в страницу с помощью тега <audio> (или <video>) и отображается на ней как изолированный элемент интерфейса. Его код является недоступным для веб разработчика, мы никак не можем влиять, например, на его стили и наоборот его стили никак не влияют на окружающие его элементы. CSS каскадирование в данном случае не работает, стили изолированы или, по другому, инкапсулированы. В этом состоит преимущество веб компонентов, их можно многократно использовать на сайте или в веб приложении и не переживать, что они как-то повлияют на окружающий их код.

Веб компоненты базируются на трех понятиях: пользовательские тэги (Custom elements), HTML шаблоны (templates) и, так называемый, Shadow DOM.

Custom elements

Пользовательские тэги или элементы – это HTML элементы, которых нет в стандарте, веб разработчики могут создать свои собственные тэги элементов, наподобие элементов <audio> или <video>, и использовать их на странице сайта или веб приложений наряду с другими предопределенными элементами.

HTML templates

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

Shadow DOM

Shadow DOM это очень важный аспект веб компонентов. Этот механизм позволяет инкапсулировать код (например, CSS) внутри компонента, что означает, что он не будет влиять на элементы, окружающие компонент, но может быть свободно использован внутри.

Создание веб компонентов

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

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

О том как создать собственные веб компоненты и другие статьи на тему Angular читайте в моем блоге.