Add renderRoot in host (LitElement) about fable.lit HOT 3 CLOSED

module Lit.TodoMVC.App

open Lit
open Browser.Types
open Browser
open Fable.Core.JsInterop

type ToDoItem =
    { Text: string
      mutable Completed: bool }

let styles =
    [ css
          $"""
        .completed {{
        text-decoration-line: line-through;
        color: #777;
                }}""" ]

[<LitElement("todo-list")>]
let ToDoList () =

    // This call is obligatory to initialize the web component
    let host, props =
        LitElement.init
            (fun init ->
                init.styles <- styles
                init.useShadowDom
                init.props <-
                    {| listItems =
                           Prop.Of(
                               [ { Text = "Start Lit tutorial"
                                   Completed = true }
                                 { Text = "Make to-do list"
                                   Completed = false } ]
                           )
                       hideCompleted = Prop.Of(false) |})

    let input () : HTMLInputElement =
        host?renderRoot?querySelector ("#newitem")

    let addToDo (event: Event) =
        //let input = event.target
        //props.firstname.Value <- input.Value
        let input = input ()

        props.listItems.Value <-
            { Text = input.Value
              Completed = false }
            :: props.listItems.Value

        input.value <- ""
        host.requestUpdate ()

    let toggleCompleted (item: ToDoItem) =
        item.Completed <- not item.Completed
        host.requestUpdate ()



    let getItemTemplate item =
        html
            $"""<li class={if item.Completed then
                               "completed"
                           else
                               ""}
                           @click={fun _ -> toggleCompleted (item)}>{item.Text}</li>"""

    let setHideCompleted (e: Event) =
        props.hideCompleted.Value <- (e.target :?> HTMLInputElement).``checked``


    let items =
        if props.hideCompleted.Value then
            props.listItems.Value
            |> List.filter (fun item -> not item.Completed)
        else
            props.listItems.Value

    let caughtUpMessage =
        html
            $"""
            <p>
            You're all caught up!
            </p>
            """

    let todos =
        html
            $"""<ul>
            {items
             |> Lit.mapUnique (fun item -> item.Text) getItemTemplate}
            <!-- TODO: Render list items. -->
         </ul>
          """

    let todosOrMessage =
        if items.Length > 0 then
            todos
        else
            caughtUpMessage

    html
        $"""
          <h2>To Do</h2>
          {todosOrMessage}
          <input id="newitem" aria-label="New item">
          <button @click={addToDo}>Add</button>
          <br>
          <label>
            <input type="checkbox"
              @change={setHideCompleted}
              ?checked={props.hideCompleted}>
            Hide completed
          </label>
        """