VOOZH about

URL: https://www.nuget.org/packages/Fable.ShadowStyles/

⇱ NuGet Gallery | Fable.ShadowStyles 1.0.1



👁 Image
 Fable.ShadowStyles 1.0.1 

dotnet add package Fable.ShadowStyles --version 1.0.1
 
 
NuGet\Install-Package Fable.ShadowStyles -Version 1.0.1
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="Fable.ShadowStyles" Version="1.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Fable.ShadowStyles" Version="1.0.1" />
 


 Directory.Packages.props
 

 

 
<PackageReference Include="Fable.ShadowStyles" />
 


 Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Fable.ShadowStyles --version 1.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support. 
#r "nuget: Fable.ShadowStyles, 1.0.1"
#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. 
#:package Fable.ShadowStyles@1.0.1
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Fable.ShadowStyles&version=1.0.1
 


 Install as a Cake Addin
 

 

 
#tool nuget:?package=Fable.ShadowStyles&version=1.0.1
 


 Install as a Cake Tool
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

ShadowStyles

Powered by Feliz.Engine

Shadow Styles is a constructable stylesheets F# wrapper that enables you to add styles to your Fable apps that generate Custom Elements or even Web components like lit-html + Fable.Haunted and in the future Sutil + Fable.Haunted.

CSS in F#

constructable stylesheets (along with css module imports spec) try to solve the css in js dilema, while shadow DOM solves encapsulation, it makes it hard to share styles hence why we'd like to use something like constructable stylesheets

Usage Example

Here we'll use Fable.Haunted and lit-html to define a web component (i.e a custom element with a shadow root) we'll add a stylesheet to the current document and a local stylesheet to the flit-app web component

NOTE: For Safari and Firefox a polyfill is required

<script src="https://unpkg.com/construct-style-sheets-polyfill"></script>

module Main

open Browser.Dom
open Lit
open Haunted
open Fable.Core.JsInterop

open ShadowStyles
open ShadowStyles.Types
open ShadowStyles.Operators

// note we use SCss to prevent colisions with things like Fable.Lit Css

let globalStyles =
 [ "html, body"
 => [ SCss.padding 0
 SCss.margin 0
 SCss.fontFamily
 "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" ]
 "body" => [ SCss.color "blue" ] ]

/// the `=>` operator is a proxy for: `CSSRule(selector, cssPropertySequence)`

// these get applied to the whole document (false means we're not using shadowDOM)
ShadowStyles.adoptStyleSheet (document, globalStyles, false)

let myComponent () =
 // with Haunted, the functions are binded to the HTML element they are assigned
 let host = jsThis
 // which helps us get a reference to the element's shadow root

 let localStyles =
 // while classes are not required because inside
 // shadow DOM element styles are isolated
 // we'll use it for ilustration purposes
 [ ".my-rule"
 => [ SCss.displayFlex
 SCss.alignContentCenter
 SCss.color "red" ] ]

 // the following function call applies multiple (and local) styles to the host even in shadowDOM
 // let existingGlobalStyles = document?adoptedStyleSheets
 // ShadowStyles.adoptStyleSheets (host, existingGlobalStyles, localStyles)

 // this applies a single style to the host in shadowDOM
 ShadowStyles.adoptStyleSheet (host, localStyles)

 html
 $"""
 <div class="my-rule">
 <h1>Hello, World!</h1>
 </div>
 """

defineComponent
 "flit-app"
 (Haunted.Component(myComponent, {| useShadowDOM = true |}))

<!DOCTYPE html>
<html>
 <head>
 <title>Lit + Fable Template</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="shortcut icon" href="fable.ico" />
 
 <script src="https://unpkg.com/construct-style-sheets-polyfill"></script>
 </head>
 <body>
 <div>outside flit-app!</div>
 <flit-app></flit-app>
 <script type="module" src="/dist/Main.fs.js"></script>
 </body>
</html>
Product Versions Compatible and additional computed target framework versions.
.NET net5.0 net5.0 was computed.  net5.0-windows net5.0-windows was computed.  net6.0 net6.0 was computed.  net6.0-android net6.0-android was computed.  net6.0-ios net6.0-ios was computed.  net6.0-maccatalyst net6.0-maccatalyst was computed.  net6.0-macos net6.0-macos was computed.  net6.0-tvos net6.0-tvos was computed.  net6.0-windows net6.0-windows was computed.  net7.0 net7.0 was computed.  net7.0-android net7.0-android was computed.  net7.0-ios net7.0-ios was computed.  net7.0-maccatalyst net7.0-maccatalyst was computed.  net7.0-macos net7.0-macos was computed.  net7.0-tvos net7.0-tvos was computed.  net7.0-windows net7.0-windows was computed.  net8.0 net8.0 was computed.  net8.0-android net8.0-android was computed.  net8.0-browser net8.0-browser was computed.  net8.0-ios net8.0-ios was computed.  net8.0-maccatalyst net8.0-maccatalyst was computed.  net8.0-macos net8.0-macos was computed.  net8.0-tvos net8.0-tvos was computed.  net8.0-windows net8.0-windows was computed.  net9.0 net9.0 was computed.  net9.0-android net9.0-android was computed.  net9.0-browser net9.0-browser was computed.  net9.0-ios net9.0-ios was computed.  net9.0-maccatalyst net9.0-maccatalyst was computed.  net9.0-macos net9.0-macos was computed.  net9.0-tvos net9.0-tvos was computed.  net9.0-windows net9.0-windows was computed.  net10.0 net10.0 was computed.  net10.0-android net10.0-android was computed.  net10.0-browser net10.0-browser was computed.  net10.0-ios net10.0-ios was computed.  net10.0-maccatalyst net10.0-maccatalyst was computed.  net10.0-macos net10.0-macos was computed.  net10.0-tvos net10.0-tvos was computed.  net10.0-windows net10.0-windows was computed. 
.NET Core netcoreapp2.0 netcoreapp2.0 was computed.  netcoreapp2.1 netcoreapp2.1 was computed.  netcoreapp2.2 netcoreapp2.2 was computed.  netcoreapp3.0 netcoreapp3.0 was computed.  netcoreapp3.1 netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 netstandard2.0 is compatible.  netstandard2.1 netstandard2.1 was computed. 
.NET Framework net461 net461 was computed.  net462 net462 was computed.  net463 net463 was computed.  net47 net47 was computed.  net471 net471 was computed.  net472 net472 was computed.  net48 net48 was computed.  net481 net481 was computed. 
MonoAndroid monoandroid monoandroid was computed. 
MonoMac monomac monomac was computed. 
MonoTouch monotouch monotouch was computed. 
Tizen tizen40 tizen40 was computed.  tizen60 tizen60 was computed. 
Xamarin.iOS xamarinios xamarinios was computed. 
Xamarin.Mac xamarinmac xamarinmac was computed. 
Xamarin.TVOS xamarintvos xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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.1 513 9/22/2024
1.0.0 694 5/28/2022
1.0.0-beta-002 411 9/1/2021
1.0.0-beta-001 380 8/30/2021