Full-stack UI updates (Components node) 8.0 (#29972)

Author: guardrex

aspnetcore/blazor/components/built-in-components.md

@@ -16,6 +16,8 @@ The following built-in Razor components are provided by the Blazor framework:
 
 :::moniker range=">= aspnetcore-8.0"
 
+<!-- UPDATE 8.0 Confirm/update list -->
+
 * [`App`](xref:blazor/project-structure)
 * [`Authentication`](xref:blazor/security/webassembly/index#authentication-component)
 * [`AuthorizeView`](xref:blazor/security/index#authorizeview-component)

aspnetcore/blazor/components/cascading-values-and-parameters.md

@@ -58,7 +58,7 @@ The following `ThemeInfo` C# class is placed in a folder named `UIThemeClasses`
 
 The following [layout component](xref:blazor/components/layouts) specifies theme information (`ThemeInfo`) as a cascading value for all components that make up the layout body of the <xref:Microsoft.AspNetCore.Components.LayoutComponentBase.Body> property. `ButtonClass` is assigned a value of [`btn-success`](https://getbootstrap.com/docs/5.0/components/buttons/), which is a Bootstrap button style. Any descendent component in the component hierarchy can use the `ButtonClass` property through the `ThemeInfo` cascading value.
 
-`Shared/MainLayout.razor`:
+`MainLayout.razor`:
 
 :::moniker range=">= aspnetcore-7.0"
 
@@ -90,7 +90,7 @@ To make use of cascading values, descendent components declare cascading paramet
 
 The following component binds the `ThemeInfo` cascading value to a cascading parameter, optionally using the same name of `ThemeInfo`. The parameter is used to set the CSS class for the **`Increment Counter (Themed)`** button.
 
-`Pages/ThemedCounter.razor`:
+`ThemedCounter.razor`:
 
 :::moniker range=">= aspnetcore-7.0"
 
@@ -120,7 +120,7 @@ The following component binds the `ThemeInfo` cascading value to a cascading par
 
 Similar to a regular component parameter, components accepting a cascading parameter are rerendered when the cascading value is changed. For instance, configuring a different theme instance causes the `ThemedCounter` component from the [`CascadingValue` component](#cascadingvalue-component) section to rerender:
 
-`Shared/MainLayout.razor`:
+`MainLayout.razor`:
 
 ```razor
 <main>
@@ -212,7 +212,7 @@ The following `TabSet` component maintains a set of tabs. The tab set's `Tab` co
 
 Child `Tab` components aren't explicitly passed as parameters to the `TabSet`. Instead, the child `Tab` components are part of the child content of the `TabSet`. However, the `TabSet` still needs a reference each `Tab` component so that it can render the headers and the active tab. To enable this coordination without requiring additional code, the `TabSet` component *can provide itself as a cascading value* that is then picked up by the descendent `Tab` components.
 
-`Shared/TabSet.razor`:
+`TabSet.razor`:
 
 ```razor
 @using BlazorSample.UIInterfaces
@@ -258,7 +258,7 @@ Child `Tab` components aren't explicitly passed as parameters to the `TabSet`. I
 
 Descendent `Tab` components capture the containing `TabSet` as a cascading parameter. The `Tab` components add themselves to the `TabSet` and coordinate to set the active tab.
 
-`Shared/Tab.razor`:
+`Tab.razor`:
 
 ```razor
 @using BlazorSample.UIInterfaces
@@ -297,7 +297,7 @@ Descendent `Tab` components capture the containing `TabSet` as a cascading param
 
 The following `ExampleTabSet` component uses the `TabSet` component, which contains three `Tab` components.
 
-`Pages/ExampleTabSet.razor`:
+`ExampleTabSet.razor`:
 
 ```razor
 @page "/example-tab-set"

aspnetcore/blazor/components/class-libraries.md

@@ -55,7 +55,7 @@ If the **Support pages and views** checkbox is selected to support pages and vie
   </ItemGroup>
   ```
 
-  For more information on the `SupportedPlatform` item, see the [Browser compatibility analyzer for Blazor WebAssembly](#browser-compatibility-analyzer-for-blazor-webassembly) section.
+  For more information on the `SupportedPlatform` item, see the [client-side browser compatibility analyzer](#client-side-browser-compatibility-analyzer) section.
 
 :::moniker-end
 
@@ -102,7 +102,7 @@ If the **Support pages and views** checkbox is selected to support pages and vie
   </ItemGroup>
   ```
 
-  For more information on the `SupportedPlatform` item, see the [Browser compatibility analyzer for Blazor WebAssembly](#browser-compatibility-analyzer-for-blazor-webassembly) section.
+  For more information on the `SupportedPlatform` item, see the [client-side browser compatibility analyzer](#client-side-browser-compatibility-analyzer) section.
 
 :::moniker-end
 
@@ -148,7 +148,7 @@ If the `-s|--support-pages-and-views` option is used to support pages and views
   </ItemGroup>
   ```
 
-  For more information on the `SupportedPlatform` item, see the [Browser compatibility analyzer for Blazor WebAssembly](#browser-compatibility-analyzer-for-blazor-webassembly) section.
+  For more information on the `SupportedPlatform` item, see the [client-side browser compatibility analyzer](#client-side-browser-compatibility-analyzer) section.
 
 :::moniker-end
 
@@ -188,7 +188,7 @@ In the following examples, `ComponentLibrary` is an RCL containing the `Componen
 
 In the app that consumes the RCL, reference the `Component1` component using its namespace, as the following example shows.
 
-`Pages/ConsumeComponent1.razor`:
+`ConsumeComponent1.razor`:
 
 ```razor
 @page "/consume-component-1"
@@ -200,7 +200,7 @@ In the app that consumes the RCL, reference the `Component1` component using its
 
 Alternatively, add a [`@using`](xref:mvc/views/razor#using) directive and use the component without its namespace. The following `@using` directive can also appear in any `_Imports.razor` file in or above the current folder.
 
-`Pages/ConsumeComponent2.razor`:
+`ConsumeComponent2.razor`:
 
 ```razor
 @page "/consume-component-2"
@@ -276,7 +276,7 @@ Add a component to the RCL that uses the `extra-style` class.
 
 Add a page to the app that uses the `ExtraStyles` component from the RCL.
 
-`Pages/ConsumeComponent3.razor`:
+`ConsumeComponent3.razor`:
 
 ```razor
 @page "/consume-component-3"
@@ -343,9 +343,7 @@ The following background image and stylesheet are used by the RCL's `Component1`
 }
 ```
 
-To provide `Component1`'s `my-component` CSS class, link to the library's stylesheet in the app's `<head>` markup.
-
-`wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Host.cshtml` file (Blazor Server):
+To provide `Component1`'s `my-component` CSS class, link to the library's stylesheet in the app's `<head>` markup ([location of `<head>` content](xref:blazor/project-structure#location-of-head-content)):
 
 ```html
 <link href="_content/ComponentLibrary/styles.css" rel="stylesheet" />
@@ -384,7 +382,7 @@ Add the following `Jeep` component to the app that consumes the `ComponentLibrar
 * The Jeep YJ&reg; image from the `ComponentLibrary` RCL's `wwwroot` folder.
 * The `JeepYJ` component from the RCL.
 
-`Pages/Jeep.razor`:
+`Jeep.razor`:
 
 ```razor
 @page "/jeep"
@@ -422,15 +420,15 @@ For more information, see <xref:razor-pages/ui-class#create-an-rcl-with-static-a
 
 ## Supply components and static assets to multiple hosted Blazor apps
 
-For more information, see <xref:blazor/host-and-deploy/webassembly#static-assets-and-class-libraries-for-multiple-blazor-webassembly-apps>.
+For more information, see <xref:blazor/host-and-deploy/multiple-hosted-webassembly>.
 
 :::moniker range=">= aspnetcore-5.0"
 
-## Browser compatibility analyzer for Blazor WebAssembly
+## Client-side browser compatibility analyzer
 
-Blazor WebAssembly apps target the full .NET API surface area, but not all .NET APIs are supported on WebAssembly due to browser sandbox constraints. Unsupported APIs throw <xref:System.PlatformNotSupportedException> when running on WebAssembly. A platform compatibility analyzer warns the developer when the app uses APIs that aren't supported by the app's target platforms. For Blazor WebAssembly apps, this means checking that APIs are supported in browsers. Annotating .NET framework APIs for the compatibility analyzer is an on-going process, so not all .NET framework API is currently annotated.
+Client-side apps target the full .NET API surface area, but not all .NET APIs are supported on WebAssembly due to browser sandbox constraints. Unsupported APIs throw <xref:System.PlatformNotSupportedException> when running on WebAssembly. A platform compatibility analyzer warns the developer when the app uses APIs that aren't supported by the app's target platforms. For client-side apps, this means checking that APIs are supported in browsers. Annotating .NET framework APIs for the compatibility analyzer is an on-going process, so not all .NET framework API is currently annotated.
 
-Blazor WebAssembly and RCL projects *automatically* enable browser compatibility checks by adding `browser` as a supported platform with the `SupportedPlatform` MSBuild item. Library developers can manually add the `SupportedPlatform` item to a library's project file to enable the feature:
+Blazor Web Apps that enable interactive WebAssembly components, Blazor WebAssembly apps, and RCL projects *automatically* enable browser compatibility checks by adding `browser` as a supported platform with the `SupportedPlatform` MSBuild item. Library developers can manually add the `SupportedPlatform` item to a library's project file to enable the feature:
 
 ```xml
 <ItemGroup>

aspnetcore/blazor/components/control-head-content.md

@@ -22,7 +22,7 @@ Specify `<head>` element content with the <xref:Microsoft.AspNetCore.Components.
 
 The following example sets the page's title and description using Razor.
 
-`Pages/ControlHeadContent.razor`:
+`ControlHeadContent.razor`:
 
 :::moniker range=">= aspnetcore-7.0"
 
@@ -42,7 +42,7 @@ The following example sets the page's title and description using Razor.
 
 *This section applies to prerendered Blazor WebAssembly apps and Blazor Server apps.*
 
-When [Razor components are prerendered](xref:blazor/components/prerendering-and-integration), the use of a layout page (`_Layout.cshtml`) is required to control `<head>` content with the <xref:Microsoft.AspNetCore.Components.Web.PageTitle> and <xref:Microsoft.AspNetCore.Components.Web.HeadContent> components. The reason for this requirement is that components that control `<head>` content must be rendered before the layout with the <xref:Microsoft.AspNetCore.Components.Web.HeadOutlet> component. **This order of rendering is required to control head content.**
+When Razor components are prerendered, the use of a layout page (`_Layout.cshtml`) is required to control `<head>` content with the <xref:Microsoft.AspNetCore.Components.Web.PageTitle> and <xref:Microsoft.AspNetCore.Components.Web.HeadContent> components. The reason for this requirement is that components that control `<head>` content must be rendered before the layout with the <xref:Microsoft.AspNetCore.Components.Web.HeadOutlet> component. **This order of rendering is required to control head content.**
 
 If the shared `_Layout.cshtml` file doesn't have a [Component Tag Helper](xref:mvc/views/tag-helpers/builtin-th/component-tag-helper) for a <xref:Microsoft.AspNetCore.Components.Web.HeadOutlet> component, add it to the `<head>` elements.
 
@@ -103,7 +103,7 @@ In Blazor Server apps created from the Blazor Server project template, a [Compon
 
 :::moniker-end
 
-In an app created from the Blazor WebAssembly project template, the <xref:Microsoft.AspNetCore.Components.Web.HeadOutlet> component is added to the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents> collection of the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder> in `Program.cs`:
+In an app created from the Blazor WebAssembly project template, the <xref:Microsoft.AspNetCore.Components.Web.HeadOutlet> component is added to the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents> collection of the <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder> in the client-side `Program` file:
 
 ```csharp
 builder.RootComponents.Add<HeadOutlet>("head::after");

aspnetcore/blazor/components/css-isolation.md

@@ -27,15 +27,15 @@ To define component-specific styles, create a `.razor.css` file matching the nam
 
 For an `Example` component in an `Example.razor` file, create a file alongside the component named `Example.razor.css`. The `Example.razor.css` file must reside in the same folder as the `Example` component (`Example.razor`). The "`Example`" base name of the file is **not** case-sensitive.
 
-`Pages/Example.razor`:
+`Example.razor`:
 
 ```razor
 @page "/example"
 
 <h1>Scoped CSS Example</h1>
 ```
 
-`Pages/Example.razor.css`:
+`Example.razor.css`:
 
 ```css
 h1 { 
@@ -72,7 +72,7 @@ Within the bundled file, each component is associated with a scope identifier. F
 The `{ASSEMBLY NAME}.styles.css` file uses the scope identifier to group a style declaration with its component. The following example provides the style for the preceding `<h1>` element:
 
 ```css
-/* /Pages/Counter.razor.rz.scp.css */
+/* /Components/Pages/Counter.razor.rz.scp.css */
 h1[b-3xxtam6d07] {
     color: brown;
 }
@@ -90,7 +90,7 @@ By default, CSS isolation only applies to the component you associate with the f
 
 The following example shows a parent component called `Parent` with a child component called `Child`.
 
-`Pages/Parent.razor`:
+`Parent.razor`:
 
 ```razor
 @page "/parent"
@@ -102,15 +102,15 @@ The following example shows a parent component called `Parent` with a child comp
 </div>
 ```
 
-`Shared/Child.razor`:
+`Child.razor`:
 
 ```razor
 <h1>Child Component</h1>
 ```
 
 Update the `h1` declaration in `Parent.razor.css` with the `::deep` pseudo-element to signify the `h1` style declaration must apply to the parent component and its children.
 
-`Pages/Parent.razor.css`:
+`Parent.razor.css`:
 
 ```css
 ::deep h1 { 
@@ -122,7 +122,7 @@ The `h1` style now applies to the `Parent` and `Child` components without the ne
 
 The `::deep` pseudo-element only works with descendant elements. The following markup applies the `h1` styles to components as expected. The parent component's scope identifier is applied to the `div` element, so the browser knows to inherit styles from the parent component.
 
-`Pages/Parent.razor`:
+`Parent.razor`:
 
 ```razor
 <div>
@@ -134,7 +134,7 @@ The `::deep` pseudo-element only works with descendant elements. The following m
 
 However, excluding the `div` element removes the descendant relationship. In the following example, the style is **not** applied to the child component.
 
-`Pages/Parent.razor`:
+`Parent.razor`:
 
 ```razor
 <h1>Parent</h1>
@@ -161,6 +161,39 @@ CSS isolation is designed to work out-of-the-box but provides configuration for
 
 ### Customize scope identifier format
 
+:::moniker range=">= aspnetcore-8.0"
+
+By default, scope identifiers use the format `b-{STRING}`, where the `{STRING}` placeholder is a ten-character string generated by the framework. To customize the scope identifier format, update the project file to a desired pattern:
+
+```xml
+<ItemGroup>
+  <None Update="Components/Pages/Example.razor.css" CssScope="custom-scope-identifier" />
+</ItemGroup>
+```
+
+In the preceding example, the CSS generated for `Example.razor.css` changes its scope identifier from `b-{STRING}` to `custom-scope-identifier`.
+
+Use scope identifiers to achieve inheritance with scoped CSS files. In the following project file example, a `BaseComponent.razor.css` file contains common styles across components. A `DerivedComponent.razor.css` file inherits these styles.
+
+```xml
+<ItemGroup>
+  <None Update="Components/Pages/BaseComponent.razor.css" CssScope="custom-scope-identifier" />
+  <None Update="Components/Pages/DerivedComponent.razor.css" CssScope="custom-scope-identifier" />
+</ItemGroup>
+```
+
+Use the wildcard (`*`) operator to share scope identifiers across multiple files:
+
+```xml
+<ItemGroup>
+  <None Update="Components/Pages/*.razor.css" CssScope="custom-scope-identifier" />
+</ItemGroup>
+```
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-8.0"
+
 By default, scope identifiers use the format `b-{STRING}`, where the `{STRING}` placeholder is a ten-character string generated by the framework. To customize the scope identifier format, update the project file to a desired pattern:
 
 ```xml
@@ -188,6 +221,8 @@ Use the wildcard (`*`) operator to share scope identifiers across multiple files
 </ItemGroup>
 ```
 
+:::moniker-end
+
 ### Change base path for static web assets
 
 The `scoped.styles.css` file is generated at the root of the app. In the project file, use the [`<StaticWebAssetBasePath>` property](xref:blazor/fundamentals/static-files#static-web-asset-base-path) to change the default path. The following example places the `scoped.styles.css` file, and the rest of the app's assets, at the `_content` path: