Implicits

 import com.thoughtworks.binding.Binding
 import com.thoughtworks.binding.Binding.Var
 import com.yang_bo.html.*
 import org.scalajs.dom.*
 def spinner(currentNumber: Var[Int]) = html"""
   <button
     id="minus"
     onclick=${ (e: Event) => currentNumber.value -= 1 }
   >-</button>
   <label>${currentNumber.bind.toString}</label>
   <button
     id="plus"
     onclick=${ (e: Event) => currentNumber.value += 1 }
   >+</button>
 """

 import com.yang_bo.BindingHtmlToReact.Implicits.*
 import slinky.web.html.*
 val currentNumber = Var(50)
 def reactRoot = fieldset(
   legend("I am a React component that contains an  html interpolation"),
   spinner(currentNumber)
 )

 import slinky.web.ReactDOM
 import slinky.testrenderer.TestRenderer
 import org.scalajs.dom.document
 TestRenderer.act { () =>
   ReactDOM.render(reactRoot, document.body)
 }
 currentNumber.value should be(50)
 document.body.innerHTML should be(
   """<fieldset><legend>I am a React component that contains an  html interpolation</legend><span>
   <button id="minus">-</button>
   <label>50</label>
   <button id="plus">+</button>
   </span></fieldset>"""
 )

 document
   .getElementById("minus")
   .asInstanceOf[HTMLButtonElement]
   .onclick(
     new MouseEvent("click", new MouseEventInit {
       bubbles = true
       cancelable = true
     })
   )
 currentNumber.value should be(49)
 document.body.innerHTML should be(
   """<fieldset><legend>I am a React component that contains an  html interpolation</legend><span>
   <button id="minus">-</button>
   <label>49</label>
   <button id="plus">+</button>
   </span></fieldset>"""
 )