[英]How to add Shoelace library of components to existing Stencil.js project
There is a library called "shoelace" ( https://shoelace.style/getting-started/usage ) which is a collection of web components built with stencil.js.有一个名为“shoelace”( https://shoeelace.style/getting-started/usage )的库,它是使用 stencil.js 构建的 Web 组件的集合。 I would like to use the components from that library inside of my existing stencil.js project.
我想在我现有的 stencil.js 项目中使用该库中的组件。
However, when I follow the instructions for a local installation using NPM, it doesn't work, even though the component appears to be loaded.但是,当我按照使用 NPM 进行本地安装的说明进行操作时,它不起作用,即使该组件似乎已加载。
I receive the following error when I try to render shoelace's button component: Class constructor SlButton cannot be invoked without 'new'
当我尝试渲染鞋带的按钮组件时收到以下错误:
Class constructor SlButton cannot be invoked without 'new'
This is my test-button.tsx
component:这是我的
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>
);
}
}
What is wrong here?这里有什么问题?
Shoelace is no longer developed with Stencil.鞋带不再使用 Stencil 开发。 As of beta.29, it uses Lit .
从 beta.29 开始,它使用Lit 。 However, the end result is still a collection of custom elements, so you can use them anywhere.
但是,最终结果仍然是自定义元素的集合,因此您可以在任何地方使用它们。
First, install Shoelace:首先,安装鞋带:
npm i @shoelace-style/shoelace
Then, in your Stencil component, import the Shoelace element(s) you want to use like this:然后,在您的 Stencil 组件中,导入您要使用的 Shoelace 元素,如下所示:
import '@shoelace-style/shoelace/dist/components/button/button';
The custom elements are registered via side effect.自定义元素通过副作用注册。 To use them in your JSX, use the corresponding HTML tag:
要在 JSX 中使用它们,请使用相应的 HTML 标记:
render() {
return <sl-button type="primary">Click me!</sl-button>;
}
Note: if you're not seeing any styles, you'll also want to load the light or dark theme .注意:如果您没有看到任何样式,您还需要加载 light 或 dark theme 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.