将样式表传递给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>
  `
}

这可以完成工作

html javascript lit-element