Running angular app inside shadow dom

Question

I am developing an application, where I've to load other angular(1.x) application inside current page (As per project requirement). I am trying to achieve it using shadow DOM concept (This could be done using iframe, but I am looking for better approach). I've tried below code:

 var templateUrl = "angular-app.html",
 templateReceivedCallback = function (response) {
      var templateHolder = $("#template-holder"),
          div = document.getElementById('template-holder'),
          shadowRoot = div.attachShadow({
              mode: 'open'
           });
       shadowRoot.innerHTML = response;
     };
 $.get(templateUrl, templateReceivedCallback);

I am expecting that the angular application should be loaded inside template holder element:

 <div id="template-holder"></div>

The other app is loading in the div which I mentioned, but expressions are not compiled as expected. Example - Angular app having variable this.greeting = "Welcome!" and I am expecting this:

 Welcome!

But it rendered as:

 {{greeting}}

Is there any better way to achieve this? If yes, please share running example with me.

Thanks.

Answer 1

I think it's not possible because Angular parsing engine won't look inside the Shadow DOM.

As a workaround, you could put the {{greeting}} in the normal DOM.

If you want to use Shadow DOM, you will always be able to access it with <slot> tags.