javascriptangularweb-componentscullyioscully

Using web components with Scully?

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

Solution

  • 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.