Error: "Binding a non-primitive type 'Signal<string>' results in '[object Object]' in @lit-labs/preact-signals"

[zuhairtaha]

When using @lit-labs/preact-signals with LitElement, binding a Signal<string> to an attribute in a template results in the error:

You are binding a non-primitive type 'Signal<string>'. This could result in binding the string "[object Object]". Use '.' binding instead? lit-plugin(no-complex-attribute-binding)(2301)

Reproduction Steps:

1. Create a LitElement component and import html and signal from @lit-labs/preact-signals.
2. Declare a signal, e.g., const id = signal("wrapper");.
3. Bind the signal directly to an attribute in the template, e.g., <div id=${id}>.
4. Observe the error in the editor.

Expected Behavior:
The signal value should be automatically unwrapped and correctly bound as a string without requiring special syntax or workaround.

import { html, signal } from "@lit-labs/preact-signals"; // Note I'm not using lit html
import { LitElement } from "lit";
import { customElement } from "lit/decorators.js";

const id = signal("wrapper");

setInterval(() => {
  id.value = "random-" + Date.now();
}, 1000);

@customElement("my-element")
export class MyElement extends LitElement {
  render() {
    return html`<div id=${id}>Hello</div> `; // Here is the error on using the signal for the id
  }
}

Please let me know if additional information is needed.