This demonstration showcases the integration of a web component called fs-image within the HelloComponent's rendered HTML.
import { Component, Input } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
@Component({
selector: "hello",
template: `
<div [innerHTML]="safeHTML"></div>
`,
styles: [
`
h1 {
font-family: Lato;
}
`
]
})
export class HelloComponent {
constructor(private dm: DomSanitizer) {
this.safeHTML = this.dm.bypassSecurityTrustHtml(this.html);
}
@Input() name: string;
safeHTML: SafeHtml;
html: string = `
<h1> Web Component Test</h1>
<fs-image url="https://fireflysemantics.github.io/i/developer/instant-html-vscode.png"></fs-image>
`;
}
The html property which contains the web component is sanitized using
DomSanitizer.bypassSecurityTrustHtmlHowever, despite including the custom component in the markup, it does not render as intended. The expected rendering can be seen here: https://stackblitz.com/edit/typescript-fs-image-demo
To include the web component, a CDN declaration is added in the head section:
<head>
<script src="https://unpkg.com/@fireflysemantics/fs-image"></script>
</head>
Do you have any suggestions on why the web component is not rendering?