Как правильно встраивать скрипт в подключаемый внешний скрипт на сайт?

Question

[Алексей Коновалов]

Всем привет, я делаю виджет, который должен встраиваться на страницу, он подключается вот таким образом:

<script>
    customElements.define('widget', class extends HTMLElement{
        connectedCallback(){
            const shadow = this.attachShadow({mode: 'open'});
            let widgetScript = document.createElement("script");
            widgetScript.type = "text/javascript";
            widgetScript.src = "https://site.ru/widgetjs.js";
            shadow.appendChild(widgetScript);
        }
    })
</script>
<widget id="widgetElement"></widget>

Содержимое файла виджета такое:

(function($){

	var host = 'https://site.ru';

	var widgetElement = document.getElementById('widgetElement');
  var widgetShadowRoot = document.getElementById('widgetElement').shadowRoot;
  
  // скрипт подгрузки библиотек на страницу
  const loadScript = function(url){
    return new Promise((resolve) => {
      let js = document.createElement('script');
      js.src = url;
      widgetShadowRoot.appendChild(jq);
      js.onload = function(){
        resolve();
      }
    });
  }
  
  class Widget{
  	// ... тут содержимое всей логики виджета
  }
  
  loadScript(host + "/jquery.js").then(resolve => {
  
  	
  	let jQuery3 = jQuery.noConflict(true);
  
  	// т.к. версия jQuery на странице может отличаться, я хочу изолировать
    // мою версию от версии на странице
    // но в виджете перестают работать подключаемые библиотеки jQuery
  	(function($){
    	
    	loadScript(host + "/inputmask.js");

      let widgetClass = new Widget();
    
    })(jQuery3)

    
  })


}(jQuery));

Проблема в том, что на странице, куда подключается виджет, уже может присутствовать jQuery. Поэтому я внутри виджета изолировал весь его код в конструкцию:

let jQuery3 = jQuery.noConflict(true);
    (function($){
          //......
    })(jQuery3)

Но внутри этой конструкции так же загружаются библиотеки jQuery которые нужны, для работы виджета. И они не работают, потому как загружаются они в dom элемент который скорее всего находится в области видимости именно той версии jQuery которая подключена на странице. В итоге я получаю ошибку, что такая библиотека отсутствует.

Подскажите, как правильно подключать такие файлы и может я не правильно изолирую скрипт от внешней jQuery библиотеки?