13

Everything I've read indicates that the Shadow Dom is supposed to be 'safe' from its parent page CSS. I.E. if I have all divs styled to have purple font:

<style>
  div{color: purple}
</style>

The divs in my Shadow Dom should have the browser default color.

I am writing a chrome extension that injects html into any given page. Unless this html is protected by either Shadow Dom or Iframe, it will inherit all the page's CSS.

The advice to solve this problem in this question, was to use the Shadow Dom. So I implemented a solution, but noticed it was inheriting the page's CSS still. I thought this might have been an issue with using it in a Chrome extension, so I hijacked a jsBin from some Shadow Dom examples (and threw it in another live coding app for good measure).

https://codepen.io/hyrumwhite/pen/xPRexQ

Same result. My shadow DOM inherits the page CSS, and my divs (and weirdly my h1) are purple.

It looks like the children in the Shadow Dom will inherit any styling applied to the host element.

Is this working as designed? Is there a way to prevent this? Or is the shadow DOM new enough that this is a bug and I should expect similar bugs as I keep using it?

SethWhite
  • 1,891
  • 18
  • 24
  • 2
    There's a difference between inheritance and selectors. If I'm not mistaken, the shadow boundary only affects selector visibility, but everything that would be inherited is. https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#use-inheritance-from-document-level-styles https://css-tricks.com/playing-shadow-dom/ – Josh Lee Nov 08 '17 at 22:17
  • @JoshLee Makes sense. It's starting to sound like using the Shadow DOM in this case isn't the best idea. – SethWhite Nov 08 '17 at 22:49

2 Answers2

14

For me, adding :host { all: initial } as the first CSS rule within the ShadowDOM styles prevented inheritance without affecting other CSS defined within the ShadowDOM.

Using * { all: initial } proved to be too broad and overrode most of my CSS defined within the ShadowDOM.

Ref: Section marked #reset in WebFundamentals project ShadowDOM document.

user650881
  • 2,214
  • 19
  • 31
13

Inherited properties will be inherited as usual. It's better to think of the shadow boundary as affecting the cascade, namely the scope of selectors and the importance of rules.

To isolate shadow content from the page, consider the all property.

document.getElementById("example_control").attachShadow({mode:'open'}).innerHTML=`
  <h1>shadow dom header</h1>
  <div>shadow dom div</div>`;
document.getElementById("example_initial").attachShadow({mode:'open'}).innerHTML=`
  <style>*{all:initial}</style>
  <h1>shadow dom header</h1>
  <div>shadow dom div</div>`;
document.getElementById("example_unset").attachShadow({mode:'open'}).innerHTML=`
  <style>*{all:unset}</style>
  <h1>shadow dom header</h1>
  <div>shadow dom div</div>`;
div{color:purple}
div{border:1px solid}
<p>control:
<div id=example_control></div>

<p>initial:
<div id=example_initial></div>

<p>unset
<div id=example_unset></div>
OfirD
  • 9,442
  • 5
  • 47
  • 90
Josh Lee
  • 171,072
  • 38
  • 269
  • 275
  • 1
    This was accidentally a better example than I thought: The div inside the shadow content inherits the `color` property but not `border`. – Josh Lee Nov 09 '17 at 15:27
  • 1
    Instead of using a splat, you could also consider wrapping all Shadow DOM content in a single root element (e.g., `
    ... shadow markup here ...
    `). This way you can break the cascade intentionally by targeting `#root`.     – CITguy Jul 02 '19 at 14:55
  • elaboration on why *The div inside the shadow content inherits the `color` property but not `border`* can be found [in this answer](https://stackoverflow.com/a/49709787/3002584). – OfirD May 17 '20 at 14:11