将 web 组件与 Scully 一起使用？

Question

I built an that app loads dynamic content and renders it through Scully.我构建了一个应用程序加载动态内容并通过 Scully 呈现它。 The content has web components like this in it:内容中有这样的 web 组件：


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.我猜 Scully 试图寻找与标签fs-image匹配的 Angular 组件，并且由于它没有找到，它只是从生成的内容中删除了fs-image元素。

How do we tell Scully that fs-image is a web component?我们如何告诉 Scully fs-image是 web 组件？

To use Custom Element with Angular we need to add a custom schema:要将自定义元素与 Angular 一起使用，我们需要添加自定义模式：

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.所以我补充说，但内容fs-image web 组件仍然从 Scully 生成的内容中剥离。

Created Scully Issue创建 Scully 问题

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

Answer 1

Scully does not take anything out of the generated application, unless you use plugins to actively remove it. Scully不会从生成的应用程序中取出任何内容，除非您使用插件主动删除它。

When you run your application this is the output it does generate:当您运行应用程序时，它会生成 output：

<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.您可以清楚地看到fs-image元素无处可寻。 Scully can not render anything that is not in the output of the application. Scully 无法渲染不在应用程序的 output 中的任何内容。 You can check this yourself by:您可以通过以下方式自行检查：

ng build --prod
npx scully serve

and then open http://localhost:1864/ .然后打开http://localhost:1864/ 。 When you do this, you are looking at your unmodified application.执行此操作时，您正在查看未修改的应用程序。 This is what Scully uses to generate its output.这是 Scully 用来生成其 output 的内容。 If it is not in there, Scully has no way to know about it.如果它不在那里，Scully 就无法知道它。

将 web 组件与 Scully 一起使用？

问题描述

Created Scully Issue创建 Scully 问题

1 个解决方案

解决方案1
3 已采纳 2021-01-16 05:29:47

将 web 组件与 Scully 一起使用？

问题描述

Created Scully Issue创建 Scully 问题

1 个解决方案

解决方案1 3 已采纳 2021-01-16 05:29:47

解决方案1
3 已采纳 2021-01-16 05:29:47