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

Question

我已经使用初学者项目创建了一个stenciljs webcomponents，并且我试图通过package.json依赖性(它指向git )将它捕获到另一个stenciljs项目中。

webcomponent是导入进来的，但是当我试图在tsx stenciljs项目中运行组件时，我注意到以下几点：

• --道具没有传入，我可以看到它正在应用，但是如果我在页面上添加了一些额外的内容，比如字符或其他东西，那么开发服务器就会呈现webcomponent (也尝试构建项目，相同的行为)
• ，webcomponent也包含一些.svgs，即使在页面上添加了一个字符之后，这些图标仍然不会呈现

<代码>F 210。

不知道我在这里做错了什么，奇怪的是，一旦我在页面上添加了其他东西，除了那个the组件，它就能正确地呈现出来。

我通过以下方法将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缺少一些特定的配置。