web-component - 在 Stencil.js 组件库中包含第三方 Web 组件

Question

我希望将 Stenciljs 包含在一个项目中，并且喜欢 Stencil 捆绑组件的方式，并且只延迟加载页面上使用的组件。

这可以与安装在模板项目中的第三方 Web 组件一起使用吗？

例如，假设我们想使用ui5-button组件而不是滚动我们自己的组件。我按照此处的说明进行操作，并且能够将 Web 组件导入到模板中的任何组件文件中。

如果我想用作较大组件的子组件，这很好，如下所示：

import { Component, Host, h } from '@stencil/core';
import "@ui5/webcomponents/dist/Button";

@Component({
  tag: 'my-custom-button',
  styleUrl: 'my-custom-button.css',
  shadow: true,
})
export class MyCustomButton {

  render() {
    return (
      <Host>
        <ui5-button><slot></slot></ui5-button>
      </Host>
    );
  }
}

这可行，但我不喜欢嵌套。有没有办法简单地返回并使其成为捆绑包的一部分？