When specifying with a transition decorator, it should be possible to use a CSS selector.

[ntoll]

Currently, it's possible to decorate a transition function with either an id or, if no id is given the event is applied to the whole card.

We should add a new (optional) argument called query that takes a valid CSS query. It is used to find matching child elements of the referenced card, that should respond to the given event with the decorated function.

For example:

@my_app.transtion("my_card", "click", query=".classname")
def my_transition(card, datastore):
    """
    Will be called on all child elements of the card that have the css class
    "classname".
    """
    ... do stuff ...

[WebReflection]

I am a bit confused here ... who defines the .classname and where? weren't we saying explaining CSS selectors was too complicated? can't any target of the transition simply be a named element within a card? 🤔

[ntoll]

This is an "escape hatch" for more advanced users. Most folks will just use the id as we currently have it. But, while creating som demos we realised we needed something a bit more flexible for attaching event handling to groups of elements (done via CSS selectors).

[WebReflection]

all I see then is a group name to attach to any element so that we can move the CSS selecting logic on our side ... to be honest, once you open the CSS way, troubles are easy to be created for ourselves and the App/user intent.