I built an that app loads dynamic content and renders it through Scully. The content has web components like this in it:
Content selection dialog that looks like this:
<fs-image url='https://fireflysemantics.github.io/i/developer/instant-html-vscode.png'></fs-image></p>
<p>Sample topic examples</p>",
I'm guessing that Scully tried to look for an Angular component that matches the the tag fs-image
and since it does not find one, it just removes the fs-image
element from the generated content.
How do we tell Scully that fs-image
is a web component?
To use Custom Element with Angular we need to add a custom schema:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
schemas: [CUSTOM_ELEMENTS_SCHEMA],
So I added that but the content fs-image
web component is still stripped from the content Scully generates.
Scully does not take anything out of the generated application, unless you use plugins to actively remove it.
When you run your application this is the output it does generate:
<html lang="en"><head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.09e2c710755c8867a460.css"><style></style></head>
<body data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="">
<app-root _nghost-aoj-c3="" ng-version="11.0.9">
<router-outlet _ngcontent-aoj-c3=""></router-outlet>
<app-home _nghost-aoj-c2="">
<p _ngcontent-aoj-c2="">
<h1> Scully Custom Element Test</h1>
</p>
</app-home><!---->
</app-root>
<script src="runtime.0e49e2b53282f40c8925.js" defer=""></script>
<script src="polyfills.1f3b39c11fffb306d5a3.js" defer=""></script>
<script src="main.30df6ebad07b05698939.js" defer=""></script>
</body></html>
You can clearly see the fs-image
element is nowhere to be found.
Scully can not render anything that is not in the output of the application.
You can check this yourself by :
ng build --prod
npx scully serve
and then open http://localhost:1864/
.
When you do this, you are looking at your unmodified application. This is what Scully uses to generate its output.
If it is not in there, Scully has no way to know about it.