How to use the lit-html/directives/style-map.styleMap function in lit-html

<div>
		${repeat([], () =&gt; html``)}
	</div>
`;

const classes = {};
html`
	<div>Classy text</div>
`;

const style = {};
html`
	<p>Hello style!</p>
`;

html`
	<img src="${guard([src], () => (Math.random() > 0.5 ?">
	
`;

html`
	<input>
`; /* <input disabled="true"> */
html`
	<input>
`; /* <input disabled="true"> */
html`
	<input>
`; /* <input disabled="false"> */

pin = html`
      <div class="mdc-slider__pin">
        <span class="mdc-slider__pin-value-marker">${this.pinMarkerText}</span>
      </div>`;
    }

    return html`
      <div data-step="${this.step}" aria-disabled="${this.disabled}" aria-valuenow="${this.value}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" role="slider" tabindex="0" class="mdc-slider ${classMap(hostClassInfo)}">
      <div class="mdc-slider__track-container">
        <div style="${styleMap(this.trackStyles)}" class="mdc-slider__track">
        </div>
        ${markersTemplate}
      </div>
      <div style="${styleMap(this.thumbContainerStyles)}" class="mdc-slider__thumb-container">
        
        ${pin}
        <svg height="21" width="21" class="mdc-slider__thumb">
          <circle r="7.875" cy="10.5" cx="10.5"></circle>
        </svg>
        <div class="mdc-slider__focus-ring"></div>
      </div>
    </div>`;
  }

this.drawerOpened && !this.isViewallPage
        ? this.drawerHeight > 20
          ? this.drawerHeight
          : 300
        : 0;

    const coverStyles = { display: this.isMouseDown ? 'block' : 'none' };
    const drawerStyles = {
      height: `${renderedHeight}px`,
      transitionDuration: this.isMouseDown ? '0ms' : '300ms',
    };

    return html`
      <div>
        <div style="${styleMap(coverStyles)}" class="pl-c-drawer__cover"></div>
        <div class="pl-c-drawer__wrapper" style="${styleMap(drawerStyles)}">
          <div class="pl-c-drawer__resizer">
            <svg class="pl-c-drawer__resizer-icon" preserveAspectRatio="xMidYMid" viewBox="0 0 20 20">
              <title>Drag to resize Pattern Lab Drawer</title>
              <path d="M6 0h2v20H6zM13 0h2v20h-2z"></path>
            </svg>
          </div>
          <div class="${classMap(classes)}">
            <div class="pl-c-drawer__toolbar">
              <div class="pl-c-drawer__toolbar-controls">
                </div></div></div></div></div>

render() {
    return html`
    <div style="${styleMap(div3styles)}">
      <h3>Div 3</h3>
      <p>Styled with styleMap</p>
      <p style="${styleMap({">A paragraph using <code>--custom-color</code></p>
      <p style="${styleMap({">A paragraph using <code>--otherCustomColor</code></p>
    </div>`;
  }
}

<button class="clear-button tap"> this.clear()}&gt;
                <svg viewBox="0 0 10 10" class="countdown">
                    <defs>
                        <filter id="shadow">
                            <feOffset result="shadowOffsetOuter1" in="SourceAlpha" dx="-0.3"></feOffset>
                            <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0"></feColorMatrix>
                        </filter>
                    </defs>

                    <circle style="${styleMap({" r="4" cy="5" cx="5" filter="url(#shadow)"></circle>

                    <circle style="${styleMap({" r="4" cy="5" cx="5"></circle>
                </svg>

                <div>
                    ${_tMinusClear}s
                </div>
            </button>
            
        `;

protected render(): TemplateResult | void {
    const handlers = this._getHandlers(this.handlers, this.filter);

    return html`
      <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
      
      <div style="${styleMap({">
        ${handlers.map(
          (handler: HandlerObj) =&gt;
            html`
              
                
                  ${handler.name}
                
                
              
            `
        )}
      </div>
      ${this.showAdvanced
        ? html`
            <p>
              ${this.hass.localize(</p>

render() {
    return html`
      <div style="${styleMap(this.styles)}" class="${classMap(this.classes)}">
        Some content
      </div>
    `;
  }
}

protected render() {
    const hostClassInfo = {
      'mdc-slider--discrete': this.discrete,
      'mdc-slider--display-markers': this.markers && this.discrete,
    };

    let markersTemplate: TemplateResult|string = '';

    if (this.discrete && this.markers) {
      markersTemplate = html`
        <div style="${styleMap(this.trackMarkerContainerStyles)}" class="mdc-slider__track-marker-container">
        </div>`;
    }

    let pin: TemplateResult|string = '';

    if (this.discrete) {
      pin = html`
      <div class="mdc-slider__pin">
        <span class="mdc-slider__pin-value-marker">${this.pinMarkerText}</span>
      </div>`;
    }

    return html`

render() {
    return html`
    <div style="${styleMap(div3styles)}">
      <h3>Div 3</h3>
      <p>Styled with styleMap</p>
      <p style="${styleMap({">A paragraph using <code>--custom-color</code></p>
      <p style="${styleMap({">A paragraph using <code>--otherCustomColor</code></p>
    </div>`;
  }
}