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

Question

我已经使用入门项目创建了一个 stenciljs webcomponents，我正试图通过package.json dependecy 将它放到另一个 stenciljs 项目中，它指向一个 git 存储库。

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

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

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

我通过以下方式将 webcomponent 导入到 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

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

我不确定这些是否有问题，或者它没有得到正确支持，或者dist output 在使用functional components时没有正确生成。

目前，如果有人在尝试将 stencil 生成的 webcomponent 导入另一个 stencil 项目时遇到一些奇怪的渲染问题，请尝试修改一下您的代码，使其不使用这些functional components 。

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