[Feature Request] Merging splatted attributes in Blazor

[lonix1]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

Very often I have to do this:

<MyComponent class="foo bar baz" />

But that custom component also defines a class attribute with its own classes. So I need to jump through some hoops to merge them.

This happens enough times in custom components, that I put the common stuff in a base class, as I wrote on SO, here. That SO post has 12k views, so this is something people struggle with.

Describe the solution you'd like

I do something like this:

ChildComponent.razor

<div @attributes=_additionalAttributes></div>

@code {

  [Parameter(CaptureUnmatchedValues = true)]
  public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }
    = new Dictionary<string, object>();

  private IReadOnlyDictionary<string, object>? _additionalAttributes;

  protected override void OnParametersSet()
  {
    base.OnParametersSet();

    var parentClasses = AdditionalAttributes.GetValueOrDefault("class", "");
    var classes       = $"foo {parentClasses}".Trim();

    _additionalAttributes = 
      AdditionalAttributes.Where(x => x.Key != "class")
      .Append(KeyValuePair.Create("class", (object)classes))
      .ToDictionary(x => x.Key, x => x.Value);
  }

}

ParentComponent.razor is now clean, with the normal name class:

<ChildComponent class="bar baz" />

@code {
}

Which renders:

<div class="foo bar baz"></div>

It would be nice if all that were built in. Maybe it could be:

Parameter(CaptureUnmatchedValues = true, MergeAttributes = true)]            // <--- note MergeAttributes
public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }
  = new Dictionary<string, object>();

...and we could use that during attribute splatting.

Additional context

No.

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[SteveSandersonMS]

Consider using this kind of approach to merge CSS class names from dictionaries with other fixed class names:

https://blazorfiddle.com/s/znwm2e6t

[lonix1]

Nice, that sample taught me a few new tricks.

My simplified base class MyComponentBase.cs:

public abstract class MyComponentBase : ComponentBase
{

  protected IReadOnlyDictionary<string, object>? _attributes;
  protected string _classes = "";

  [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> UnmatchedParameters { get; set; } = new Dictionary<string, object>();

  protected override void OnParametersSet()
  {
    base.OnParametersSet();

    // extract class attribute
    _classes = $"{UnmatchedParameters.GetValueOrDefault("class")}";

    // extract non-class attributes
    _attributes =
      UnmatchedParameters
      .Where(x => x.Key != "class")
      .ToDictionary(k => k.Key, v => v.Value);
  }

}

FooComponent.razor subclass:

@inherits MyComponentBase

<div class="foo bar baz @_classes" @attributes=_attributes>
  ...
</div>

And a consuming component or page uses it as such:

<FooComponent class="spam ham eggs" />

Which renders:

<div class="foo bar baz spam ham eggs></div>

It would be nice for that boilerplate to be packed away into ComponentBase instead, or for the docs to show this trick. But if that's out of scope please go ahead and close. Thanks for the advice.

[SteveSandersonMS]

Since this is achievable either by using .Concat inside component code, or by making a component base class to encapsulate such behaviors, we'll consider this supported already and close.

Thanks for confirming you have a good solution!