Веб-компоненты: 9 проектов, о которых стоит знать в 2019 году

[beduin01]

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

[Dartess]

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

[Andchir]

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

[oldcastor]

Ну так то вы все равно скорее всего что-либо используете, будь то VueJS, jQuery или ______.

[zim32]

Теоретически можно использовать vue wrapper. Он преобразует vue компоненты в custom elements

[DmitryOlkhovoi]

Веб компоненты используют Shadow DOM. Те компоненты, что вы создаете используя React, Vue etc (теги как вы говорите), это JSX, который превращается в вызов функции и создание обычных HTML элементов. Веб компоненты же, на странице так и выглядят как один тег. Например audio или video теги, скрывают в себе, в Shadow DOM другие элементы управления, логику и самое главное все это инкапсулировано и тот же CSS является scoped, что позволяет переиспользовать их где хочешь и понастоящему с локальным CSS.
Статейка на тему Shadow DOM и Shady DOM в Polymer — habr.com/ru/post/259187

Наверняка есть тулзы которые помагают завернуть React/Vue компоненты в Web Components

[justboris]

Веб-компоненты активируются браузером самостоятельно. Вы просто говорите браузеру "для каждого созданного html тэга <tag-name> вызови мой конструктор". И браузер будет обрабатывать любое создание элемента корректно, будь то element.innerHTML или document.createElement.

Со Vue (или Angular) компонентами такой номер не пройдет. Вам нужно как-то сообщить фреймворку о том что в DOM появился новый элемент и его нужно активировать.

У этих двух подходов есть свои преимущества и недостатки.

Например, с веб-компонентами проблема в том, что они глобальные. Вы не сможете ограничить область действия своего html-тэга отдельным фрагментом DOM. В случае встраиваемого виджета это может быть проблематично, что ваш приватный компонент my-button, становится доступным для всей страницы целиком.

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

[zim32]

У vaadin какие-то проблемы с демо. Ни один компонент не открывает. Андроид хром

[websofter]

Мне понравился Vue с ElementUI, но их в статье нет )