The styleMap() Directive

Setting Inline Styles from an Object

styleMap({ property: value, ... }) sets each key as a CSS property on the element's inline style, using the same property naming convention as JavaScript's style object (camelCase for most properties, or a string with custom-property for CSS custom properties). It's a declarative alternative to manually formatting a style attribute string.

As with classMap, styleMap must own the entire style attribute value on a given binding — it can't be combined with additional static inline style text in the same attribute binding.

import { html } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';

render() {
  const styles = {
    width: `${this.progress}%`,
    backgroundColor: this.progress > 90 ? 'crimson' : 'seagreen',
  };
  return html`<div class="fill" style=${styleMap(styles)}></div>`;
}

Two computed inline styles — a percentage width and a conditional color — are applied declaratively based on this.progress.

styleMap() Signature

styleMap({
  camelCaseProperty: 'value',
  '--custom-property': 'value', // custom properties use their literal name
})

// Must be used on the style attribute specifically:
html`<div style=${styleMap({ ... })}></div>`;

• Standard CSS properties use camelCase, matching the JS HTMLElement.style API (e.g. backgroundColor, not background-color).
• CSS custom properties keep their literal dashed name as the object key, e.g. '--fill-color': 'red'.
• Values are typically strings, including units where relevant ('50%', '10px'), since inline styles don't get automatic unit conversion.
• styleMap is imported from lit/directives/style-map.js.

styleMap Cheat Sheet

Common inline styling patterns.

When Inline Styles (vs. static styles + classes) Make Sense

Inline styles set via styleMap are the right tool specifically for values that are genuinely computed at runtime and unique per instance or per render — a progress percentage, a drag position, a chart bar's height. For styling that's simply on/off or one of a fixed set of variants, prefer classMap with the actual CSS rules living in static styles, which keeps your styling logic centralized and cacheable rather than scattered across inline style objects.

Combining styleMap with Custom Properties

A useful pattern is setting a CSS custom property's value via styleMap, while the actual CSS rule using that variable lives in static styles — this keeps the *computed value* dynamic while keeping the *styling rule itself* centralized and shared.

static styles = css`
  .bar { background: var(--bar-fill-color, gray); }
`;

render() {
  return html`
    <div class="bar" style=${styleMap({ '--bar-fill-color': this.color })}></div>
  `;
}

Common Mistakes

• Using styleMap for styling that's really just a fixed set of variants, better expressed with classMap and static CSS rules.
• Mixing static inline style text with styleMap in the same style attribute binding.
• Forgetting camelCase property naming (writing background-color instead of backgroundColor) inside the styleMap object.
• Omitting units on numeric values (width: 50 instead of width: '50%' or '50px'), which silently produces invalid CSS.

Key Takeaways

• styleMap({ property: value, ... }) declaratively sets multiple inline CSS properties from an object.
• Standard properties use camelCase; custom properties keep their literal dashed name.
• Reserve inline styles for genuinely per-instance computed values; prefer classes and static styles for fixed variants.
• It's imported from lit/directives/style-map.js and applies to the style attribute specifically.