Angular 6 Custom Element inside InnerHtml Keeps Reloading

Question

I successfully wrote an Angular 6 app which works fine. It is loading some content from a remote server, which contains some HTML-code. This code is displayed e.g. inside a DIV-element like this:

another.component.html

<div [innerHtml]="responseFromServer"></div>

Now I want to include custom elements, so that the server can deliver custom html content, e.g.

Response from server:

<my-custom-element><p>Some other HTML-content from the server</p></my-custom-element>

In order to recognize this custom element, I did:

• add @angular/elements in the console of my app.
• added "@webcomponents/custom-elements": "^1.0.8"to package.json
• added and declared the component MyCustomElementComponent in app.module.ts (both to declarations and entryComponents)
• wrote the constructor in the AppModule like the following:

app.module.ts:

constructor( private injector: Injector ) {
        const ii = createCustomElement( MyCustomElementComponent, { injector } );
        customElements.define( 'my-custom-element', ii );
    }


ngDoBootstrap() {}

The problem

The app is working fine, in a way. The problem is that the browser keeps reloading the app. When checking the elements in the dev tools, I can see that the <my-custom-element> is rendered repeatedly. The browser spinner in the tab is turning all the time. The app is responding rather slowly as it is doing something in a loop.

I think that the custom element is loading the app itself again and again. What should I change to prevent this?

Update

Since I want the custom element to be rendered inside innerHtml, the response from the server passes DomSanitizer. It seems that the sanitizer is firing continuously and kind of blocking the app.

Any help would be greatly appreciated!