Sections support

src/Components/Components/src/PublicAPI.Unshipped.txt

@@ -2,4 +2,18 @@
 Microsoft.AspNetCore.Components.ComponentBase.DispatchExceptionAsync(System.Exception! exception) -> System.Threading.Tasks.Task!
 Microsoft.AspNetCore.Components.RenderHandle.DispatchExceptionAsync(System.Exception! exception) -> System.Threading.Tasks.Task!
 *REMOVED*Microsoft.AspNetCore.Components.NavigationManager.ToAbsoluteUri(string! relativeUri) -> System.Uri!
-Microsoft.AspNetCore.Components.NavigationManager.ToAbsoluteUri(string? relativeUri) -> System.Uri!
+Microsoft.AspNetCore.Components.NavigationManager.ToAbsoluteUri(string? relativeUri) -> System.Uri!
+Microsoft.AspNetCore.Components.Sections.SectionContent
+Microsoft.AspNetCore.Components.Sections.SectionContent.ChildContent.get -> Microsoft.AspNetCore.Components.RenderFragment?
+Microsoft.AspNetCore.Components.Sections.SectionContent.ChildContent.set -> void
+Microsoft.AspNetCore.Components.Sections.SectionContent.Dispose() -> void
+Microsoft.AspNetCore.Components.Sections.SectionContent.IsDefaultContent.get -> bool
+Microsoft.AspNetCore.Components.Sections.SectionContent.IsDefaultContent.set -> void
+Microsoft.AspNetCore.Components.Sections.SectionContent.Name.get -> string!
+Microsoft.AspNetCore.Components.Sections.SectionContent.Name.set -> void
+Microsoft.AspNetCore.Components.Sections.SectionContent.SectionContent() -> void
+Microsoft.AspNetCore.Components.Sections.SectionOutlet
+Microsoft.AspNetCore.Components.Sections.SectionOutlet.Dispose() -> void
+Microsoft.AspNetCore.Components.Sections.SectionOutlet.Name.get -> string!
+Microsoft.AspNetCore.Components.Sections.SectionOutlet.Name.set -> void
+Microsoft.AspNetCore.Components.Sections.SectionOutlet.SectionOutlet() -> void

src/Components/Components/src/Sections/SectionContent.cs

@@ -6,7 +6,7 @@ namespace Microsoft.AspNetCore.Components.Sections;
 /// <summary>
 /// Provides content to <see cref="SectionOutlet"/> components with matching <see cref="Name"/>s.
 /// </summary>
-internal sealed class SectionContent : ISectionContentProvider, IComponent, IDisposable
+public sealed class SectionContent : ISectionContentProvider, IComponent, IDisposable
 {
     private string? _registeredName;
     private SectionRegistry _registry = default!;

src/Components/Components/src/Sections/SectionOutlet.cs

@@ -6,7 +6,7 @@ namespace Microsoft.AspNetCore.Components.Sections;
 /// <summary>
 /// Renders content provided by <see cref="SectionContent"/> components with matching <see cref="Name"/>s.
 /// </summary>
-internal sealed class SectionOutlet : ISectionContentSubscriber, IComponent, IDisposable
+public sealed class SectionOutlet : ISectionContentSubscriber, IComponent, IDisposable
 {
     private static readonly RenderFragment _emptyRenderFragment = _ => { };
 

src/Components/Web/src/Head/HeadOutlet.cs

@@ -14,8 +14,8 @@ public sealed class HeadOutlet : ComponentBase
 {
     private const string GetAndRemoveExistingTitle = "Blazor._internal.PageTitle.getAndRemoveExistingTitle";
 
-    internal const string HeadSectionOutletName = "head";
-    internal const string TitleSectionOutletName = "title";
+    internal const string HeadSectionOutletName = "blazor_head";
+    internal const string TitleSectionOutletName = "blazor_title";
 
     private string? _defaultTitle;
 

src/Components/test/E2ETest/Tests/SectionsTest.cs

@@ -0,0 +1,78 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using BasicTestApp;
+using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures;
+using Microsoft.AspNetCore.Components.E2ETest.Infrastructure;
+using Microsoft.AspNetCore.E2ETesting;
+using Xunit.Abstractions;
+using Microsoft.AspNetCore.Components.E2ETest;
+using OpenQA.Selenium;
+
+namespace Microsoft.AspNetCore.Components.E2ETests.Tests;
+public class SectionsTest : ServerTestBase<ToggleExecutionModeServerFixture<Program>>
+{
+    private IWebElement _appElement;
+
+    public SectionsTest
+        (BrowserFixture browserFixture,
+        ToggleExecutionModeServerFixture<Program> serverFixture,
+        ITestOutputHelper output)
+        : base(browserFixture, serverFixture, output)
+    {
+    }
+
+    protected override void InitializeAsyncCore()
+    {
+        Navigate(ServerPathBase, noReload: _serverFixture.ExecutionMode == ExecutionMode.Client);
+        _appElement = Browser.MountTestComponent<BasicTestApp.SectionsTest.ParentComponent>();
+    }
+
+    [Fact]
+    public void SectionOutletInParentComponentRendersSectionContentOfChildComponent()
+    {
+        //Nothing is chosen yet
+        Assert.False(TryGetElementById(out _, "counter"));
+        var options = _appElement.FindElement(By.Id("child-component"));
+
+        // Choose Counter
+        options.FindElement(By.Name("counter")).Click();
+        Assert.True(TryGetElementById(out var counter, "counter"));
+
+        Assert.Equal("0", counter.Text);
+        var incrememntButton = _appElement.FindElement(By.Id("increment_button"));
+
+        incrememntButton.Click();
+        Assert.Equal("1", counter.Text);
+    }
+
+    [Fact]
+    public void SectionOutletInParentComponentRendersSectionContentOfAnotherChildComponent()
+    {
+        var options = _appElement.FindElement(By.Id("child-component"));
+
+        // Choose Counter
+        options.FindElement(By.Name("counter")).Click();
+        Assert.True(TryGetElementById(out _, "counter"));
+
+        // Choose Simple Component
+        options.FindElement(By.Name("simple-component")).Click();
+        Assert.True(TryGetElementById(out var simpleComponentText, "text"));
+        Assert.Equal("Hello!", simpleComponentText.Text);
+        Assert.False(TryGetElementById(out _, "counter"));
+    }
+
+    private bool TryGetElementById(out IWebElement counter, string id)
+    {
+        try
+        {
+            counter = _appElement.FindElement(By.Id(id));
+            return true;
+        }
+        catch (OpenQA.Selenium.NoSuchElementException)
+        {
+            counter = null;
+            return false;
+        }
+    }
+}

src/Components/test/testassets/BasicTestApp/Index.razor

@@ -104,6 +104,7 @@
         <option value="BasicTestApp.VirtualizationDataChanges">Virtualization data changes</option>
         <option value="BasicTestApp.VirtualizationTable">Virtualization HTML table</option>
         <option value="BasicTestApp.HotReload.RenderOnHotReload">Render on hot reload</option>
+        <option value="BasicTestApp.SectionsTest.ParentComponent">Sections test</option>
     </select>
 
     <span id="runtime-info"><code><tt>@System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription</tt></code></span>

src/Components/test/testassets/BasicTestApp/SectionsTest/Counter.razor

@@ -0,0 +1,20 @@
+@using Microsoft.AspNetCore.Components.Sections
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<SectionContent Name="test">
+    <p id="counter">@currentCount</p>
+</SectionContent>
+
+<button id="increment_button" @onclick="IncrementCount">Click me</button>
+
+@code {
+    int currentCount = 0;
+
+    void IncrementCount()
+    {
+        currentCount++;
+    }
+}

src/Components/test/testassets/BasicTestApp/SectionsTest/ParentComponent.razor

@@ -0,0 +1,24 @@
+@using Microsoft.AspNetCore.Components.Sections
+
+<h1>Parent Component</h1>
+
+<SectionOutlet Name="test" />
+
+<select id="child-component" @bind=SelectedComponent>
+    <option value="none" name="none">Choose...</option>
+    <option value="counter" name="counter">Counter</option>
+    <option value="simple-component" name="simple-component">Simple Component</option>
+</select>
+
+@code {
+    string SelectedComponent { get; set; } = "none";
+}
+
+@if (SelectedComponent == "counter")
+{
+    <Counter></Counter>
+}
+else if (SelectedComponent == "simple-component")
+{
+    <SimpleComponent></SimpleComponent>
+}

src/Components/test/testassets/BasicTestApp/SectionsTest/SimpleComponent.razor

@@ -0,0 +1,6 @@
+@using Microsoft.AspNetCore.Components.Sections
+<h3>SimpleComponent</h3>
+
+<SectionContent Name="test">
+    <p id="text">Hello!</p>
+</SectionContent>