Fable.ShadowStyles 1.0.0

.NET Standard 2.0
Install-Package Fable.ShadowStyles -Version 1.0.0
dotnet add package Fable.ShadowStyles --version 1.0.0
<PackageReference Include="Fable.ShadowStyles" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Fable.ShadowStyles --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Fable.ShadowStyles, 1.0.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install Fable.ShadowStyles as a Cake Addin
#addin nuget:?package=Fable.ShadowStyles&version=1.0.0

// Install Fable.ShadowStyles as a Cake Tool
#tool nuget:?package=Fable.ShadowStyles&version=1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.


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
           "-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.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)

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

  (Haunted.Component(myComponent, {| useShadowDOM = true |}))
<!DOCTYPE html>
    <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>
    <div>outside flit-app!</div>
    <script type="module" src="/dist/Main.fs.js"></script>
Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows
.NET Core netcoreapp2.0 netcoreapp2.1 netcoreapp2.2 netcoreapp3.0 netcoreapp3.1
.NET Standard netstandard2.0 netstandard2.1
.NET Framework net461 net462 net463 net47 net471 net472 net48
MonoAndroid monoandroid
MonoMac monomac
MonoTouch monotouch
Tizen tizen40 tizen60
Xamarin.iOS xamarinios
Xamarin.Mac xamarinmac
Xamarin.TVOS xamarintvos
Xamarin.WatchOS xamarinwatchos
Compatible target framework(s)
Additional computed target framework(s)
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.0 86 5/28/2022
1.0.0-beta-002 122 9/1/2021
1.0.0-beta-001 69 8/30/2021