Event handlers in custom tags

[propi]

Hi,

in my web page, I use HTML custom tags and shadow DOM. I would like to use Binding.scala to render contents with bindings, but I have problem to add event handlers into custom tags.

In native JavaScript I have defined custom tag <top-menu-bar>. In Scala.js I have written this code:

@dom
def view: Binding[Div] = {
<div>
    <data:top-menu-bar data:onclick={_: Event => some action here}></data:top-menu-bar>
</div>
}

Unfortunately, the compiler returns type mismatch

type mismatch;
[error]  found   : org.scalajs.dom.Event => Boolean
[error]     (which expands to)  org.scalajs.dom.raw.Event => Boolean
[error]  required: String

If the attribute is without the data: prefix, it also does not work because value onclick is not a member of org.scalajs.dom.raw.Element

Is it possible to add an event handler to a custom tag?

[Atry]

I recently announced LatestEvent.scala, which can be used for handling events.

Something like this would work

def view: Binding[Div] = {
  val topMenuBar = html"<top-menu-bar></top-menu-bar>"
  Binding {
    LatestEvent.click(topMenuBar.bind).bind
    // some action here
  }.bind
  html"<div>$topMenuBar</div>"
}