属性スプラッティングで自作Razor ComponentへHTML属性(id, classなど)を設定する方法

自作Razor ComponentにHTML属性を割り当てたいケースは多々あるかと思います。
例えばid, classなんかはその最たるものではないでしょうか。

以下のようなShowMessage.razorというファイル名の自作Razor Componentがあったとします。

<p>@Message</p>

@code {
    [Parameter]
    public string Message {get; set;}
}

上記Componentを使用する場合、このようなコードとなります。

@page "/"

<ShowMessage Message="Hello World!"/>

ここで<ShowMessage />にstyleやid, classなど通常のHTML属性を設定します。

@page "/fetchdata"

<ShowMessage Message="Hello World!" style="background-color: red"/>

実行するとエラーが発生しました。
※以下はBlazor WebAssemblyでの実行結果です。
　Server side Blazorならビルドの時点で怒られます。

自作Razor ComponentにHTML属性を追加するとExceptionが...

CaptureUnmatchedValuesプロパティと@attributes属性で解決する

こういった場合Parameter属性に含まれるCaptureUnmatchedValuesプロパティと@attributes属性を使用することでスマートに解決できるそうです。

以下に例を示します。

実例

自作Razor Componentに手を加えます。

- <p>@Message</p>
+ <p @attributes="@Attributes">@Message</p>

@code {
    [Parameter]
    public string Message {get; set;}

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

親から受け取ったHTML属性(Attributes)をまとめて@attributesに設定しています。簡単ですね。

Attributesの中身はstyleがKey background-color: redがValueとして格納されています。想像通りですね。

親子で同じ属性を指定した場合

親からstyle="..."を指定され、子自身もstyle="..."を設定している場合、どのような挙動となるのでしょうか。

本件については、Microsoft Docsに答えが書いてありました。

docs.microsoft.com

どうやら子Component内の@attributes属性と、対象のHTML属性の記述順序によって挙動が変わるとのこと。
これはデザイン崩れなどが発生しそうで注意が必要そうですね。

おわり

前々から困っていた点の解決策が見つかって幸せです