ReactiveHTML element not working on elements without and id

[MarcSkovMadsen]

I'm on Panel 0.12.1 exploring the ReactiveHTML.

Not Working - No id on img

Nothing happens when I click

from panel.reactive import ReactiveHTML
import param

class Slideshow(ReactiveHTML):

    index = param.Integer(default=0)

    _template = '<img src="https://picsum.photos/800/300?image=${index}" onclick="${_callback}"></img>'

    def _callback(self, event):
        self.index += 1

Slideshow(width=800, height=300).servable()

Working

If I change the _template to

_template = '<img id="img" src="https://picsum.photos/800/300?image=${index}" onclick="${_callback}"></img>'

Additional Context

Its confusing that the 1) The id is required and this requirement is not mentioned in the guide https://panel.holoviz.org/user_guide/Custom_Components.html#reactivehtml-components and 2) The in the guide the id is called input and the onclick method is called _input_click. The relation in the example between the name of the input and the name of the callback makes it hard to figure out what is required and what is not.

I can now see that 1) the id is required 2) the callback can have any name.

[philippjfr]

I think we can also improve validation here, raising errors when trying to attach callbacks to DOM nodes without an ID.

[philippjfr]

How's this as an error:

ValueError: DOM nodes with an attached callback must declare an id. Found node with onclick callback referencing _callback method. Add an id attribute like this: <img id="img" onclick="${_callback}>...</img>.

[philippjfr]

Also going to be stricter about linked parameters (${parameter}) vs. literals ({{ parameter }}):

ValueError: DOM node with a linked parameter declaration must declare an id. Found node with the src attribute referencing the index parameter. Either declare an id on the node, i.e. <img id="img" src="https://picsum.photos/800/300?image=${index}">...</img>, or insert the value as a literal: <img src="https://picsum.photos/800/300?image={{index}}">...</img>.