Using tailwindcss in shadow DOM

[ThisFunctionalTom]

Hi,

I am playing with a lot of new (for me they are new 😅) technologies: vite, fable.lit, tailwindcss.

Fable.Lit + vite + tailwindcss already works, but I got into problems with tailwindcss in components.
Here is a small repro: https://github.com/ThisFunctionalTom/test-lit

Do you know why it is not working?

I think I do not understand how shadow DOM works, or maybe it has something to do with how tailwind generates css on the fly?

[AngelMunoz]

Hey there!
This is related to shadow DOM

Shadow DOM provides 3 things

• DOM encapsulation
• Style Encapsulation
• Content Projection

The first two are the ones that conflict with what you want to try, when you use Shadow DOM you basically close your component to external manipulation by default which means external stylesheets won't work at all with your encapsulated components, it also means that anything like querySelector won't find anything inside your component.

There are two ways you can overcome this situation

1. Don't use Shadow DOM and instead use just custom elements

[<LitElement("my-button")>]
let MyButton() =
    let _, props =
      LitElement.init(fun init ->
        init.useShadwoDom <- false
        init.props <- {| children = Prop.Of("" :?> TemplateResult, attribute = "content") |} )
    html $"""<button class="mx-4"><div class="bg-purple-800 rounded border-2">{pops.children.Value}</div></button>"""

// usage

let content = $"<span class='red'>This</span> is my <span class='blue'>content</span>!"

html $"<my-button .content={content}></my-button>"

this will not use shadow DOM and therefore it will be like any other HTML element out there with the extra benefit that your component will actually have an instance

2. Use a Hook Component or plain function for that for that

[<HookComponent>]
let myButton(content: TempalteResult) =
    // with HookComponent you can use hooks like useState
    html $"""<button class="mx-4"><div class="bg-purple-800 rounded border-2">{content}</div></button>"""

// or 
let myButton(content: TempalteResult) =
    // no hooks available here
    html $"""<button class="mx-4"><div class="bg-purple-800 rounded border-2">{content}</div></button>"""

let content = $"<span class='red'>This</span> is my <span class='blue'>content</span>!"

html $"<section>This is a button: {myButton content}</section>"

This won't create a new component but it will just rather return just "Html" that can be used like any other function

The downsides for these two approaches are that you will lose the 3 benefits from shadow dom and content projection.

Also I want to mention that you can's style the slot element itself you can style the sorrounding elements (parent or siblings) though

As for extra context this discussion may be of help for you #33

[ThisFunctionalTom]

Thanks. I actually already tried using init.useShadowDom <- false and it works in development mode, but once I do vite build the components are not getting tailwindcss styles.

Do I have to deploy/publish components somehow?
Actually, I have another question. If I make a cool component how can I share it with somebody? Do I need to make a npm package or is there some simpler way of doing it?

[ThisFunctionalTom]

Oh, sorry. Actually with useShadowDom false it is working. I thought vite preview rebuilds the project but it does not. One have to call vite build manually before each vite preview

[AngelMunoz]

but once I do vite build the components are not getting tailwindcss styles.

I'm not sure what could be wrong there I haven't used tailwind that much to figure out how that works 😔

Actually, I have another question. If I make a cool component how can I share it with somebody? Do I need to make a npm package or is there some simpler way of doing it?

For F# Users you would create a library and upload it to NuGet as usual F# users benefit from the fact that it's just F# code

For anyone outside you would then need to first compile your application

Then you have a few options

• CDN - Just upload your dist files in a public CDN and anyone can use Javascript Imports to grab those
• npm - Upload a package to npm, this can be really helpful because you can distribute the end files via npm and also there are some CDNs which grab npm pacakges and make them available as well like unpkg, jspm, and skypack

I have an erxample of a library like of components in this project here including the vite configuration

[ThisFunctionalTom]

Thx

[drk-mtr]

I'm not sure whether using CSS modules is another possibility - I haven't been able to get it working.

More here: https://twitter.com/buildWithLit/status/1503400707667513359

My attempt looks something like this:

module Lit.TodoMVC.Fresh

open Lit
open Fable.Core

let register() = ()

[<Emit("import tailwindStyles from '/src/out/style.module.css' assert { type: 'css' }")>]
let importTailwindStyles() = jsNative

importTailwindStyles()

[<Emit("tailwindStyles")>]
let tailwindStyles() = jsNative

[<LitElement("fresh-component")>]
let FreshComponent() =
    let _ = LitElement.init(fun init ->
        init.useShadowDom <- true
        init.styles <- [
            yield! tailwindStyles()
            css $"""
            p {{
                color: red;
            }}
            """
        ]
    )

    html $"""
        <div class="bg-white rounded-lg">
            Fresh Component
        </div>
    """

Unfortunately this doesn't work for me when starting from the Lit.TodoMVC project as a starting point (i.e. using Vite).

I get a browser error Failed to load module script: Expected a CSS module script but the server responded with a MIME type of "application/javascript". Strict MIME type checking is enforced for module scripts per HTML spec.. If we can work out how to get the MIME type to be sent correctly I feel this might be a good option - maybe not for tailwind, but as a way to keep encapsulation while letting Lit avoid CSS duplication for us.

Also when I try and build, it doesn't seem to like the assert { type: 'css' } bit:

[rollup-plugin-dynamic-import-variables] Unexpected token (9:55)
file: /mnt/ext4data/coding/fable-lit-styling/build/client/Fresh.js:9:55
error during build:
SyntaxError: Unexpected token (9:55)
    at Parser.pp$5.raise (/mnt/ext4data/coding/fable-lit-styling/node_modules/rollup/dist/shared/rollup.js:19495:13)

[AngelMunoz]

I don't think tailwind will work with constructable stylesheets at least as of now, that being said:

• Some tools in the ecosystem will treat .module.css as a javascript file with named exports
• Rollup might not be able to recognize module assertions yet

which looks like that's what happening to you, I would try again removing .module from the name of your css assertion

you can try this rollup plugin https://github.com/calebdwilliams/rollup-plugin-import-assert and see if that makes your build work

[drk-mtr]

Thanks! Finally got a chance to have more of a play with this. This seems to work and I'm not seeing duplication in the output - whether it's the right way I'm not so sure though:

https://github.com/drk-mtr/fable-lit-tailwind

Excerpt:

[<Emit("import tailwindStyles from '/src/out/style.css'")>]
let importTailwindStyles() = jsNative

importTailwindStyles()

[<Emit("tailwindStyles")>]
let tailwindStyles: string = jsNative

[<Emit("new CSSStyleSheet()")>]
let newCSSStyleSheet() = jsNative

[<LitElement("my-component")>]
let MyComponent() =
    let _ = LitElement.init(fun init ->
        init.useShadowDom <- true
    )

    let style = newCSSStyleSheet()
    style?replace(tailwindStyles)
    jsThis?shadowRoot?adoptedStyleSheets <- [| style |]

    html $"""
        <div class="bg-indigo-600 rounded border-2 border-teal-500 mb-2">
            My Component
        </div>
    """

EDIT: Oh it looks like you've already done this here except more safely, with proper types and comments :D https://github.com/AngelMunoz/Fable.ShadowStyles/blob/main/src/Fable.ShadowStyles/ShadowStyles.fs

[AngelMunoz]

Oh nice you got it working, and also good eye finding shadow styles!

I think you should be able to use shadow styles with this approach you can check this project as a reference
https://github.com/AngelMunoz/fs-components/blob/main/src/Styles.fs

In your case you wouldn't need to manually mount the styles you can let those go inside styles for the config function somewhat like this

NOTE: I haven't tried this but I think it should work based on your findings above

module Styles
[<ImportDefault("./fs-tab-host.css")>]
let private tailwindStyles: string = jsNative

let TailWindStyles = CSSStyleSheet.FromString(tailwindStyles)

open Styles 

[<LitElement("my-component")>]
let MyComponent() =
    let _ = LitElement.init(fun init ->
        init.useShadowDom <- true
        // Lit's style properties takes constructable stylesheets as well
        // if our bindings don't allow it let me know
        // in any case you should be able to
        // force cast it to the type required to make it work
        init.styles <- [ TailwindStyles ]
    )

    html $"""
        <div class="bg-indigo-600 rounded border-2 border-teal-500 mb-2">
            My Component
        </div>
    """

or in case the above doesn't work something like this

[<LitElement("my-component")>]
let MyComponent() =
    let host = LitElement.init()
    Hook.useEffectOnce(fun _ -> ShadowStyles.adoptStyleSheets (host, [ TailwindStyles ]))

    html $"""
        <div class="bg-indigo-600 rounded border-2 border-teal-500 mb-2">
            My Component
        </div>
    """

[alfonsogarciacaro]

BTW Fable.Lit implements a custom mechanism to scope CSS at the component level which should work very similar to CSS modules. So this is when you don't want to use shadow Dom in order to have global styles, but at the same time you want to have locally scoped rules for your components: https://fable.io/Fable.Lit/docs/hook-components.html#scoped-css