durgesh.patle durgesh.patle - 7 days ago 5
AngularJS Question

Running angular app inside shadow dom

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

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.

Comments