Как встраивать виджет на другой сайт со своим контекстом?

Question

[Bodrosh]

Здравствуйте, создал свой виджет, на сторонний сайт добавляется так:

<script>var js=document.createElement("script");js.async = true;js.src=".../my-widget.js?"+Date.now();document.getElementsByTagName("head")[0].appendChild(js); </script>

В body , в нужное место, где он должен быть:
<my-widget id="244"></my-widget>

Всё работает, но виджет может криво отображаться или вовсе не работать, если на сайте, куда его встраиваю, пересекаются стили/скрипты, как этого можно избежать, изолировать его?

Спасибо!

Comments

[Ankhena]

iframe?

[Bodrosh]

Что-то подсказывает, это один из способов, но в нем нужно указывать ссылку, откуда тянуть весь контент, а у меня скриптом (использую vuejs) приложение загружается в < my-widget id="244" >, вот если бы можно было написать что-то роде
<iframe><my-widget id="244"></my-widget></iframe>
но так же нельзя(

[Andrew]

Bodrosh, а в чем отличие, так ведь и будет, если виджет выгрузите куда-то и его будут айфреймом вешать.

[Bodrosh]

Andrew, Нет, сейчас всё происходит без фрейма, скрипт разворачивает приложение в этом месте.

Answer 1

[Andrew]

Сделать/сгенерить айди для скрипта и использовать его для всех элементов в стилях.

Comments

[Bodrosh]

Если на сайте будут прописаны свои стили для тегов, это не поможет, да и использование в виджете библиотек, фреймворков не исключит совпадения с такими же на сайте.

[Andrew]

Bodrosh,

Если на сайте будут прописаны свои стили для тегов

эм. Про специфичность css слышали? !important, чтобы максимально обезопасить, но тоже такое себе.
#scope-id button{}
обычно достаточно.

в виджете библиотек, фреймворков не исключит совпадения с такими же на сайте.

библиотеки(Реакт) и фреймворки(Ангуляр) тоже умеют в инкапсуляцию.
вяжите айди к текущему времени у вас же всё скриптом подключается, не будет проблем значерие вытянуть.

[Bodrosh]

Andrew, Спасибо за идеи, !important точно не вариант, поразмыслю, но не совсем понимаю: предположим, я использовал Тег < p > в своем виджете, а у пользователя на сайте заведено, что < p > - красного цвета. Мне заранее придётся всю библиотеку html у себя расписать, что и как должно выглядеть?)
Пишу на vuejs, он тоже должен иметь инкапсуляцию?