Fable.ShadowStyles 1.0.0

There is a newer version of this package available.
See the version list below for details.

dotnet add package Fable.ShadowStyles --version 1.0.0

NuGet\Install-Package Fable.ShadowStyles -Version 1.0.0

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.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 and Polyglot Notebooks. 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.

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	Compatible and additional computed target framework versions.
.NET	net5.0 was computed. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. 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.
.NET Core	netcoreapp2.0 was computed. netcoreapp2.1 was computed. netcoreapp2.2 was computed. netcoreapp3.0 was computed. netcoreapp3.1 was computed.
.NET Standard	netstandard2.0 is compatible. netstandard2.1 was computed.
.NET Framework	net461 was computed. net462 was computed. net463 was computed. net47 was computed. net471 was computed. net472 was computed. net48 was computed. net481 was computed.
MonoAndroid	monoandroid was computed.
MonoMac	monomac was computed.
MonoTouch	monotouch was computed.
Tizen	tizen40 was computed. tizen60 was computed.
Xamarin.iOS	xamarinios was computed.
Xamarin.Mac	xamarinmac was computed.
Xamarin.TVOS	xamarintvos was computed.
Xamarin.WatchOS	xamarinwatchos was computed.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

.NETStandard 2.0
- Fable.Browser.Css (>= 2.2.0)
- Feliz.Engine (>= 1.0.0-beta-004)
- FSharp.Core (>= 6.0.2)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.