Proposal: don't use styleMap in Lit examples

[BrainCrumbz]

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!