Опыт разработки виджетов для сторонних сайтов

[BorisNevsky]

огонь!

[felolace]

Как по мне для виджетов идеально подходит svelte. Он не имеет рантайма, поэтому не будет конфликтов версий, изоляция стилей из коробки и будет гораздо легче разрабатывать и поддерживать виджет, а не так:

this.containerElement.innerHTML = '<button>Виджет кнопки</button>';

[NikitchenkoSergey]

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

[felolace]

Как раз фишка этого фреймворка в изоляции, он весь код преобразует в нативный JS, с-но конфликтов не может быть (глобальное пространство не затргивается) :)
Его "рантайм" весит ~3kb, так что дополнительной нагрузки почти не будет.
Зато не нужно тащить iframe и что-то придумывать. Так же повышается удобство разработки в компонентном подходе (есть поддержка TypeSript), а не прямая работа с DOM.

[NikitchenkoSergey]

Тащить iframe все равно скорее всего придется для более-менее крупного виджета, чтобы на ваше приложение не влияли стили сайта, и чтобы сторонний сайт не имел доступ к DOM (там могут быть пользовательский данные).
В iframe нет ничего плохого, наоборот — дает хорошую изоляцию от чужого сайта. А postMessage решает все проблемы взаимодействия.

[felolace]

Согласен, но есть проблемы с iframe, например описанные в вашей статье :)
Как вариант можно изолироваться от глобальных стилей сайта с помощью Shadow DOM