Support binding Signal<Boolean> with attributes

[TatuLund]

Describe your motivation

Presence of the attribute is quite typical usage of attribute based API in web components. This is interpreted as boolean. I.e. when attribute is present, it does something, e.g. it is implemented with attribute CSS selector or something like that.

Describe the solution you'd like

I would like to have something like

component.getElement().bindAttributeBoolean(signal);

When signal gives true, attribute is added and when signal gives false, the attribute is removed.

[Legioth]

With the original design, this could have been easily done with a simple computed signal e.g.

public void bindFoo(Signal<Boolean> signal) {
    getElement().bindAttribute("foo", () -> signal.get() ? "true" : "");
}

But that's messed up now when bind methods should also return an appropriately typed SignalBinding. That's because bindAttribute returns SignalBinding<String> rather than SignalBinding<Boolean> that would be expected in this case.

[TatuLund]

One can workaround this using effect, but then the compromise is that this binding method is void, while others return SignalBinding of some type. I am not sure if that is a problem though.

    public void bindBorder(Signal<Boolean> signal) {
        Signal.effect(this, () -> {
            if (signal.get()) {
                getElement().removeAttribute("noborder");
            } else {
                getElement().setAttribute("noborder", true);
            }
        });
    }

[Legioth]

If you're going to return void, then a binding with a computed signal is better than an effect since the binding also prevents accidentally overriding the value.

[Artur-]

Don’t web components typically have a boolean property for this, and reflect the value to an attribute? Then you should bind to the property