ReactiveHTML: Enable inserting Panel objects via _scripts instead of via _template

[MarcSkovMadsen]

I'm working on improving the ReactiveHTML documentation.

When comparing to AnyWidget/ IpyReact and also looking at various Javascript frameworks, I find that ReactiveHTML lacks the feature to insert Panel objects via _scripts code instead of via template variables in the _template.

I don't know if this is officially supported or if there is a correct way to do this.

Please make this possible or document how to do this.

Workaround

A trick I've been using from time to time is to insert the parameter value in the _template and then use the render script to move it around. But this feel very much like a hack.

import panel as pn
import param
from panel.reactive import ReactiveHTML

pn.extension()


class CustomComponent(ReactiveHTML):
    value = param.Parameter()

    _template = '<div id="container">In<div id="value_el">${value}</div> between</div>'

    _scripts = {
        "render": """
window.el  = container

const el = document.createElement('div');
container.appendChild(el)
el.appendChild(value_el)
"""
    }


CustomComponent(value="some **markdown** pane", width=500, height=200).servable()