Веб-компоненты в реальном мире

Статья не об основах веб-компонентов, об этом уже написано достаточно, например вот этот серия статей.

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

В обычных фреймворках компонент – это класс или функция в Javascript. Оно может быть завернуто в модуль и не должно быть абсолютно уникальным. Вы сможете импортировать две разные кнопки и назвать их по-своему:

import { Button as ButtonA } from 'lib-a';
import { Button as ButtonB } from 'lib-b';

Веб-компоненты регистрируются в общем для всех списке html-тэгов. Если одна библиотека уже заняла имя cool-button, вы ничего уже с этим сделать не сможете.

Tree-shaking и Глобальные имена компонентов

Проблема в том, что API выглядит не так, как вы описываете, а по-другому

customElements.define('button-element', ButtonElement);

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

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

Проблемы с типизацией — Intrinsic описанный в статье решает проблему.

Там же в статье и описаны недостатки. Обновили компонент, поменяли свойства, но забыли обновить Intrinsic. Typescript молчит, а в рантайме все ломается.

это стандартное поведение DOM, а если писать без прослойки с VDOM то и не проблема вовсе.

Вот пример:

const input = document.querySelector('[name="test"]');
input.disabled = true;
input.value = 'bar';

В случае нативного тэга input браузер сам позаботится об оптимизации и перерендерит input только после обновления всех свойств. А как вы будете оптимизировать свой собственный компонент?

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

Тем интереснее узнать, как вы решаете указанные проблемы. Давайте обмениваться опытом :)

автор бы сравнил скорость рендера с react/vue-компонентами, справедливости ради

Вот две демо-страницы. Рендерится выпадающий список с 2000 элементов.

• https://select-up-iyxh1zs1y.now.sh/lit-element.html
• https://select-up-iyxh1zs1y.now.sh/preact.html

В случае lit-element в последнем Хроме я наблюдаю явную просадку FPS при открытии меню. В Preact-версии такого нет. Исходный код демок можно посмотреть вот здесь.

вы вполне можете писать свой код на TS и создавать тайпинги для своих тегов

Как это сделать? Самое лучшее, что я нашел – это поддержка типов в Stencil, но она далеко не дотягивает то того, что я получаю с React.

Про VDOM тоже ерунда написана, в подходе с веб-компонентами вам вообще не обязательно иметь какие-либо промежуточные сущности между DOM и данными

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

Сфера применения указана также весьма странно, видно что автор копнул тему но явно недостаточно глубоко

Что не так со сферой применения? Есть еще какие-то неперечисленные варианты?