Блог

Возможно ли передать таблицу стилей веб-компоненту с помощью lit-элемента?

Я имею в виду способ, аналогичный тому, который использовался для настройки свойств веб-компонента.

Например, у меня есть этот веб-компонент, и я хочу передать ему извне таблицу стилей, которая должна быть помещена в массив, возвращаемый внутри «static get styles» после «SharedStyles».

 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>
  

Есть ли способ передать таблицу стилей 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>
  `
}  

Это выполнит свою работу