component_id and component_key should contain HTML-usable names

[nerdoc]

according to this issue, using component_id and component_key is still sub-perfect.

if you need these colon in the ID as separator internally, the HTML ids could be "shadows" of them, and don't necessarily need to be reflected back into python code any more, right? So a colon could be replaced by an _ if this ID stays in the frontend code, as "shadow" of the internal component ID - as long as no one comes to the blunt idea of putting that HTML identifier back into backend code and reference a component in the backend by unicorn:click="set_foo({{unicorn.component_id}})"

What you have to think about is nesting, yes: if some component wants to change data in the parent's backend, it can use parent. But if someone uses unicorn.component_id in the frontend to reference another component in a row in the backend, problems begin.

So one way would be to keep them "in sync" and use consistent names, even in the backends, .e.g. with underlines and hyphens. Another possibility would be .replace(":","_").replace(".","-") or .replace(":","__").replace(".","_"). That could be traced back later by .replace("_",":").replace("-",".") or .replace("__",":").replace("_",".")

[adamghill]

According to https://electrictoolbox.com/valid-characters-html-id-attribute/, : and . are allowed in HTML ids. What problems is it causing for you?

[nerdoc]

I maybe tried something that was not a good idea: unicorn:click="set_foo({{unicorn.component_id}})" - just shouldn't do that. I think it's not worth going further down that road, so I'll close that issue.