LWC css is only partially applied [duplicate]

Question

This question already has an answer here:

• Changing colors of lightning-button 2 answers

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

Answer 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

Answer 2

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.