4

我已经使用 starter 项目创建了一个 stenciljs webcomponents，我正试图通过package.jsondependecy将它抓取到另一个 stenciljs 项目中，它指向一个 git repo。

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

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

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

我通过以下方式将 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: './../',
    },
  ],
4

1 回答 1

1

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

我不完全确定这些是否有问题，或者它没有得到正确支持，或者dist使用functional components.

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

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

于 2020-12-22T21:31:22.770 回答