I'm building a widget and to avoid css conflicts, I moved widget css into the Shadow root. But the parent website css style is affecting widget even then

Noticed error is happening because of this line on the parent website.

@media screen and (min-width: 768px) {
  body {
    font-size: 2rem;
  }
}

The question, why is the body attribute in parent website affecting the Shadow root css. Isn't the purpose of Shadow root to avoid these sort of conflict?

How can I avoid this sort of problem?

I was trying to avoid !important but is there any other way?

CodePudding user response：

Inheritable CSS properties like font-size pierce the shadow DOM boundary by default. If you want to start with a fresh slate, use all: initial; to reset inheritable styles to their initial value when they cross the shadow boundary.

Within your shadow root define:

<style>
  :host {
     all: initial; /* subsequent properties are reset. */
  }
</style>

Or set the CSS properties you don't want to be affected

CodePudding user response：

just because you’re using a web component doesn’t mean the styles of it are entirely isolated.

CSS rules of the page always applied to Web components on the page.

At CSS-Tricks is a good article about this topic: https://css-tricks.com/styling-a-web-component/