Package Exports

lit-css-var

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lit-css-var) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

lit-css-var decorator

@decorator to bind litElement property to a css variable 💅

import {LitElement, html, css, customElement} from 'lit-element';
import {cssVar} from 'lit-css-var';

@customElement('my-component')
class MyComponent extends LitElement {

  @cssVar() buttonColor = 'red';

  static styles = [css`
    button {
      background-color: var(--buttonColor);
    }
  `];

  render () {
    return html`
      <button @click="${() => this.buttonColor = this.buttonColor === 'red' ? 'blue' : 'red'}">
        button color: ${this.buttonColor}
      </button>
    `;
  }
}

Demo

Installation

npm i lit-css-var

As this feature currently support only @decorator nutation, it most be used with a transpiler supporting decorators.

For babel use @babel/plugin-proposal-decorators in your .babelrc config file.

Usage

// component.js
import {cssVar} from 'lit-css-var';
...
@cssVar() <cssVarName> = <initialValue>
...
  css`
    <cssProperty>: var(--<cssVarName>);
  `];

Options

Decorate can get options object with following properties:

observeCss boolean. default false. When true css-var decorator will become 2-way databining and update the element property when the css var was changed. It's recommend to avoid this option as it can cause performance issues.