Custom selector-based styling

[BigWingBeat]

I'm making an app with Xilem, which includes some custom styling of interactive widgets, but this seems very limited at the moment. Xilem has some built-in styling that uses PropertyStacks to change the styling of widgets in response to state changes, but as for custom styling, from what I can tell, you can only apply custom styling globally, by setting a custom DefaultProperties.

I want to apply custom styling to only certain widgets, and I can see a few possible paths to this:

1. Allow setting custom classes on specific widgets. You could then filter for these classes in the selectors in the global DefaultProperties.
2. Allow directly setting PropertyStacks on specific widgets.
3. Add special-case methods to the widget types for each individual custom styling use-case.

Another thing to note is that one of the things I want to do is style a container FlexRow based on the state of a child TextInput. This is a bit different than styling a widget just based on its own state, so I'm not sure how easily the above options could be generalized to this use case.

[PoignardAzur]

Right, so, this is honestly a massive failure on my part signpost the intended roadmap.

Allow directly setting PropertyStacks on specific widgets.

This is my intended solution for the Xilem side.

To be honest, I haven't worked on it yet or even laid out a design, so any help there would be appreciated.

My broad plan would be to implement some way to assign a shared PropertyStack to a xilem element the way we currently assign properties. The API might look like this:

trait Style {
   fn with_property_stack(stack: Arc<PropertyStack>) -> Self;

  // Or
  fn with_property_stack(stack: PropertyStackId) -> Self;
}

Then you'd want some way to plumb it to Masonry. You'd want to do it in a way that easily lets you declare PropertyStacks as static variables or consts or something (the important part is they don't get recomputed every update) and then refer to them in user code.

Another thing to note is that one of the things I want to do is style a container FlexRow based on the state of a child TextInput.

Implementing this in Masonry would be hard, probably browser-level hard.

[BigWingBeat]

Implementing this in Masonry would be hard, probably browser-level hard.

That's fair, I should be more specific - the state that I care about is the focus state, which I think is more reasonable than arbitrary state? From what I understand, focus is something that all widgets have a notion of, and it's typically already propagated to parent widgets, in one way or another.

[PoignardAzur]

For this you might want to look up has_focus_target. I don't remember if the dynamic property system covers that one.

[l0uisgrange]

I would love .with_property_stack(), it fixes this issue for me. I can help on a PR if needed.

It would also allow variants of widgets built on top of this (not in Xilem directly). For example:

/// outline variant
button(...).with_property_stack(ButtonVariant::OUTLINE);
/// accent variant
button(...).with_property_stack(ButtonVariant::ACCENT);