Ostomachion.Blazor.V7_0_3.ShadowDom 1.0.0-preview2

This is a prerelease version of Ostomachion.Blazor.V7_0_3.ShadowDom.
dotnet add package Ostomachion.Blazor.V7_0_3.ShadowDom --version 1.0.0-preview2                
NuGet\Install-Package Ostomachion.Blazor.V7_0_3.ShadowDom -Version 1.0.0-preview2                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Ostomachion.Blazor.V7_0_3.ShadowDom" Version="1.0.0-preview2" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Ostomachion.Blazor.V7_0_3.ShadowDom --version 1.0.0-preview2                
#r "nuget: Ostomachion.Blazor.V7_0_3.ShadowDom, 1.0.0-preview2"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Ostomachion.Blazor.V7_0_3.ShadowDom as a Cake Addin
#addin nuget:?package=Ostomachion.Blazor.V7_0_3.ShadowDom&version=1.0.0-preview2&prerelease

// Install Ostomachion.Blazor.V7_0_3.ShadowDom as a Cake Tool
#tool nuget:?package=Ostomachion.Blazor.V7_0_3.ShadowDom&version=1.0.0-preview2&prerelease                

Blazor Shadow DOM

A modified version of Microsoft's Blazor JavaScript files to add support for shadow DOMs.

Development and testing happens in https://github.com/ostomachion/aspnetcore

Still in development, but mostly tested and functional for Blazor WebAssembly projects.

Also see Blazor Web Components for a library that turns Blazor components into real standards-based Web Components using custom elements, shadow DOM, and HTML templates.

Installation

dotnet add package Ostomachion.Blazor.V7_0_3.ShadowDom --version 1.0.0-preview2

Important: Make sure that the package you download matches the version of ASP.NET Core that you are using. Currently only 7.0.3 is supported. Other versions are coming soon!

Setup

WebAssembly

In wwwroot/index.html, replace the Blazor script

<script src="_framework/blazor.webassembly.js"></script>

with the Blazor Shadow DOM script

<script src="_content/Ostomachion.Blazor.VX_X_X.ShadowDom/blazor.webassembly.js"></script>

replacing VX_X_X with the version Blazor you're using, e.g., V7_0_3.

Server

In Pages/_Host.html, replace the Blazor script

<script src="_framework/blazor.server.js"></script>

with the Blazor Shadow DOM script

<script src="_content/Ostomachion.Blazor.VX_X_X.ShadowDom/blazor.server.js"></script>

replacing VX_X_X with the version Blazor you're using, e.g., V7_0_3.

MAUI / WebView

In wwwroot/index.html, replace the Blazor script

<script src="_framework/blazor.webview.js" autostart="false"></script>

with the Blazor Shadow DOM script

<script src="_content/Ostomachion.Blazor.VX_X_X.ShadowDom/blazor.webview.js" autostart="false"></script>

replacing VX_X_X with the version Blazor you're using, e.g., V7_0_3.

Usage

The new scripts modify the Blazor renderer to recognize declarative shadow DOMs. In a .razor file, you can add a template element with a shadowrootmode attribute to get Blazor to attach a shadow root to the parent element.

<div id="host">
  <template shadowrootmode="open">
    <p>Shadow Content</p>
    <slot></slot>
  </template>
  <p>Light content</p>
</div>

This script was written to follow the declarative shadow DOM spec as closely as possible, so a normal template element will be rendered if the parent element cannot be a shadow host. Likewise, if the component does not define a parent for the template element, a normal template will be rendered no matter what the actual parent is at runtime.

Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net7.0

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0-preview2 176 3/13/2023
1.0.0-preview 144 3/12/2023
0.2.0 167 5/12/2023

Initial pre-release of Ostomachion.Blazor.ShadowDom scripts. Only blazor.webassembly.js has been tested.