0

Problem

At the moment, I am encountering ng-deep styling bleeding into other components. However, I can not solve this with the use of :host or by looking at a certain parent component like

:ng-deep parent-component {
  .k-window-content {
    padding: 0;
  }
}

Current implementation

The code is setup as follows. I have a modal component that uses kendo-dialog which contains some template. Sometimes this template requires certain styling and therefore, ng-deep is used. This however, also affects the other modals which did not require this styling.

Possible solution?

Somehow I need to check if the component has specific children, like the :has() css selector. This cannot be used yet so I need an alternative.

Any help would be greatly appreciated!

Niels_
  • 76
  • 7
  • What about using `encapsulation: ViewEncapsulation.None` in the component's decorator? – Jacopo Sciampi Jul 22 '22 at 08:08
  • @JacopoSciampi I dont really see how that helps since it basically makes more style global right? However, that is the problem we are trying to solve. Could you maybe elaborate. Thanks in advance! – Niels_ Jul 22 '22 at 09:16
  • Well, the css inside :host will be available in all your application. Using Encapsulation is different, it's just the component's css that isn't encapsulated, thus you can target every class you want without having to worry about "corrupting" other styles in other components. – Jacopo Sciampi Jul 22 '22 at 09:25
  • Thanks for the explanation. I did get your solution to work though. I eventually fixed it by providing an id to the parent-component to make them unique, and use that to make the styling specific for that id. (similar to my first example but instead of `parent-component` the id is used. – Niels_ Jul 22 '22 at 11:16

0 Answers0