Suprising behavior with html`` template and event handlers

Community Help
1

Hi folks!

I’m just wondering if what I’m seeing is a bug or not, and thought I’d pass it along.

Here’s a minimal example which works: Button test 2 / Carlos Scheidegger / Observable, and here’s a minimal example which doesn’t: Button test / Carlos Scheidegger / Observable

You’ll notice that in the latter, I’m using the html`` template to expand the event handler clicked, like so: html<button onclick=${clicked}>...</button>. Even if this isn’t supposed to work, I was surprised that it fails silently, and the console reports an error inside the web worker, “Unexpected end of input”.

Thanks for all your work on js and observable, <3
-carlos

2

Hi Carlos, your second example works if you use htl.html as the literal. The new htl package will eventually replace the plain html and svg litererals in the standard library, but for now it’s imported as a separate name for backwards compatibility with existing notebooks. (The htl literals are smarter about interpolations and events).

3 Likes
3

You can see what’s happening here if you look at the generated HTML:

html`<button onclick=${clicked}>Click me!</button>`.outerHTML

But the practical answer as @yurivish said is to use htl. The old html template literal doesn’t support event listeners, but htl does.

2 Likes