I am using angular 12 and I want to apply some styling to input field which is a shadow root element of group-search-field element.

I tried using ng-deep like below but it didn't work

:host ::ng-deep input {
  background: red !important;
}

I am using angular 12 and I want to apply some styling to input field which is a shadow root element of group-search-field element.

I tried using ng-deep like below but it didn't work

:host ::ng-deep input {
  background: red !important;
}

• javascript
• css
• angular
• sass
• ng-deep

• This answer may help you: stackoverflow./questions/46786986/… – user11913484 Commented Mar 30, 2022 at 16:55
• @Nick tried like this .search-field ::ng-deep input { background-color: red !important; } but did not work – SamD Commented Mar 30, 2022 at 18:03
• hard to figure out. in your example above (the image) i cannot find .search-field – user11913484 Commented Mar 30, 2022 at 18:09
• Maybe: .search-field ::ng-deep form input { background-color: red !important; } is running fine – user11913484 Commented Mar 30, 2022 at 18:09
• search-field is the class of group-search-field (it's not in above image but I added later) so I am using same in ng-deep reference. – SamD Commented Mar 31, 2022 at 2:47

1 Answer 1

Because of the isolation of styles, which is a feature of Shadow DOM, you cannot define a global CSS rule that will be applied in the Shadow DOM scope. In your case I think background:red does not propagate to be inherited by the elements in the shadow root that's why :host is not working.

super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const sheet = new CSSStyleSheet;
sheet.replaceSync( `input { background: red !important; }`)
shadowRoot.adoptedStyleSheets = [ sheet ];

https://developer.mozilla/en-US/docs/Web/Web_Components/Using_shadow_DOM