如何将鞋带组件库添加到现有Stencil.js项目中

Question

有一个名为“鞋带”( https://shoelace.style/getting-started/usage )的库，它是用stencil.js构建的web组件的集合。我想在我现有的stencil.js项目中使用该库中的组件。

但是，当我按照使用NPM进行本地安装的说明进行操作时，即使该组件似乎已加载，它也无法正常工作。

当我试图渲染鞋带的按钮组件时，我收到了以下错误：Class constructor SlButton cannot be invoked without 'new'

这是我的test-button.tsx组件：

import { Component, h} from '@stencil/core';

import '@shoelace-style/shoelace/dist/themes/base.css';

import SlButton from '@shoelace-style/shoelace/dist/components/button/button';


@Component({
  tag: 'test-button',
  shadow: true,
})

export class TestButton {

  render() {

    return (
      <div>
        <SlButton>hdcsddsy</SlButton>
      </div>
    );
  }
}

这里出了什么问题？

Answer 1

鞋带不再是用模具开发的。从beta.29开始，它使用Lit。但是，最终结果仍然是一个自定义元素的集合，因此您可以在任何地方使用它们。

首先，安装Shoelace：

npm i @shoelace-style/shoelace 

然后，在模板组件中，导入要使用的Shoelace元素，如下所示：

import '@shoelace-style/shoelace/dist/components/button/button';

自定义元素是通过副作用注册的。要在JSX中使用它们，请使用相应的HTML标记：

render() {
  return <sl-button type="primary">Click me!</sl-button>;
}

注意:如果你没有看到任何样式，你也会想要load the light or dark theme。