horizontal stack

[JordanMarr]

I got it working!

[<LitElement("horiz-stack")>]
let HorizStack() = 
    let _, props =
        LitElement.init(fun init ->
            init.useShadowDom <- true
            init.props <- 
                {| 
                    columns = Prop.Of(defaultValue = 2, attribute = "columns")
                    gap = Prop.Of(defaultValue = "0px", attribute = "gap")
                |}
        )

    html $"""
        <style>
            .grid {{
                display: grid;
                grid-template-columns: repeat({props.columns.Value}, 1fr);
                grid-gap: {props.gap.Value};
            }}
           
            ::slotted(div) {{
                box-sizing: border-box;
            }}
        </style>

        <div class="grid">
            <slot></slot>
        </div>
    """

Usage:

<horiz-stack columns="3" gap="20px">
    <div>Col A</div>
    <div>Col B</div>
    <div>Col C</div>
</horiz-stack>

The problem I had before was that I was trying to use grid-template-columns: 50% 50%, which worked fine in my css file, but glitched out when I put it inside the html $""" """. Something about the percent sign made the formatting look weird and then it just wouldn't work. Changing it to use 1fr gets around this problem, and is a nicer way of doing it anyway.

[AngelMunoz]

Formattable strings think you want to specify the kind of type going in the interpolation

$"""
.rule {{
         v---- this is why it didn't work with just %
  width: %f{amount}%%
                   ^--- youb basically need to escape it
}}
"""

[JordanMarr]

Ahh yes of course. I'm so deep into trying to get my head wrapped around Lit and web components that I'm losing track of basic F# stuff.

[AngelMunoz]

Another thing I forgot to mention on the issue where I mentioned slots is that the elements that go in the slots are part of the light DOM, meaning you can still style those areas as usual

<my-shadow-card>
 <!-- this is part of the light DOM, normal CSS works here -->
 <div class="bg-red"></div>
<my-shadow-card>

everything defined inside "my-shadow-card" will be part of the Shadow DOM, but when you consume the web component and put elements in any of the web component's slots those elements are part of the Light DOM

[JordanMarr]

Thanks, that actually makes total sense now after reading up on it a bit. Very cool stuff!

[AngelMunoz]

I think you have arrived at the point where shadow DOM styling will start making sense, this is an example on how you would normally do it via CSS Custom Properties and Shadow DOM

[<ImportMember("lit/directives/style-map.js")>]
let styleMap: obj -> TemplateResult = jsNative

[<LitElement("horiz-stack")>]
let HorizStack() = 
    let _, props =
        LitElement.init(fun init ->
            init.useShadowDom <- true
            init.props <- 
                {| 
                    columns = Prop.Of(defaultValue = 2, attribute = "columns")
                    gap = Prop.Of(defaultValue = "0px", attribute = "gap")
                |}
            // This is the place where you can put any shared styles
            // These styles are applied via Shadow DOM and are "Scoped" to this element
            // the benefit is that you styles get declared once per component definition
            // and not per component instance (like in the example you could figure out)
            init.styles <- [
                css
                    $"""
                    .grid {{
                        display: grid;
                        grid-template-columns: repeat(var(--column-count, 1), 1fr);
                        grid-gap: var(--column-gap, 8px);
                    }}
                
                    ::slotted(div) {{
                        box-sizing: border-box;
                    }}
                    """
            ]
        )
    // here we leverage CSS Custom Properties
    // to update them via our properties for this element
    // but they could also be modified by the user's stylesheet 
    // to have a different set of defaults (4 columns rather than 1, 1em gap rather than in px)
    let styles =
        {| ``--column-count`` = props.columns.Value
           ``--column-gap`` = props.gap.Value |}
    
    html $"""
        <!-- we apply our css variable overides -->
        <div class="grid" style="{styleMap styles}">
            <slot></slot>
        </div>
    """

let view() =
    html
        $"""
        <main>
            <horiz-stack gap="30px" .columns={3}>
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </horiz-stack>
            {match state with
             | Page.Home -> Home.View()
             | Page.About -> About.View()}
        </main>"""

[AngelMunoz]

In this case Users can decide how they want to leverage their defauls for example

In a Custom CSS Properties driven component (rather than the properties driven as in the example above)

[<ImportMember("lit/directives/style-map.js")>]
let styleMap: obj -> TemplateResult = jsNative

[<LitElement("horiz-stack")>]
let HorizStack () =
    let _, props =
        LitElement.init (fun init ->
            init.useShadowDom <- true

            init.styles <-
                [ css
                      $"""
                      .grid {{
                          display: grid;
                          /* use the custom propertes value and a fallback in case
                             the property is not defined */
                          grid-template-columns: repeat(var(--column-count, 1), 1fr);
                          grid-gap: var(--column-gap, 8px);
                      }}

                      ::slotted(div) {{
                          box-sizing: border-box;
                      }}
                    """ ])

    html
        $"""
        <div class="grid">
            <slot></slot>
        </div>
    """

.default-4-col-grid {
  --column-count: 4;
}

.narrow-grid {
  --column-gap: 4px;
}

.wide-grid {
 --column-gap: 18px;
}

<div class="narrow-grid default-4-col-grid">
  <horiz-stack>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </horiz-stack>
</div>

<div class="wide-grid default-4-col-grid">
  <horiz-stack>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </horiz-stack>
</div>

EDIT: I had to update this particular sample because properties would always override at the :host css rule

[JordanMarr]

The custom css properties looks useful. Thanks for pointing that out.

Is there a difference between setting init.styles vs including a style element?

[AngelMunoz]

init.styles uses lit's way to set styles in the backing class for the custom element

(i.e. static styles() { return [css``, anotherStylesheet] })

This also means that styles are set once for every component instance.

In the case of a style tag inside the markup, yes you can do that, but it means that the browser will have to parse those styles every time a new component instance is added to the DOM, so for example if you have a my-shadow-card component twice on the screen, the style tag is there twice and parsed/evaluated twice as well.

I think modern browsers have some sort of measures to reduce performance concerns but I'm not entirely aware of that situation

[AngelMunoz]

using init.styles also allows you to create shareable "stylesheets" because you can define the styles in a separate file and share them between components

[JordanMarr]

I'm just now implementing your suggestions about with the custom css properties and init.styles instead of inline <style>.
Very cool!

One issue I am having though... Is it possible to make it so that I can added a style to the my web component instance and have it be merged in with my internal styles?

For example, this style will not be merged and will be ignored:

<horiz-stack .columns={2} style="background: red;">
    <div></div>
    <div></div>
</horiz-stack>

[AngelMunoz]

For these kind of situations you would likely need to use CSS Parts

assuming this HTML

<div class="grid">
  <div part="slot-wrapper">
    <slot></slot>
  </div>
</div>

You could use normal css to style those parts

horiz-stack::part(slot-wrapper) {
  background-color: red
}

between css parts and css custom properties you can open components to custom styles where you allow it
A good library example that does css parts in a really concise and great way would be shoelace you can check that library as a reference when or what you can expose as a property/part most components have documented which parts they allow you to customize

although, I don't think inline css will work with this approach