如何解决将样式表传递给Lit-Element Web组件
是否可以使用lit-element将样式表传递到Web组件?
我的意思是类似于用于设置Web组件属性的方式。
例如,我有这个Web组件,我想从外部传递一个样式表,该样式表必须被推送到“ SharedStyles”之后的“ static get styles”内部返回的数组中。
class MyComponent extends LitElement {
static get properties() {
return {
name: { type: String }
};
}
static get styles () {
return [
super.styles,SharedStyles,css`
`
];
}
}
如果我想设置属性“ name”,我可以这样做:
<my-component .name="${"Fred"}"></my-component>
是否可以将样式表传递给我的组件?
解决方法
可以。但是您需要首先导出css文件。
步骤1:创建styles.js
import { css } from 'lit-element';
export const styleSheet = css`
:host{
// global css
}
.cssProp1{
// your properties
}
.cssProp2{
// your properties
}
`
步骤2:将CSS导入到您的组件中
import { styleSheet } from styles.js;
static get styles(){
return styleSheet;
}
第3步:呈现html:
render(){
return html`
<div class="cssProp1"></div>
<div class="cssProp2"></div>
`
}
这可以完成工作
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。