3

This question already has an answer here:

Within this component our css is only applied to the div within the card but not to any div in the <header> (title). Is there a feasible reason or is it just a bug?

(In our real problem we are trying to manipulate the card header but can't access it. Not like demonstrated here, nor with using css classes.)

HTML:

<template>
    <lightning-card title="test">
        <div>test</div>
    </lightning-card>
</template>

CSS:

div {
    background-color: green;
}

Feel free to try it yourself, in this playground

marked as duplicate by Pranay Jaiswal, glls, Mohith Shrivastava, Community May 8 at 7:45

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 3
    You cannot modify or access the shadow dom ow lwc, thus not supported – glls May 7 at 11:42
  • @glls thanks, this sounds valid. It behaves exactly like this, but may you explain, why there is no #shadow-root node? (as described in the LWC documentation) – Sabrina May 8 at 7:43
1

This is caused by CSS Module Scoping

You can't target the card's divs because your styles are isolated to the elements of the component they're in, unlike aura components which can manipulate child elements' styles.

See Target inner elements of standard Lightning Web Components with CSS

What's interesting, and not discussed in the above post, is that in your example the elements passed into the card are scoped to your component and styles can be applied to them, which is why you see your div affected but not the internal elements defined within the lightning-card itself such as the header

0

You can stretch the div out using absolute positioning:

div {
    background-color: green;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Here's the new version for you: Playground.

Not the answer you're looking for? Browse other questions tagged or ask your own question.