Web components что это за программа

Web Components. Назад в будущее.

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

Безусловно, компонентный подход — это одна из страниц в истории frontend, которая перевела разработку на новый уровень. К сожалению, мало говорится о том, что можно использовать компонентный подход на чистом JS, CSS и HTML. Я имею в виду технологию Web Components, появившуюся еще в далеком 2011 году. Давайте разберем на практике из чего состоит Web Components и насколько технология пригодна для использования.

Поддержка браузерами

Самой большой проблемой Web Components было отсутствие поддержки большинством браузеров, и, если посмотреть статистику, стандарт v0 практически нигде не поддерживался. Сейчас ситуация изменилась. Вот актуальная информация на начало 2019 года:

Web コンポーネントとは

Выглядит действительно круто, демо приложение запустилось в chrome и safari вообще без компиляции.

Microsoft как всегда немного портит общую картину, но есть полифилы.

Из чего состоят Web Components

Начать следует с того, что Web Components объединяет в себе несколько спецификаций. На данный момент это:

• Custom Elements v1;
• HTML templates;
• Shadow DOM v1;
• ES modules.

Разберем их по порядку.

Custom Elements v1

Позволяет добавить на страницу собственный элемент, содержащий в себе несколько DOM nodes. Вот как это выглядит:

Как видно из кода выше, первым делом нужно создать класс и наследовать его от HTMLElement, затем с помощью customElemens задать ему имя тэга. Важно, что имя должно состоять из 2х частей, разделенных дефисом. Компонент готов к использованию.

HTML templates

С помощью элемента template можно создать шаблон вместе со стилями, который будет позже вставлен в разметку страницы или, в данном случае, в отдельный компонент. Элемент slot указывает, куда будет вставлена разметка, полученная из родителя между открывающим и закрывающим тэгами компонента. Также существует возможность создавать несколько именованных слотов. Вот как это будет выглядеть:

Создание и распространение событий

Работу с событиями рассмотрим на примере удаления задачи из списка задач.

Так выглядит DOM дерево:

В нем есть компонент задачи (todo-item), который принимает на вход id, name и completed. Вот как он выглядит изнутри:

В родительском компоненте, так же как и с удалением, добавляется прослушивание события клика на галку.

В дочернем компоненте отследить изменения можно с помощью хука attributeChangedCallback(attrName, oldVal, newVal), который возвращает три аргумента: название атрибута, старое значение и новое значение. Но по умолчанию изменение атрибутов не наблюдается, и если необходимо отслеживание, то надо добавить атрибут в геттер static get observedAttributes(). Код компонента после изменения:

Takanori Oki — Vue.js と Web Components のこれから : Vue Fes Japan 2018

Тут мы можем отметить потерю типизации. Конечно, в случае с простыми атрибутами это не смертельно, но немного неприятно и затрудняет передачу объектов между компонентами.

Выводы

Технология Web Components поддерживается практически полностью, её будет легко изучить и применить разработчикам, которые использовали хотя бы одну библиотеку с компонентным подходом.

В маленьких и средних проектах смело можно её использовать для кастомизации элементов интерфейса и обходиться без внешних зависимостей.

В больших проектах, конечно, не обойтись без фреймвокров, т.к. они помимо компонентного подхода дают еще окружение, приятные фичи и большое комьюнити, но Web Components можно применить и в них для избавления от legacy кода и миграций (допустим с AngularJs на Angular).

Источник: medium.com

WebHive

После прочтения статьи What«s coming in ember in 2014 узнал много интересного и нового. Одним из таких открытий стал стандарт Web Components. Ну что — стоит разобраться и с этим вопросом.

Собственно Web Components это не что иное как набор стандартов, позволяющих создавать собственные HTML элементы.

Рассмотрим довольно типичный пример — слайдер, разметка для которого выглядит примерно так

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div id=»slider»>
input type=»radio» name=»slider» id=»slide1″ selected=»false»>
input type=»radio» name=»slider» id=»slide2″ selected=»false»>
input type=»radio» name=»slider» id=»slide3″ selected=»false»>
input type=»radio» name=»slider» id=»slide4″ selected=»false»>
div id=»slides»>
div id=»overflow»>
div class=»inner»>
article>
img src=»./rock.jpg» alt=»an interesting rock»>
article>
.
.
article>
img src=»./sunset.jpg» alt=»a dramatic sunset»>
article>
div>
div>
div>
label for=»slide1″> label>
label for=»slide2″> label>
label for=»slide3″> label>
label for=»slide4″> label>
div>

И не забудем CSS …. хотя не стану приводить здесь 80-строчный кусок кода. Я думаю уже видно насколько горомоздкий получается код.

Что же предлагает нам Web Components? А вот что:

1
2
3
4
5
6
img-slider>
img src=»./sunset.jpg» alt=»a dramatic sunset»>
img src=»./arch.jpg» alt=»a rock arch»>
img src=»./grooves.jpg» alt=»some neat grooves»>
img src=»./rock.jpg» alt=»an interesting rock»>
img-slider>

Из громоздкой конструкции из HTML+CSS кода мы оставляем только необходимый минимум — только теги которые действительно необходимы. Кто рискнет сказать, что это не красиво?

Но как? Элементарно Ватсон ….

На самом деле каждый компонент состоит из шаблона, JavaScript-а и стилей. Они просто не видны. Это так называемый Shadow DOM.

Чтобы посмотреть его в действии можно включить отображение в настройках Development Tools в Chrome (можно-ли это сделать в других браузерах я не знаю). Вот тут на картинке показано как это сделать. Эти настройки вызываются нажатием на кнопочку в правом нижнем углу инспектора.

Для примера посмотрим на стандартный для HTML5 тег . Вау! Оказывается на самом то деле это веб компонент — и мы можем увидеть весь его Shadow DOM — все его внутренности.

Я удивлён … „о сколько нам открытий чудных …“ как говаривал классик.

Давайте же скорее использовать эту прекрасную технологию

Но тут нас поджидает изрядная ложка дёгтя. Не все так гладко как хотелось бы. Рассмотрим известные проблемы

Поддержка браузерами

С поддержкой этой технологии браузерами пока довольно туго. Ифактически полноценную работу обеспечивает только Chrome.

Эту проблему пытается разрешить Google выпустив библиотеку Polymer. Не буду углубляться в детали этого решения — возможно запилю статью на эту тему. Библиотека делает практически тоже-самое чтои WebComponents, но требует подключения отдельного js-файла. Как-то вот так:

1
2
3
4
5
6
7
8
script src=»http://polymer-project.org/polymer.min.js»> script>

polymer-element name=»img-slider» noscript>

polymer-element>

img-slider> img-slider>

SEO

Непонятно как роботы будут воспринимать и индексировать такие HTML элементы. Обнадёживает, что технологию активно проталкивает именно Google, поэтому вполне вероятно, что в скором времени как минимум этот поисковик научится понимать такую размётку.

Настройка внешнего вида

Все сайты выглядят по разному, поэтому крайне желательно иметь возможность настроить вид любого компонента по своему желанию. К сожалению WebComponets не позволяют такой роскоши и выглядеть будут именно так как прописано у них внутри в их собственных стилях.

Вывод

Довольно интересная и многообещающая технология. Будем ждать развития и одним глазом поглядывать в эту сторону.

Ссылки по теме

В данной статье я не буду вдаваться в нюансы реализации по ссылкам ниже есть более детальные описания. Ищите да обрящете.

• Введение в веб-компоненты. Часть 1
• Introduction to Web Components
• A Guide to Web Components

Источник: www.webhive.ru

Веб-компоненты: что это такое и как они работают

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

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

Небольшое пояснение

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

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

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

Если говорить кратко, то в основе любого веб-компонента лежат четыре уникальных технологий W3C:

• Пользовательские элементы, которые нужны для добавления новых HTML элементов в DOM.
• Shadow DOM – правила о том, как создать уникальный DOM, инкапсулированный в HTML-разметку.
• Импорт HTML – возможность импортирования HTML-код и повторного использования компонентов на других страницах.
• Шаблон HTML – инструмент для создания повторно использовануемого кода с пояснениями визуальных характеристик

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

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

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

Что такое Polymer?

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

Polymеr – это одна из немногих WC-библиотек, где поддерживаются рекомендации разработчиков Google Chrome. Так что не приходится сомневаться, что будущее веб-компонентов будет связано именно с этим браузером.

В это можно не верить, но Polymer уже используется в некоторых продуктах Google, таких, к примеру, как Google Sites. Это может показаться странным выбором, поскольку данный фреймворк пока не поддерживается браузером. Вот перечень стабильных браузеров, где осуществляется поддержка все четырех основных технологий W3C.

• Google Chrome
• Firefox
• Edge
• Safari 7+
• IE11
• Mobile Chrome(Android)
• Mobile Safari(iOS 7+)

Не столь популярные браузеры, такие как Opera, вряд ли смогут поддерживать все. Но вышеприведенный список достаточно полон, чтобы разработчики начали осваивать Polymer и своими глазами увидеть, насколько он полезен в работе. Для расширения кругозора можно изучить следующие материалы (eng):

• Начало работы с веб-компонентами и Polymer 2,0 — Часть 1
• Как создать свое первое приложение с Polymer
• Туториал разработчиков Google

Polymer против React

Вопрос использования веб-компонентов и Polymer вызывает бурные дискуссии в среде разработчиков. Противники Polymer аргументируют свою позицию тем, что созданная в недрах Facebook библиотека React является наиболее сильной и жизнеспособной альтернативой веб-компонентам. React использует свою собственную Shadow DOM и опирается на свои react-компоненты для быстрого создания интерфейсов. Учитывая, что сейчас многие разработчики изучают React, их позиция вполне понятна. Тем не менее, оба фреймворка преследуют одну и ту же цель – создание многоразовых элементов для динамических веб-сайтов.

Но есть множество причин, по которым веб-компоненты оказываются более полезными. Чтобы научиться работать с React, нужно знать npm, Gulp/Grunt, Babel, возможно JSX и некоторых других веб-технологии. И во всем этом очень непросто разобраться. А идея веб-компонентов как раз и заключается в том, чтобы их использование было максимально простым, особенно в связке с Polymer.

Если разработчику нужно создать небольшой и не особо интерактивный сайт, то сочетание Web Components/Polymer является оптимальным решением.

Будущее веб-компонентов

Теперь пара слов о нативной поддержке интерфейсов и технологий, используемых в веб-компонентах. Как правило, и это не удивительно, больше всего веб-компоненты поддерживает Chrome. Но если разработчик решит освоить Polymer, у него появится возможность создать такой компонент, который будет работать во всех браузерах, включая IE6. И это отличная новость для всех разработчиков интерфейсов, готовых развиваться и работать с новейшими технологиями.

Поскольку Polymer является проектом Google, вероятно, что данный фреймворк будет развиваться на протяжении многих лет. Веб-компоненты – это всерьез и надолго.

Источник: freelance.today

Сила и мощь веб-компонентов

Повторно используемый код уже давно стал соблазном для веб-разработчиков. Но добавление на сайт стороннего UI сопряжено, как правило, с головной болью.

Для использования стороннего кода требуются шаблонные вставки на JavaScript или решение CSS-конфликтов с участием ужасного !important . В мире React и других современных фреймворков дела обстоят чуть лучше, но задействовать целый фреймворк только для того, чтобы использовать готовый виджет, будет излишним.

HTML5 добавил несколько новых элементов типа и , которые позволили внедрить в веб-платформу некоторые востребованные виджеты общего назначения. Тем не менее, добавление в стандарт нового элемента для каждого достаточно распространённого UI-паттерна не выглядит подходящим вариантом.

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

Развитие стандартов

Упомянутый набор стандартов известен как веб-компоненты. Ранние версии стандартов в той или иной форме доступны в Chrome ещё с 2014, а полифиллы неуклюже заполняют пробелы в других браузерах.

Не так давно стандарты были усовершенствованы. Первоначальная версия теперь называется нулевой — v0, а для более зрелой первой версии виднеется поддержка во всех основных браузерах. В Firefox 63 добавлена поддержка двух стандартов из требуемых — Custom Elements и Shadow DOM — так что пора узнать, как можно стать HTML-изобретателем!

Разговоры о веб-компонентах идут давно, и существует множество доступных материалов по ним. Статью следует рассматривать как вводную по новым возможностям и ресурсам. Если вы хотите окунуться в тему глубже (а это определённо следует сделать), то можно почитать о веб-компонентах на MDN Web Docs и Google Developers.

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

Новый взгляд на элемент

Первый элемент не так нов, как остальные, поскольку потребность в нём возникла раньше идеи веб-компонентов. Иногда нужно просто где-нибудь хранить готовый HTML: может, это некоторая разметка, которую вы повторяете в нескольких местах, или же пока не законченный UI. Элемент содержит HTML-код, парсинг которого происходит без вставок в текущий документ.

Это не отобразится!

alert(«этот алерт не сработает!»);

Но куда вставляется разобранный HTML, если не в документ? Он добавляется в DocumentFragment — легковесную обёртку для хранения фрагмента HTML-документа, которая «растворяется» при вставке в DOM. Эти обёртки полезны для хранения набора элементов, требуемых позже, и выступают в роли контейнера, которым не нужно управлять вручную.

Теперь у нас есть DOM в неком «исчезающем» контейнере, а как им пользоваться?

Оказывается, можно просто вставить фрагмент в текущий документ:

let template = document.querySelector(‘template’); document.body.appendChild(template.content);

Этот код работает прекрасно за тем исключением, что вы только что удалили контейнер. Если вы запустите код ещё раз, то получите ошибку, так как template.content исчез. Вместо этого сделайте копию фрагмента перед вставкой:

document.body.appendChild(template.content.cloneNode(true));

Название метода cloneNode говорит само за себя, но обратите внимание, что он принимает флаг для указания необходимости глубокого копирования.

Тег template подходит в любой ситуации, когда требуется повторять некоторую HTML-структуру. Он особенно полезен для задания внутренней структуры компонента, и потому входит в «клуб» веб-компонентов.

Новые возможности:

• Элемент, который хранит HTML-код, но не добавляет его в текущий документ.

Обзорные материалы:

• DocumentFragment
• Дублирование узлов DOM с помощью cloneNode

Пользовательские элементы (Custom Elements)

Пользовательские элементы — флагман технологии веб-компонентов. Название говорящее — они позволяют разработчикам создать свои собственные HTML-элементы. Синтаксис версии v0 был громоздким, но сейчас пользовательские элементы в основном опираются на классы ES6. Если вы с ними знакомы, то знаете, как описать новый класс на базе существующего (наследование):

class MyClass extends BaseClass < // определение класса находится здесь >

А что, если мы сделаем так?

class MyElement extends HTMLElement <>

До недавнего времени это считалось ошибкой. Браузеры запрещали наследовать как встроенный класс HTMLElement , так и любой из его потомков. Custom Elements снимают данное ограничение.

Браузер знает, что тегу

соответствует класс HTMLParagraphElement , но как он поймет, какой тег сопоставлен пользовательскому элементу? В дополнение к возможности наследования встроенных классов для установки такого соответствия доступно Registry пользовательских элементов:

customElements.define(‘my-element’, MyElement);

Для страницы теперь каждый тег ассоциирован с новым экземпляром класса MyElement . То есть конструктор класса MyElement будет вызван всякий раз, когда браузер встретит тег .

Но зачем в имени тега нужен дефис? Органы стандартизации хотят сохранить себе возможность вводить новые HTML-элементы, так что разработчики не могут просто так начать определять свои теги или . Во избежание в будущем конфликтов все пользовательские элементы должны содержать дефис, а органы стандартизации обещают никогда не вводить новые HTML-теги с этим символом. Проблема решена!

Кроме конструктора существует ряд дополнительных методов, связанных с жизненным циклом элемента. Обращение к ним происходит в различные моменты:

• connectedCallback вызывается при добавлении элемента в документ (в общем случае несколько раз, так как элемент может быть перемещён или удалён и заново добавлен);
• disconnectedCallback — в противоположность connectedCallback ;
• attributeChangeCallback срабатывает при модификации атрибутов из специального списка.

Немного более выразительный пример:

class GreetingElement extends HTMLElement < constructor() < super(); this._name = ‘Stranger’; >connectedCallback() < this.addEventListener(‘click’, e =>alert(`Hello, $!`)); > attributeChangedCallback(attrName, oldValue, newValue) < if (attrName === ‘name’) < if (newValue) < this._name = newValue; >else < this._name = ‘Stranger’; >> > > GreetingElement.observedAttributes = [‘name’]; customElements.define(‘hey-there’, GreetingElement);

Использование элемента на странице выглядит так:

Greeting Personalized Greeting

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

class GreetingElement extends HTMLButtonElement

Также необходимо указать в Registry, что мы расширяем существующий тег:

customElements.define(‘hey-there’, GreetingElement, < extends: ‘button’ >);

Так как мы расширяем существующий тег, то используем его имя вместо пользовательского. Далее устанавливаем специальный атрибут is, чтобы браузер знал, какой вид кнопки требуется:

Howdy

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

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

Новые возможности:

• Наследование встроенного класса HTMLElement и его подклассов.
• Registry пользовательских элементов и customElements.define() для работы с ним.
• Специальные методы жизненного цикла для реагирования на создание элемента, вставку в DOM, изменений атрибутов и так далее.

Обзорные материалы:

• ES6 Classes, в частности, наследование и ключевое слово extends

Теневая модель документа (Shadow DOM)

Мы сделали свой «дружелюбный» элемент и даже накинули немного стилизации. Теперь мы хотим использовать его на всех своих сайтах и делиться кодом с другими. Как предотвратить кошмар конфликтов, когда наш кастомизированный элемент столкнётся лицом к лицу с CSS других сайтов? Решение предоставляет Shadow DOM (теневой DOM).

Стандарт теневого DOM вводит концепцию теневого корня. Говоря поверхностно, теневой корень поддерживает стандартные DOM-методы и может быть добавлен так же, как и любой другой DOM-узел. Теневой корень отличается тем, что его родительский узел не видит содержимое:

// attachShadow создаёт теневой корень. let shadow = div.attachShadow(< mode: ‘open’ >); let inner = document.createElement(‘b’); inner.appendChild(document.createTextNode(‘Hiding in the shadows’)); // теневой корень поддерживает стандартный метод appendChild shadow.appendChild(inner); div.querySelector(‘b’); // пусто

В примере выше содержит , и отображается на странице, но он невидим для традиционных DOM-методов. Более того, он также невидим и для стилей страницы.

Это означает, что внешние по отношению к теневому корню стили не могут «проникнуть» внутрь, а его внутренние стили не могут «просочиться» во внешний мир. Данные ограничения не предназначены для контроля доступа к теневому корню. Другой скрипт на странице может отловить его создание и через ссылку получить прямой доступ к содержимому.

Содержимое теневого корня стилизуется через добавление к нему (или ):

let style = document.createElement(‘style’); style.innerText = ‘b < font-weight: bolder; color: red; >’; shadowRoot.appendChild(style); let inner = document.createElement(‘b’); inner.innerHTML = «I’m bolder in the shadows»; shadowRoot.appendChild(inner);

Ух, а прямо сейчас мы действительно можем использовать ! В любом случае, элемент будет изменяем со стороны стилей внутри корня, а для всех внешних стилей — нет.

Что, если пользовательский элемент имеет нетеневой контент? Мы можем заставить их работать вместе, используя новый специальный элемент :

Hello, !

Если этот template будет прикреплен к теневому корню, то следующая разметка:

World

Будет отображена так:

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

Новые возможности:

• Как бы «невидимая» DOM-структура, которая называется теневым корнем.
• DOM APIs для создания теневых корней и доступа к ним.
• Ограничение области видимости внутренних стилей теневого корня.
• Новые псевдоклассы CSS для работы с теневыми корнями и их стилями.
• Элемент

Собираем всё вместе

Давайте сделаем модную кнопку! Будем креативны и назовём элемент . Что именно сделает кнопку модной? У неё будут кастомные стили, которые позволят нам установить иконку и настроить внешний вид. Хотелось бы, чтобы вид кнопки сохранялся вне зависимости от сайта, на котором она используется, так что мы собираемся инкапсулировать стили в теневом корне.

Вы можете увидеть законченный пользовательский элемент в интерактивном примере. Обязательно посмотрите как на JS-код, так и на в HTML, который нужен для определения стиля и структуры элемента.

Заключение

Стандарты веб-компонентов основаны на той идее, что имея множество низкоуровневых средств, люди будут комбинировать их способами, которые никто не предвидел во время написания спецификаций. Пользовательские элементы уже были использованы для упрощения создания VR-контента в вебе, породили несколько UI-тулкитов и многое другое. Несмотря на длительный процесс стандартизации, обещанные возможности веб-компонентов придают разработчикам больше сил. Теперь, когда технология доступна в браузерах, будущее веб-компонентов в ваших руках. Что вы построите?

Источник: tproger.ru