CODEWITHSUNDEEP
javascripthtmlcssweb-componentshadow-dom
Joseph Lezcano
Joseph Lezcano

Reputation: 67

Is it possible to stop inheriting CSS within shadowDom from HTML tag?

Im injecting some Javascript that creates an isolated div located at the top of the body. Within this div there is a shadowDom element. The reason I went with shadowDom is because I thought it stoped CSS from bleeding in to all the divs within the shadowDom. But I can clearly see that it is inheriting style from the tag(font-size: 62.5%;). This is causing my text to be smaller. I can override this with adding font-size: 100% !Important but even though it crosses it out in the inspector tools it does not actually change. The only way I can get it to work is by unchecking the box in the CSS portion.

Please Help

Thanks,

Dev Joe

HTML Shadow Dom IMAGE

CSS Checked IMAGE

CSS Unchecked IMAGE

Upvotes: 5

Views: 2930

Answers (2)

Supersharp
Supersharp

Reputation: 31181

You should not use a relative font size (like 100%) because it applies to inherited size... so this will have no effect.

Insead, you should define a rule to the :host CSS peudo-class:

:host {
   font-size: initial ;
}

NB: You'll need to add !important only if the font-size defined in the container (the main document) applies to the host element directly.

NB #2: You can use all: initial instead but you cannot combine it with !important. 

host.attachShadow( { mode: 'open' } )
    .innerHTML = `
      <style>
        :host { all: initial }
      </style>
      Inside Shadow Root <br>
      <div>Div in Shadow DOM</div>
      <slot></slot>
    `
body { font-size : 62.5% ; color: red }
Small Font
<div>Div in main Document</div>
<div id=host>Light DOM</div>

Upvotes: 6

Constantin Trepadus
Constantin Trepadus

Reputation: 503

No need for shadow dom, just use the all attribute to disable the inheritance.

#myElement {
  all: initial;
}

Upvotes: 2

Related Questions