Ostomachion.Blazor.V7_0_3.ShadowDom
1.0.0-preview2
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
<PackageReference Include="Ostomachion.Blazor.V7_0_3.ShadowDom" Version="1.0.0-preview2" />
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"
// 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 | Versions 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. |
-
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 | 173 | 3/13/2023 |
1.0.0-preview | 141 | 3/12/2023 |
0.2.0 | 162 | 5/12/2023 |
Initial pre-release of Ostomachion.Blazor.ShadowDom scripts. Only blazor.webassembly.js has been tested.