Styling Across Shadow DOM in LWC

 

shadowDomStyling.html

 <template>

<lightning-card title="CSS across Shadow DOM">

<div class="slds-var-m-around_medium">

<lightning-button label="testing" title="testing"></lightning-button>

</div>

</lightning-card>

</template>

shadowDomStyling.js

import { LightningElement } from 'lwc';

export default class ShadowDomStyling extends LightningElement {

isLoaded = false;

renderedCallback(){

if(this.isLoaded) return

const style = document.createElement('style')

style.innerText = `c-shadow-dom-styling .slds-button{

background: red;

color: white;

} `;

this.template.querySelector('lightning-button').appendChild(style);

this.isLoaded = true;

}

}