Cannot style with @HostBinding and shadow dom encapsulation

Question

I have the following angular component

@Component({ selector: 'app-bar', templateUrl: './bar.component.html', styleUrls: ['./bar.component.scss'], encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush }) export class BarComponent { @Input() @HostBinding('class') cls; }

So I thought, if I set cls to 'hide-me' I hide it. I added the following to bar.component.scss:

:host { &.hide-me { display: none; } }

DEMO

This doesn't do anything and it has to do with the shadow dom encapsulation. If you remove that line it works again as expected. Any suggestions why this doesn't work anymore with shadowDom? and is there a way to fix this with shadow dom enabled of course ;)

Sherif Elmetainy · Accepted Answer · 2020-08-21 23:38:14Z

4

Changing your scss to look like this should work

:host(.hide-me) { display: none; }

Refer to this question for more info

answered Aug 21, 2020 at 23:38

Sherif Elmetainy

4,5821 gold badge16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot style with @HostBinding and shadow dom encapsulation

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related