APM Modern Customization - modify Header in user-common.js and form in user-logon.js

tried to do this and insert this in the user-common.js, but did not work:

window.onload = function() {
    var header = document.getElementsByClassName('apmui-header')[0];
    if (header) {
        header.classList.add('custom-header');
        header.innerHTML = '<div>Custom Header Content</div>';
    }
}

Looks like a little bit a dirty workaround to let the page render and then re-render it... 

I also tried building the javascript code similar to one of the examples here - the "Example 2: Logon box custom component". But this does also not work, it just shows no change in the source and the page after rendering.

define(["require", "exports", "module", "react"], function (require, exports, module, React) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    requirejs.config({
        map: {
            /* Override header view component when it is loaded from main View */
            'apmui/master/View': {
                /*
                 * `module.id` is a reference to current module;
                 * replace with exact module name when using named define syntax
                 */
                'apmui/master/PageHeader': module.id,
            },
        },
    });
    /* Replacement Header component */
    function CustomPageHeader(props) {
        React.useEffect(function () {
            var header = document.getElementsByClassName('apmui-header')[0];
            if (header) {
                header.classList.add('custom-page-header');
                header.innerHTML = '<div>Custom Page Header Content</div>';
            }
        }, []);
        return React.createElement("div", { className: "apmui-header" }, props.children);
    }
    exports.CustomPageHeader = CustomPageHeader;
});