Binding Signals to Templates How To Bind To bind signals to a template, use the provided html tagged template function to pass them in. By binding signals to templates, you allow fine-grained updates to be made directly to DOM nodes every time the signal changes, without requiring any diffing or re-rendering. Currently, binding is only supported in attribute values and text content. import { createSignal, customElement, html } from 'thunderous'; const MyElement = customElement(() => { const [count, setCount] = createSignal(0); // ... return html`<output>${count}</output>`; }); Notice we are not running the signal's getter above. This is intentional, as that responsibility is delegated to the template for proper binding. If you run the getter yourself, the template will not update when the signal changes. const MyElement = customElement(() => { const [count, setCount] = createSignal(0); // ... return html` <div>${count()}</div> <!-- template never updates --> <div>${count}</div> <!-- template updates with the signal --> `; }); How To Remove Attributes Sometimes, setting an attribute to false is not sufficient, and the entire attribute must be added or removed. To remove an attribute, set the value to null. To add it back, you can set it to an empty string. const MyElement = customElement(() => { return html` <div my-attr="${null}"></div> <!-- renders <div></div> --> <div my-attr="${''}"></div> <!-- renders <div my-attr></div> --> `; }); Arbitrary Getters In order to differentiate callback functions from value getters, a getter() method is provided in the arguments of the component function. When you pass a getter to the template, it will be treated as a signal and run the getter to return the value. const MyElement = customElement(({ getter }) => { return html` <p>${getter(() => 'Hello, world!')}</p> <!-- renders <p>Hello, world!</p> --> `; }); Binding also works in the css tagged template function, but doing so may have a limited use case. For best performance, the suggested approach is to create a CSSStyleSheet outside the component, then adopt the style sheet inside the component and toggle classes in the HTML. Signals bound to these style sheets will reflect across all instances of the same component, not just the current one. That said, if you're not concerned with incurring performance overhead, you may create a new CSSStyleSheet for each instance of the component. The difference is simply defining the style sheet inside the component function, rather than outside.