I'm adding some style to my lightning-card so it can look like Salesforce's standard related lists.
This is the code, note that i'm using a specific ID so, in theory, it will only apply to that card.
renderedCallback() {
const style = document.createElement('style');
style.innerText = ".slds-card__header{ background-color: rgb(243, 241, 242); padding-bottom: 0px; margin-bottom: 0px; }" ;
style.innerText += ".slds-card__body{ background-color: rgb(243, 241, 242); padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; } ";
style.innerText += ".slds-card__footer{ padding-top: 0px; margin-top: 0px; }";
this.template.querySelector('lightning-card[data-my-id=psc]').appendChild(style);
}
The problem is that every standard and custom component in the org that uses a lightning card, it has now that style and displays a grey background (in related tabs, in page layouts, etc.)
I was reading some articles about the differences in CSS approach between LWC and Aura. But not sure if this particular problem is something that could be solved.
Am i doing something wrong ? There's some workaround to this ?
Thanks a lot.