javascript - StencilJs 组件未在另一个 stenciljs 项目中呈现

Question

我已经使用 starter 项目创建了一个 stenciljs webcomponents，我正在尝试通过 package.json 将它抓取到另一个 stenciljs 项目中。依赖，它指向一个 git repo。
webcomponent 被导入，但是当我尝试在 tsx stenciljs 项目中运行该组件时，我注意到以下内容:

props 没有传入，我可以看到它被应用的 css，但内容丢失

如果我在页面上添加一些额外的东西，比如一个字符或其他东西，开发服务器会呈现 webcomponent(也尝试构建项目，相同的行为)

webcomponent 还包含一些 .svgs插入.tsx文件进入 return 语句，即使在页面上添加字符后，这些图标仍然不呈现

不确定我是否在这里做错了什么，奇怪的是，只要我在页面上添加了其他内容，除了那个 webcomponent 之外，它就会正确呈现。
我通过以下方式将 webcomponent 导入到 stenciljs 项目内的组件中: import 'my-component-from-git' <-- 指向 node_modules 文件夹中的 webcomponent 文件夹
stenciljs webcomponent 配置:

plugins: [
    sass()
  ],
namespace: 'my-component',
outputTargets: [
  {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],

stenciljs 项目配置:

globalStyle: 'src/global/app.css',
globalScript: 'src/global/app.ts',
taskQueue: 'async',
  plugins: [
    sass()
  ],
  outputTargets: [
    {
      type: 'www',
      // comment the following line to disable service workers in production
      serviceWorker: null,
      baseUrl: './../',
    },
  ],

Answer 1

经过一番调查，我想导出为webcomponent的组件，使用了多个functional components呈现其内容(对于 .svgs 也相同)，在删除这些内容并在导出 webcomponent 的类中使用它们后，它工作正常。
我不完全确定这些是否有问题，或者可能没有正确支持，或者 dist使用 functional components 时未正确生成输出.
目前，如果有人遇到一些奇怪的渲染问题，当尝试将模板生成的 webcomponent 导入另一个模板项目时，请尝试稍微修改您的代码，使其不使用这些 functional components .
也许 webcomponent 缺少一些特定的配置。