TronDesigner – Integration Examples
Docs: Developer documentation  |  Styling the editor

Back to examples

Modify Styles from the Host Page

The editor renders inside the shadow DOM of the <trondesigner-editor> element, so your page's CSS doesn't apply to it. This page watches for the element and appends a <style> to its (open) shadow root - here hiding the secondary footer button Create PDF proofreading.

If the same CSS fits every page, prefer the Custom CSS setting in the Admin Portal - no script needed. The editor's IDs and class names (such as #TDMainFooterControls) are internal, not a versioned API, and can change with TronDesigner updates.

Oregon 400 ml - Red

Create New Print Job

Implementation Code

function injectEditorStyle(editor) {
    const root = editor.shadowRoot;
    if (!root || root.querySelector('style[data-host-style]')) return;

    const style = document.createElement('style');
    style.dataset.hostStyle = '1';
    style.textContent = `
        #TDMainFooterControls button.btn-secondary { display: none !important; }
    `;
    root.appendChild(style);
}

// A new <trondesigner-editor> is created every time the editor opens
new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            if (!(node instanceof Element)) return;
            if (node.matches('trondesigner-editor')) injectEditorStyle(node);
            node.querySelectorAll('trondesigner-editor').forEach(injectEditorStyle);
        });
    });
}).observe(document.documentElement, { childList: true, subtree: true });