How to return HTML / components from clientside callbacks? - plotly-dash

Question

I want to convert a regular (Python) callback to clientside. I'm running into difficulties with outputting to children property anything more complicated then a simple string.
The hope was that I could create a new component with new dash_html_components.Span(), but this throws an error:
Error: An object was provided as `children` instead of a component, string, or number (or list of those). Check the children property that looks something like:
{
"type": "span",
"key": null,
"ref": null,
"props": {
"children": "You have clicked THE Button!"
},
"_owner": null
}
The full code is below. It is possible to set anything other than a string into children like this, or what am I doing wrong?
import dash_html_components as html
from dash import Dash
from dash.dependencies import Output, Input
app = Dash(prevent_initial_callbacks=True)
app.layout = html.Div([
html.Button("THE Button", id="the_button"),
html.Div(id="the_log"),
])
app.clientside_callback(
"""
function(n_clicks){
// return "You have clicked THE Button!"; // works
// return "You have clicked <strong>THE Button!</strong>"; // works, but escapes the HTML (as expected)
return new dash_html_components.Span({children: "You have clicked THE Button!"}); // doesn't work
// return ["You have clicked ", new dash_html_components.Strong({children: "THE Button!" })]; // the goal
}
""",
Output("the_log", "children"),
Input("the_button", "n_clicks"),
)
if __name__ == '__main__':
app.run_server()

Answer 1

If you just need to write inline HTML code, you could use the Purify component from dash-extensions. When you pass HTML code to its html property, it is rendered inline,
from dash import html, Dash, Output, Input
from dash_extensions import Purify
app = Dash(prevent_initial_callbacks=True)
app.layout = html.Div([html.Button("Click me", id="btn"), Purify(id="purify")])
app.clientside_callback("""function(n_clicks){return 'This is <b>html</b>';}""",
Output("purify", "html"), Input("btn", "n_clicks"))
if __name__ == "__main__":
app.run_server()
Prior to rendering, sanitization is performed using DOMPurify, hence the name of the component.

Answer 2

After some debugging, I found this to work:
function(n_clicks){
return [
"You have clicked ",
{
type: "Strong",
namespace: "dash_html_components",
props: {children: "THE Button"},
},
"!"
];
}