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

Question

我已经使用启动项目创建了一个 stenciljs web 组件，并且我试图通过package.jsondependentecy 将其抓取到另一个 stenciljs 项目中，该项目指向 git 存储库。

Web 组件已导入，但当我尝试在 tsx stenciljs 项目中运行该组件时，我注意到以下内容：

• props没有传入，css我可以看到它被应用，但内容丢失
• 如果我在页面上添加一些额外的内容，例如字符或其他内容，开发服务器会呈现 Web 组件（也尝试构建项目，相同的行为）
• Web 组件还包含一些.svgs推送到.tsx文件中的 return 语句，即使在页面上添加字符后，这些图标仍然不会呈现

不确定我在这里是否做错了什么，奇怪的是，只要我在页面上添加其他内容（除了该 Web 组件之外），它就会正确呈现。

我通过以下方式将 Web 组件导入到 stenciljs 项目内的组件中：

import 'my-component-from-git' <-- 指向node_modules文件夹中的webcomponent文件夹

stenciljs web 组件配置：

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

经过一番调查，我想要导出为 Web 组件的组件使用多个functional components来呈现其内容（对于 也相同.svgs），删除这些组件并在导出 Web 组件的类中使用它们后，它工作正常。

我不完全确定这些是否有问题，或者可能没有正确支持，或者dist使用时未正确生成输出functional components。

目前，如果有人遇到一些奇怪的渲染问题，当尝试将模板生成的 Web 组件导入另一个模板项目时，请尝试修改一下您的代码，以便它不使用这些functional components.

也许 Web 组件缺少某些特定的配置。