Comments 9
Вроде бы там точно так же создаются кастомные теги, которые дальше и используются.
Какие плюсы\минусы есть у этих компонентов перед Вьюшными?
Веб-компоненты, вероятно, уже есть в вашем браузере (если вы конечно не сидите с IE).
Статейка на тему Shadow DOM и Shady DOM в Polymer — habr.com/ru/post/259187
Наверняка есть тулзы которые помагают завернуть React/Vue компоненты в Web Components
Веб-компоненты активируются браузером самостоятельно. Вы просто говорите браузеру "для каждого созданного html тэга <tag-name> вызови мой конструктор". И браузер будет обрабатывать любое создание элемента корректно, будь то element.innerHTML
или document.createElement
.
Со Vue (или Angular) компонентами такой номер не пройдет. Вам нужно как-то сообщить фреймворку о том что в DOM появился новый элемент и его нужно активировать.
У этих двух подходов есть свои преимущества и недостатки.
Например, с веб-компонентами проблема в том, что они глобальные. Вы не сможете ограничить область действия своего html-тэга отдельным фрагментом DOM. В случае встраиваемого виджета это может быть проблематично, что ваш приватный компонент my-button, становится доступным для всей страницы целиком.
С фреймворковыми компонентами такого нет, то есть проблема в том, что они требуют специального обращения. Ваш код прибивается гвоздями к конкретному фреймворку, затрудняя миграцию.
У vaadin какие-то проблемы с демо. Ни один компонент не открывает. Андроид хром
Веб-компоненты: 9 проектов, о которых стоит знать в 2019 году