[LWC] tooltipRenderer styling issue in version 5.6.6

[dsingh7]

Hi Team,

We are using Internal CSS and it is working fine but after upgrading to version 5.6.6 it is not working.
we have tried to reproduce at your site but it is working fine over there.

tooltipRenderer : ({ record, column }) => {let parentDiv = ''; if(record[column.field]){ parentDiv = '<style> .b-tooltip { --panel-background-color: #F9F9F9; } .notesData{color: #FF0000; font-size: 14px; font-weight: 400; line-height: 120%; }  </style> <div class=\"notesData\" >' + record[column.field] + '</div>';} return parentDiv;}

As per our analysis when we are using internal CSS a style tag has been added as per the screen shot but now in our System it is not added.

MicrosoftTeams-image (1).png (135.11 KiB) Viewed 326 times

Please let us know what we are missing or doing wrong

[dsingh7]

Hi team,

this is an urgent stuff. Please respond asap

[ghulam.ghous]

Hi dsingh7,

As you have mentioned that you are not able to reproduce this in our online examples, we will need a small runnable test so we can debug it and assist you with a solution by looking at what is wrong. We can't say anything without looking at the code.

Regards,
Ghous

[Animal]

Any reason why you don't just use your application's own CSS file?

[dsingh7]

Any reason why you don't just use your application's own CSS file?

I have created a generic LWC in SF and others can use it. So they need to pass their column config to this generic component. In column config they are passing their own tooltip desings.

[Animal]

LWC rings alarm bells.

I'd guess it's one of their "security" things, that embedded CSS won't work.

[dsingh7]

LWC rings alarm bells.

I'd guess it's one of their "security" things, that embedded CSS won't work.

But they are working fine with version 5.5.4. When switched to version 5.6.6 then it stopped working. I don't think its SF issue.

[alex.l]

Hi,

Thanks for informing, we will check what's wrong. The ticket is here https://github.com/bryntum/support/issues/8552
You can subscribe on ticket updates to be notified when it's done.

[Maxim Gorkovsky]

Hello.

This code used to work because we used to set tooltip html with innerHTML property. But recently we switched to DOMParser().parseHTML() which is patched by LWS and does not allow <style> tag. You can use a workaround to get old code working, you just need to return DomConfig object instead of string:

tooltipRenderer : ({ record, column }) => {
    let parentDiv = '';
    if (record[column.field]) {
        parentDiv = {
            children: [{
                tag: 'style',
                html: '.b-tooltip { --panel-background-color: #F9F9F9; } .notesData{color: #FF0000; font-size: 14px; font-weight: 400; line-height: 120%; }'
            }, {
                className: 'notesData',
                html: record[column.field]
            }]
        };
    }
    return parentDiv;
}

I would advise against using style inside the body, because style is a metadata content and HTML spec does not list it as a valid child of the body: https://html.spec.whatwg.org/multipage/sections.html#the-body-element:concept-element-content-model