3

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

|improve this question
  • 3
    You cannot modify or access the shadow dom ow lwc, thus not supported – glls May 7 '19 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 '19 at 7:43
2

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

|improve this answer
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.

|improve this answer

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