4

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.

enter image description here

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

:host ::ng-deep input {
  background: red !important;
}
Can someone guide me for this ?
SamD
  • 185
  • 5
  • 22
  • This answer may help you: https://stackoverflow.com/questions/46786986/how-and-where-to-use-ng-deep –  Mar 30 '22 at 16:55
  • @Nick tried like this .search-field ::ng-deep input { background-color: red !important; } but did not work – SamD Mar 30 '22 at 18:03
  • hard to figure out. in your example above (the image) i cannot find .search-field –  Mar 30 '22 at 18:09
  • Maybe: .search-field ::ng-deep form input { background-color: red !important; } is running fine –  Mar 30 '22 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 Mar 31 '22 at 02:47
  • so form and input in under the shadow root and I am stumbling over same that how to build the path for the ng deep when element is under shadow root. – SamD Mar 31 '22 at 03:02

1 Answers1

3

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.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33