Web component inheriting parent styles even with all: initial set

user_2181238 0
Viewed 688

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 component.

Question

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

web-component html javascript
2 Answers

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.
user_25208000

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>
user_57230980
Related