В вашем случае самое простое решение - использовать переменную css в вашем стиле для фона и устанавливать ее всякий раз, когда свойство фона установлено следующим образом (обратите внимание, что имена функций могут отличаться, так как кажется, что вы с использованием предварительной версии вместо последней)
<custom-background></custom-background>
<custom-background background="seagreen"></custom-background>
<custom-background background="purple"></custom-background>
<script type="module">
import {
html,
css,
LitElement
} from 'https://cdn.pika.dev/lit-element@^2.2.1';
export default class CustomBackground extends LitElement {
static get properties() {
return {
background: { type: String }
};
}
constructor() {
super();
this.background = "";
}
set background(value) {
this.style.setProperty("--background", value);
}
get background() {
this.style.getPropertyValue("--background");
}
static get styles() {
// the name of the css variable should be more descriptive
return css`
.container {
background: var(--background);
line-height: 2;
}
`;
}
render() {
return html`
<div class="container">
Some random content with background color: "${this.background}"
</div>
`;
}
}
customElements.define("custom-background", CustomBackground);
</script>
Полная рабочая демонстрация
Обратите внимание, что на самом деле вы можете полностью отказаться от свойства JS и просто пользователи могут установить переменную css напрямую, и она будет правильно стилизоваться, в этом случае что-то вроде:
<custom-background style="--background: red;"></custom-background>
или просто в css как
custom-background.special {
--background: blue;
}
Просто дополнительный наблюдение, как вы можете видеть в демонстрации, просто изменение фона может испортить контраст, поэтому вы можете также захотеть изменить цвет текста