Веб-компоненты | Web Components

У вашего броузера проблема в совместимости с HTML5

Веб-компоненты - это набор различных технологий (HTML+JS+CSS), позволяющих создавать пользовательские HTML-элементы с собственной функциональностью

???? [00:16] что такое веб-компоненты
???? [00:57] как создать свой компонент
???? [01:51] JavaScript для компонента
???? [03:13] как посмотреть теневое дерево
???? [04:23] слоты
???? [05:01] стили для компонента
???? [05:46] повтор основных моментов
???? [06:13] пример полученного веб-компонента

Пример из видео: https://codepen.io/htmllabru/pen/GRzEoBq

????Сайт о веб-компонентах: https://www.webcomponents.org/
MDN Веб-компоненты: https://developer.mozilla.org/ru/docs/Web/API/Web_components
????Доступное введение в веб-компоненты: https://learn.javascript.ru/web-components
????Фрагмент HTML-спецификации о пользовательских элементах
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
????Фрагмент DOM-спецификации о теневом дереве DOM
https://dom.spec.whatwg.org/#shadow-trees