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

问题描述

我已经使用 starter 项目创建了一个 stenciljs webcomponents，我正在尝试通过 package.json 依赖项将它抓取到另一个 stenciljs 项目中，该依赖项指向一个 git 存储库。

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

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

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

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

import 'my-component-from-git'

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: './../',

解决方法

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

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

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

也许 webcomponent 缺少某些特定的配置。