This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
Components can capture and render additional attributes in addition to the component's declared parameters. Additional attributes can be captured in a dictionary and then applied to an element, called splatting, when the component is rendered using the @attributes Razor directive attribute. This scenario is useful for defining a component that produces a markup element that supports a variety of customizations. For example, it can be tedious to define attributes separately for an <input> that supports many parameters.
Attribute splatting
In the following Splat component:
The first <input> element (id="useIndividualParams") uses individual component parameters.
The second <input> element (id="useAttributesDict") uses attribute splatting.
The position of @attributes relative to the position of element attributes is important. When @attributes are splatted on the element, the attributes are processed from right to left (last to first). Consider the following example of a parent component that consumes a child component:
@page "/attribute-order-1"
<PageTitle>Attribute Order 1</PageTitle>
<h1>Attribute Order Example 1</h1>
<AttributeOrderChild1 extra="10" />
<p>
View the HTML markup in your browser to inspect the attributes on
the AttributeOrderChild1 component.
</p>
AttributeOrder1.razor:
@page "/attribute-order-1"
<PageTitle>Attribute Order 1</PageTitle>
<h1>Attribute Order Example 1</h1>
<AttributeOrderChild1 extra="10" />
<p>
View the HTML markup in your browser to inspect the attributes on
the AttributeOrderChild1 component.
</p>
The AttributeOrderChild1 component's extra attribute is set to the right of @attributes. The AttributeOrderParent1 component's rendered <div> contains extra="5" when passed through the additional attribute because the attributes are processed right to left (last to first):
<div extra="5" />
In the following example, the order of extra and @attributes is reversed in the child component's <div>:
@page "/attribute-order-2"
<PageTitle>Attribute Order 2</PageTitle>
<h1>Attribute Order Example 2</h1>
<AttributeOrderChild2 extra="10" />
<p>
View the HTML markup in your browser to inspect the attributes on
the AttributeOrderChild2 component.
</p>
AttributeOrder2.razor:
@page "/attribute-order-2"
<PageTitle>Attribute Order 2</PageTitle>
<h1>Attribute Order Example 2</h1>
<AttributeOrderChild2 extra="10" />
<p>
View the HTML markup in your browser to inspect the attributes on
the AttributeOrderChild2 component.
</p>
The <div> in the parent component's rendered webpage contains extra="10" when passed through the additional attribute:
<div extra="10" />
Collaborate with us on GitHub
The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see our contributor guide.
ASP.NET Core feedback
ASP.NET Core is an open source project. Select a link to provide feedback:
Microsoft Graph Toolkit components are flexible for customization. You can change the behavior of components by using attributes. You can also customize component styling by using CSS custom properties to match your app's branding.