1

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.

Created Scully Issue

https://github.com/scullyio/scully/issues/1204

Ole
  • 41,793
  • 59
  • 191
  • 359
  • 1
    Scully doesn’t look for stuff, it simply renders the page, including all scripts and webcomponents.. does that webcomponent render anything in the DOM..(without scully)? – MikeOne Jan 15 '21 at 23:07
  • Yes - Here's a demo of the web components I'm attempting to use: https://stackblitz.com/edit/typescript-fs-image-demo – Ole Jan 15 '21 at 23:17
  • So I have blog content packaged as an application dependency. The application reads in all the articles and renders them through Scully. The articles use the custom element `fs-image` but that element is removed in the content generated by scully. – Ole Jan 15 '21 at 23:19
  • I mean.. if you check the actual generated file, the content from the webcomponent is probably there.. but if you request that index file, angular kicks in and replaces the DOM, probably removing it. You might want to ask how to solve on the scully gitter channel. My guess is a scully plugin that adds the webcomponents after scully has rendered could solve this.. – MikeOne Jan 15 '21 at 23:23
  • I see what you mean and I am checking the actual generated file. The `` element tag is completely stripped. – Ole Jan 15 '21 at 23:24
  • I'm guessing that when Scully tries to render the content it's sees the custom element, tries to find the corresponding Angular element so that it can render it out, does not find anything, and so it just strips it ... – Ole Jan 15 '21 at 23:26
  • I'm going to try to code a corresponding Angular component that matches the custom web component. I have a feeling that Scully will look that up and use it. – Ole Jan 15 '21 at 23:28
  • Well I tried creating an `fs-image` angular component just to see whether that would help, but it did not. The element is still stripped from the output. Going to have to make a minimal reproduction to illustrate this. – Ole Jan 16 '21 at 01:15
  • This is a bug report. In includes a minimal reproduction:. https://github.com/scullyio/scully/issues/1204 – Ole Jan 16 '21 at 02:23

1 Answers1

3

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.

Sander Elias
  • 754
  • 6
  • 9
  • I see what you are saying. Angular is still stripping it even thought the CUSTOM_ELEMENTS_SCHEMA is included. – Ole Jan 16 '21 at 14:24