Введение в создание веб-компонентов

Веб-компоненты состоят из 3 основных частей: Custom Element, Shadow DOM, HTML template. Вместе они реализуют функциональность, которую можно повторно использовать в любое время и в любом месте, не опасаясь конфликтов кода.

• Custom Element — набор JavaScript API, позволяющий реализовывать пользовательские элементы, которые можно использовать в интерфейсе, и устанавливать их поведение.
• Shadow DOM — набор JavaScript API для подключения инкапсулированного дерева shadow DOM элемента. Он отображается отдельно от основного DOM документа и это сохраняет приватность функций элемента, поэтому, он не может конфликтовать с другими частями документа.
• HTML template — элементы template или slot позволяют делать шаблоны разметки, которые не отображаются на странице. Их можно многократно использовать как основу структуры пользовательских элементов.

тут и там подробности про веб-компоненты