Recently, I got a requirement where I had to override the CSS of
Shadow Dom have their own little kingdom and cannot be styled from outside, except if they would provide some options to do so. Currently, it's not possible to style standard Lightning Web Components;
I am providing a hacky workaround to get the desired results. I added the below code in my
and this is how it looks:
UPDATE:
It seems there is a cleaner approach as suggested by pdebaty: loading CSS using
lightning-card
component, specifically to change the background colour of the header of the card component.Shadow Dom have their own little kingdom and cannot be styled from outside, except if they would provide some options to do so. Currently, it's not possible to style standard Lightning Web Components;
I am providing a hacky workaround to get the desired results. I added the below code in my
helloExpressions
component:renderedCallback() {
const style = document.createElement('style');
style.innerText = `c-hello-expressions .slds-card__header {
background-color: #54C2B2;
}`;
this.template.querySelector('lightning-card').appendChild(style);
}
and this is how it looks:
UPDATE:
It seems there is a cleaner approach as suggested by pdebaty: loading CSS using
loadStyle
...lol. You can go through the StackExchange article to understand more in details.