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 組件缺少某些配置的特定內容。