MVCE

You can execute this code snippet:

const a = document.createElement("div");

// display big red rectangle in top left
a.style.position = "absolute"; a.style.left = "10px"; a.style.top = "10px";
a.style.background = "red";
a.style.color = "green";
a.style.fontSize = "large";
document.body.appendChild(a);

// attach shadow root
a.attachShadow({mode: 'closed'}).innerHTML = `
      <style>
        :host {
          all: initial;
          display: block;
        }
      </style>

      <p>
        A paragraph element which should not inherit any styles from its parent webpage (outside the shadow DOM).
      </p>`;

MVCE

You can execute this code snippet:

const a = document.createElement("div");

// display big red rectangle in top left
a.style.position = "absolute"; a.style.left = "10px"; a.style.top = "10px";
a.style.background = "red";
a.style.color = "green";
a.style.fontSize = "large";
document.body.appendChild(a);

// attach shadow root
a.attachShadow({mode: 'closed'}).innerHTML = `
      <style>
        :host {
          all: initial;
          display: block;
        }
      </style>

      <p>
        A paragraph element which should not inherit any styles from its parent webpage (outside the shadow DOM).
      </p>`;

Description

I have copied the shadow root section verbatim from lamplightdev, but the same code is also given on various Stack Overflow threads. Due to this code, the <p> element is NOT supposed to inherit any styles from its parent body.

Problem

You can run the code snippet to see that the paragraph element appears green with large font size which is unexpected because I have set :host { all: initial; }.

In DevTools I can also see that the paragraph element is showing style rules that are "inherited from div" which is outside my web ponent.

Question

I want my web ponent to not inherit parent page styles, yet why is it doing so?

• javascript
• html
• web-ponent

Share Improve this question Follow edited Oct 21, 2021 at 13:58 Gaurang Tandon asked Oct 20, 2021 at 10:18 Gaurang TandonGaurang Tandon 6,8191111 gold badges5151 silver badges9595 bronze badges 7

• border is not an inherited property. Inheritance is meant to trickle into shadowDOM, and thanks heaven it does. – connexo Commented Oct 20, 2021 at 17:30
• You have no border set anywhere in your code. What are you talking about there? Ditto with color. The only CSS properties getting set are on the style attribute of the div that is the shadow root, and those are position, bottom, right, width, height, and background. Then you set display via the innerHTML. – Heretic Monkey Commented Oct 20, 2021 at 17:55
• Something weird going on....:host{all:initial} does not reset (which should reset according to the docs), but targeting an element inside the shadowRoot does reset: jsfiddle/WebComponents/6u1e4m3y – Danny '365CSI' Engelman Commented Oct 20, 2021 at 18:20
• @connexo The border ment was part of the code I copied verbatim from the linked website. My bad I forgot to change it. I hope - apart from it - the rest of the point of my question is clear. – Gaurang Tandon Commented Oct 21, 2021 at 4:12
• 1 @HereticMonkey thank you, I have updated the code snippet. Is it clearer now? – Gaurang Tandon Commented Oct 21, 2021 at 13:58

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5

You can use :host.

But since it has lower Specificity, you have to force it with !important

:host {
  all: initial !important;
}

Straight from Apple's lead Web Components engineer:

const a = document.createElement("div");
      a.style.background = "red";
      a.style.fontSize   = "large";
      a.style.color      = "green";

document
  .body
  .appendChild(a)
  .attachShadow({mode: 'open'})
  .innerHTML = `<style>
                  :host { all: initial !important }
                </style>
                Content which should not inherit any styles`;

Notes:

• open or closed shadowRoot has nothing to do with CSS;
  only use closed when you 100% understand what you are doing.

Using :host selector is a wrong way to stop inheritance. What you are essentially saying is reset my CSS style for the div element and then apply - position, background, color and fontSize to my div. Since color by default inherits, it gets applied to <p> tag within the shadowDOM. Imagine like - first inheritance is getting applied to host div and then overriding host element div with the specified properties.

The correct solution is to not use :host selector and instead directly apply the styles to the <p> tag as:

<style>
  p {
    all: initial;
    display: block;
  }
</style>