When styling your component, you should leverage the designs and CSS provided by the SLDS, as shown in the mycomponent example earlier. This will ensure that your UI continues to stay in line with the Salesforce containers it resides in, as well as any further advances with respect to supporting new devices and layout types.

However, if you do need to define your own styles, do so via custom CSS classes added to the components .css file. The framework will ensure that these will be encapsulated within the component and will not affect other components on the page.

Any CSS you define is automatically scoped to your component. The following example is used in the Race Calendar component to highlight a race when the user clicks on it:

lightning-tile.active {
    background: rgb(255, 236, 149);
} 

The corresponding component markup uses a binding to apply the class attribute value:

<lightning-tile label={name} href="/" type="media" 
   class={raceStyle} onclick={raceClicked}>

The controller property calculates the correct value based on the value of the selected property (defined elsewhere in the controller):

get raceStyle() {
 return this.selected===true ? 
    'slds-tile_board active' : 'slds-tile_board'
}