Angular ViewEncapsulation.ShadowDOM doesn't isolate css styles

Question

I've read that ShadowDOM isolates the shadow dom tree from external css so i've tried to play around with it in Angular using ViewEncapsulation.ShadowDom, but it seems like the global css are still leaking into the Shadow DOM.

Kindly see the code here: https://stackblitz.com/edit/shadow-dom-test?file=src/app/app.component.ts

import { Component, VERSION, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
}

After that, setting any css in style.css will affect the elements under AppComponent even though the encapsulation is set to ViewEncapsulation.ShadowDomand the component is contained under ShadowDom tree.

See the screenshot below, Font-size is inherited by elements under ShadowDOM

What are those some css? Can you please specify the issue? — yurzui
– yurzui, Commented Jun 20, 2021 at 4:09
@yurzui, yeah, the global styles under style.css affects the elements under AppComponent even though it has ViewEncapsulation.ShadowDom. I've always thought that global styles won't affect elements under ShadowDom. — The.Wolfgang.Grimmer
– The.Wolfgang.Grimmer, Commented Jun 20, 2021 at 4:23

yurzui · Accepted Answer · 2021-06-21 03:59:35Z

5

From w3 spec

3.3.2 Inheritance

The top-level elements of a shadow tree inherit from their host element

What this means is that inheritable styles, like color or font-size among others, continue to inherit in shadow DOM, will pierce the shadow DOM and affect your component's styling.

You can force it back to initial state by using

app.component.ts

:host {
  all: initial;
}

It will prevent inheritance without affecting other CSS defined within the ShadowDOM.

Forked Stackblitz

3 Comments

Danny '365CSI' Engelman Over a year ago

I always put the lamplightdev.com/blog/2019/03/26/… blog first, it is the best written explanation

The.Wolfgang.Grimmer Over a year ago

Awesome! Now, it all makes sense. Thanks a lot. Is there any way to automatically add :host { all: initial } on creating of a component?

yurzui Over a year ago

You can create your own schematic for component where you can have this css

Collectives™ on Stack Overflow

Angular ViewEncapsulation.ShadowDOM doesn't isolate css styles

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related