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:
Create a LitElement component and import html and signal from @lit-labs/preact-signals.
Declare a signal, e.g., const id = signal("wrapper");.
Bind the signal directly to an attribute in the template, e.g., <div id=${id}>.
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.
When using
@lit-labs/preact-signals
with LitElement, binding aSignal<string>
to an attribute in a template results in the error:Reproduction Steps:
html
andsignal
from@lit-labs/preact-signals
.const id = signal("wrapper");
.<div id=${id}>
.Expected Behavior: The signal value should be automatically unwrapped and correctly bound as a string without requiring special syntax or workaround.
Please let me know if additional information is needed.