Can an HTML field be used when customizing a standard DocType. How to do it?

I am trying to customize Sales Invoice.

I need to add a read only field, which displays status results from a background task.

It needs to be colored according to the status that is set.

I’ve read here that read only fields cannot be colorized, so HTML field seems useable for that task.

I’ve tried everything I can think of to use HTML field but it never appears.

Is HTML field type only permitted in WebForms?

What field type could I use to get a colorized read-only field?

Does this help

This seemed exactly right at first, but when I try to use it “in real life” it seems it’s no help…

I need the HTML field value to display different values at different times, so embedding static text in the script is of no use.

My second thought was, “I’ll get the text I need from a hidden field.

So, in the JavaScript file /erpnext/erpnext/accounts/doctype/sales_invoice/sales_invoice.js, I put :

frappe.ui.form.on('Sales Invoice', {
  setup: function(frm){
    refresh: function(frm) {

      $(frm.fields_dict['my_html_field'].wrapper)
        .html(`<div>${frm.fields_dict.my_source_field.value}</div>`);

      console.log(`### ${frm.fields_dict.my_source_field.value} ###`);

My idea was to set the value of "my_html_field" from the value of an invisible "my_source_field".

It doesn’t work!

I never imagined that “hidden” does not mean “concealed from user”, it means “never exposed to client”.

When "my_source_field" is not hidden the console shows:

### <div>Hello world</div> ###

After I set the hidden checkbox on "my_source_field" the console shows:

### undefined ###