Adding class for inner components applies to every components in the org

Question

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.

Answer 1

This isn't supposed to happen, but the Shadow DOM is currently "emulated" and therefore has a few problems like this (such as the loadStyle hack to change the display of inner elements inside other elements).

The style tag is actually a top-level tag that applies to the entire document. If you wanted to apply it just to your own element, particularly by ID, you'd want to either (a) put the ID directly into the style rules, or (b) alter the style of the component's slots with inner div wrappers.

At a simple level, the following would work (for now):

renderedCallback() {
    const style = document.createElement('style');
    style.innerText = "lightning-card[data-my-id=psc] .slds-card__header{ background-color: rgb(243, 241, 242); padding-bottom: 0px; margin-bottom: 0px; }" ;
    style.innerText += "lightning-card[data-my-id=psc] .slds-card__body{ background-color: rgb(243, 241, 242); padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; } ";
    style.innerText += "lightning-card[data-my-id=psc] .slds-card__footer{ padding-top: 0px; margin-top: 0px; }";
    this.template.querySelector('lightning-card[data-my-id=psc]').appendChild(style);
}

Note that this won't work at some point in the future (probably 2021 or so).

The supported method would be to apply the styles to the content directly:

<lightning-card>
 <div class="custom-body" slot="">
   ...
 </div>
 <div class="custom-header" slot="title">
   ...
 </div>
 <div class="custom-footer" slot="footer">
   ...
 </div>
</lightning-card>