StencilJS - Why do some styles (e.g., background-color) apply to all elements when styling container?

Question

I'm using Stencil JS to write components for a micro front-end I'm building. I have a <dashboard-container> that as the name suggests, holds all the other components I have.

I'm trying to change the background color of my index.html's body and then let every other element, component keep their own style.

The problem is that if I try to apply background-color: red to my <dashboard-container>, the rest of the children also inherit the background color.

I'm expecting that if I apply a background color to a parent element, the children keep their own styles but it's not working that way.

How can I style a component without the children inheriting it?

This is how I have it set up:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'lh-dashboards-container',
  styleUrl: 'lh-dashboards-container.scss',
  scoped:true

})
export class LhDashboardsContainer {
  render() {
    return (
      <div class="lh-dashboards-container">
        <lh-dashboards-navigation></lh-dashboards-navigation>
        <lh-dashboards-cohort-finder></lh-dashboards-cohort-finder>
      </div>
    );
  }
}

So, if I do the following:

//lh-dashboards-container.scss
.lh-dashboards-container {
    background-color:red;
}

Every child component and their element within will have their background changed to red.

Answer 1

You can add all: initial; on the child elements but it will specify that all the element's properties should be changed to their initial values.

It's better to style the children, to override the ones being inherited from parent, if needed.

You can read more about all here.