Proposal: don't use styleMap in Lit examples #276

BrainCrumbz · 2024-11-15T10:21:07Z

E.g. when comparing Svelte 5 with Lit, Svelte 5 has:

<button
  style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0;"
>
  {@render children()}
</button>

while Lit has:

<<imports>>

@customElement("funny-button")
export class FunnyButton extends LitElement {
  render() {
    return html`
      <button
        style=${styleMap({
          background: "rgba(0, 0, 0, 0.4)",
          color: "#fff",
          padding: "10px 20px",
          fontSize: "30px",
          border: "2px solid #fff",
          margin: "8px",
          transform: "scale(0.9)",
          boxShadow: "4px 4px rgba(0, 0, 0, 0.4)",
          transition: "transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s",
          outline: "0",
        })}
      >
        <slot></slot>
      </button>
    `;
  }
}

which makes Lit component appear even longer than what already is. If there's no need to change CSS style dynamically, as is the case here, I guess one could use the same inline style as Svelte example:

<<imports>>

@customElement("funny-button")
export class FunnyButton extends LitElement {
  render() {
    return html`
      <button
        style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0;"
      >
        <slot></slot>
      </button>
    `;
  }
}

Also, by removing this difference in how the inline style is set, there's less "noise" in the comparison and one can spot more easily what are the actual differences on that specific use case.

What do you think about it? Thanks for the component party site!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Proposal: don't use styleMap in Lit examples #276

Proposal: don't use styleMap in Lit examples #276

BrainCrumbz commented Nov 15, 2024 •

edited

Loading

Proposal: don't use styleMap in Lit examples #276

Proposal: don't use styleMap in Lit examples #276

Comments

BrainCrumbz commented Nov 15, 2024 • edited Loading

BrainCrumbz commented Nov 15, 2024 •

edited

Loading