Cannot pass through directive attributes, so components can't support @on{EVENT}:stopPropagation etc.

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

This feature relates to https://github.com/dotnet/aspnetcore/issues/18460 where I’m building a custom styled component and want to keep all features for a simple tag, eg:

<div class="@boxClass" @attributes="AdditionalAttributes">
    @ChildContent
</div>

@code  {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

where, @boxClass is generated somewhere else. All attributes works except the @on{EVENT} in combination with @on{EVENT}:stopPropagation and/or @on{EVENT}:preventDefault.

Describe the solution you’d like

I’d expect that if I’m able to pass down the event handler it should be possible to pass the event custom attributes also since it’s not practical (could be for a workaround) to have two flags for each possible event and declare them into the component.

Additional context

None

[stefanloerwald]

Hi @SteveSandersonMS,

I came across this issue (again) and decided to look at code this time. For library developers who want to support arbitrary event listeners on their components, there’s just no way around attribute splatting, but that mechanism doesn’t support @onclick="Handler" @onclick:stopPropagation="Stop", because RZ10010 (“The component parameter 'onclick' is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter 'onclick' is generated by the '@onclick:stopPropagation' directive attribute.”) will prevent compiling that code.

The thing is: I don’t at all see why that’s the case! This is what I observed with the razor compiler:

1. @{eventName}:stopPropagation="value" (and similarly preventDefault), will generate the code __builder.AddEventStopPropagationAttribute(seq, eventName, value);
2. AddEventStopPropagationAttribute is implemented in WebRenderTreeBuilderExtensions with a one-liner: https://github.com/dotnet/aspnetcore/blob/a4154ac58b07bce7ddb086427c1bc8a13073babd/src/Components/Web/src/Web/WebRenderTreeBuilderExtensions.cs#L50
3. Since AddEventStopPropagationAttribute is implemented as builder.AddAttribute(sequence, $"__internal_stopPropagation_{eventName}", value);, @{eventName}:stopPropagation="value" could be replaced by __internal_stopPropagation_{eventName}="@value" with the exact same effect as AddEventStopPropagationAttribute.
4. Testing this with .NET 5 suggests that replacing the directive by the internal attribute works perfectly fine: the stopPropagation behavior is correctly applied.

This makes me wonder why RZ10010 is there in the first place. The implementation does not use the same attribute name twice at all (because one attribute is named onclick and the other __internal_stopPropagation_onclick).

Could it perhaps be that this is an error that was necessary in some old version of blazor, but now is just obsolete because implementation changed?

[javiercn]

You don’t have to increment the sequence numbers.

I apologize in advance, that I have not figured out the details, and unfortunately, I don’t have time to spend on this as I am heads down on Blazor united work. Take my suggestion as a rough sketch and play with it if you want, it might not pan out, but I think it can potentially be done.