#javascript #html #css #lit-element
#javascript #HTML #css #подсветка элемента
Вопрос:
Возможно ли передать таблицу стилей веб-компоненту с помощью 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?
Ответ №1:
Да, вы можете. Но сначала вам нужно экспортировать файл 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>
`
}
Это выполнит свою работу
Комментарии:
1. Спасибо за ваш ответ. Я уже знал, как сделать то, что вы мне описали. «SharedStyles» в моем примере используется точно так, как вы только что описали. Вместо этого я хотел бы передать таблицу стилей так же, как я передаю свойство, потому что я хочу другой стиль CSS для <my-element> в зависимости от других параметров, определенных в классе, в котором я собираюсь определить свой веб-компонент <my-element>.