Blazor <head> modification using a section-based approach by MackinnonBuck · Pull Request #34218 · dotnet/aspnetcore

MackinnonBuck · 2021-07-08T22:46:01Z

Blazor modification via new Sections API
Enables rendering to the HTML component through a new API.

PR Description
Previously, we have explored components that mutate the HTML <head> via JavaScript interop. This created numerous challenges, including handling prerendering and dealing with asynchrony. This PR introduces mechanism for defining a <HeadOutlet> that can be rendered to by a <HeadContent>.

Overview
A <HeadOutlet> is a component whose child content is determined by a <HeadContent> component. We could dynamically render to the <head> from a Counter component as follows:

<!-- Title set via HeadContent -->
<HeadContent>
    <!-- This will replace the child content in the `HeadSection` in HeadRoot.razor -->
    <meta name="description" content="A page with a button clicked @currentCount times">
    <!-- ... -->
</HeadContent>

<!-- Or, if you just want to set the title -->
<PageTitle>@currentCount</PageTitle>

To make HeadRoot render to the head, we can specify it as a root component that renders to the <head>, similar to how root components are generally rendered to to the <body>. Here's how this can be done in Blazor WebAssembly:

// In Program.Main()
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<HeadRoot>("head::after");
builder.RootComponents.Add<App>("app");

When the ::after pseudo-selector is specified, the contents of the root component are appended to the existing head contents instead of replacing them. This allows developers to keep static head content in index.html without having to repeat it in Blazor components.

In Blazor Server, we can take a similar approach by adding a 2nd component tag helper in the <head> in _Host.cshtml.

Addresses #25705

Still lots of work to do, including full prerendering support for Blazor Server.

MackinnonBuck · 2021-07-09T21:34:27Z

@pranavkm IPrerenderingDependencyManager is used in https://github.com/dotnet/aspnetcore/pull/34218/files#diff-68c83ea692cffe3129af37252dcf73c080b875b1a6bb4b50cc8a176a9cbc2ee1R115.

We've identified a possibly cleaner API for this, so I'm investigating a new approach.

pranavkm

This looks pretty nice.

SteveSandersonMS

Amazing work, @MackinnonBuck! This is a great feature. I know it's involved a lot of design but I think the end result is really superb and solves a lot of problems at once.

I posted a few other comments and suggestions but I think you should feel free to merge once they are handled to your satisfaction.

Replaced with support for '::after' pseudo-selector.

…34518) ## Description This PR introduces a way for developers to modify the HTML `<head>` contents from Blazor. ## Customer Impact With this feature, customers will be able to easily * Modify the document title (tab name). * Add link previews for links to their web app. * Optimize their website for SEO. * Dynamically change style sheets (e.g. switch between light and dark modes). Other SPA frameworks have third-party libraries enabling `<head>` modification, so this change makes Blazor an even more viable alternative. Addresses #25705

IEvangelist · 2021-07-27T02:36:25Z

Hi @MackinnonBuck, is this feature (i.e.; components and capabilities) supposed to be available in .NET 6.0.100-preview.6.21355.2? I cannot seem to get it to work in my Blazor WebAssembly app.

ghost · 2021-07-27T02:36:27Z

Hi @IEvangelist. It looks like you just commented on a closed PR. The team will most probably miss it. If you'd like to bring something important up to their attention, consider filing a new issue and add enough details to build context.

MackinnonBuck added 3 commits July 7, 2021 11:44

Initial prototype.

ac02516

Still lots of work to do, including full prerendering support for Blazor Server.

Support for prerendering to the head.

a4eb015

Small fixes.

add7b49

MackinnonBuck commented Jul 8, 2021

View reviewed changes

Comment thread src/Components/Components/src/RenderHandle.cs Outdated

MackinnonBuck commented Jul 8, 2021

View reviewed changes

Comment thread src/Components/Components/src/RenderTree/Renderer.cs

MackinnonBuck commented Jul 8, 2021

View reviewed changes

Comment thread src/Mvc/Mvc.ViewFeatures/src/Rendering/IPrerenderingDependencyManager.cs Outdated

MackinnonBuck requested review from SteveSandersonMS, javiercn and pranavkm July 8, 2021 22:54

MackinnonBuck added 6 commits July 8, 2021 16:04

Merge branch 'main' into t-mbuck/html-head-modification

56957bc

Update CircuitHostTest.cs

acefec8

Updated PublicAPI.Unshipped.txt and added XML comments.

595e94b

Added copyright notice.

a9b5649

Update PublicAPI.Unshipped.txt

e1df1ab

Made Sections API internal, added public wrapper for <head>

9d7c8a4

pranavkm reviewed Jul 9, 2021

View reviewed changes

MackinnonBuck added 2 commits July 9, 2021 17:53

Modified prerendering API and addressed some PR feedback.

6d59a72

PR feedback.

16f01c4

pranavkm reviewed Jul 12, 2021

View reviewed changes

MackinnonBuck added 9 commits July 12, 2021 14:39

Restructured test components.

32d01be

More PR feedback.

98702c6

Small improvements.

533d97c

Merge branch 'main' into t-mbuck/html-head-modification

c29b1e6

Fixed interop bug when adding components.

3adaae4

Added some E2E tests.

0f26a61

Merge branch 'main' into t-mbuck/html-head-modification

d1d0b08

Update Web.JS dist

217e1c8

Fixed some test failures.

a3fb65f

MackinnonBuck marked this pull request as ready for review July 13, 2021 17:48

SteveSandersonMS reviewed Jul 16, 2021

View reviewed changes

Comment thread src/Components/Web/src/Sections/HeadContent.cs Outdated

SteveSandersonMS reviewed Jul 16, 2021

View reviewed changes

Comment thread src/Components/Web/src/Sections/HeadSection.cs Outdated

SteveSandersonMS reviewed Jul 16, 2021

View reviewed changes

Comment thread src/Components/Web/src/Sections/PageTitle.cs Outdated

SteveSandersonMS reviewed Jul 16, 2021

View reviewed changes

Comment thread src/Mvc/Mvc.TagHelpers/src/Resources.resx Outdated

SteveSandersonMS reviewed Jul 16, 2021

View reviewed changes

Comment thread src/Components/Web.JS/src/Boot.Server.ts

SteveSandersonMS reviewed Jul 16, 2021

View reviewed changes

Comment thread src/Components/WebAssembly/WebAssembly/src/Hosting/RootComponentMapping.cs Outdated

SteveSandersonMS approved these changes Jul 16, 2021

View reviewed changes

PR feedback.

5c4ffc0

SteveSandersonMS reviewed Jul 16, 2021

View reviewed changes

Comment thread src/Components/Samples/BlazorServerApp/App.razor

MackinnonBuck added 4 commits July 16, 2021 10:37

Removed RootComponentMapping.AppendContent

3018b42

Replaced with support for '::after' pseudo-selector.

Removed ChildContent from SectionOutlet and HeadOutlet

dc409e9

Throw error in case of unknown pseudo-selector.

2adf4af

Improved E2E tests.

ec5db52

SteveSandersonMS reviewed Jul 16, 2021

View reviewed changes

Comment thread src/Components/Web.JS/src/Rendering/Renderer.ts Outdated

MackinnonBuck enabled auto-merge (squash) July 16, 2021 21:07

MackinnonBuck disabled auto-merge July 16, 2021 21:11

Changed ::after selector parsing.

91833c7

MackinnonBuck enabled auto-merge (squash) July 16, 2021 21:28

MackinnonBuck merged commit 30f0857 into main Jul 16, 2021

MackinnonBuck deleted the t-mbuck/html-head-modification branch July 16, 2021 22:46

ghost added this to the 6.0-rc1 milestone Jul 16, 2021

This was referenced Jul 19, 2021

Update Blazor <head> components #25705

Closed

Update Blazor project templates to include <head> mutation #34497

Closed

MackinnonBuck added a commit that referenced this pull request Jul 20, 2021

Blazor <head> modification using a section-based approach (#34218)

bbf19c5

guardrex mentioned this pull request Jul 20, 2021

Blazor 6.0 content tracking issue dotnet/AspNetCore.Docs#22045

Closed

41 tasks

IEvangelist mentioned this pull request Jul 27, 2021

Unable to use <HeadContent> or <PageTitle> Blazor components #34748

Closed

guardrex mentioned this pull request Jun 9, 2022

Cover SectionOutlet/SectionContent? dotnet/AspNetCore.Docs#26099

Closed

Conversation

MackinnonBuck commented Jul 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MackinnonBuck commented Jul 9, 2021

Uh oh!

pranavkm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SteveSandersonMS left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

IEvangelist commented Jul 27, 2021

Uh oh!

ghost commented Jul 27, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

MackinnonBuck commented Jul 8, 2021 •

edited

Loading