0

I need help with writing SCSS to style some element that is in #shaddow-root in DOM in my Angular+Ionic 6 app.

Here is the image how the DOM looks like; DOM

I want to give the class="input-wrapper" some fixed height but am unable to apply it.

Here is my SCSS code:

ion-item {
        &::part(native) {
          .item-inner {
            .input-wrapper {
              height: 30px;
            }
          }
        }
      }

I have also tried this:

:host(ion-item)::ng-deep #shadow-root .input-wrapper { 
    height: 30px; 
}

What am I doing wrong?

weinde
  • 1,074
  • 3
  • 13
  • 32

1 Answers1

0

In order to style an element inside a #shadow-root in the DOM of an Angular+Ionic 6 app, you'll need to use the ::ng-deep pseudo-class in your SCSS. Here's an example:

Let's say you have a component called my-component that contains a #shadow-root element with an inner element called inner-element. You can target the inner-element with the following SCSS:

my-component ::ng-deep #shadow-root .inner-element {
  // Your styles here
}

Note that the ::ng-deep pseudo-class is used to force styles to apply to a child component, even if they're encapsulated by a parent component.

Hossein Bordbar
  • 1
  • 2
  • ng-deep is deprecated... – weinde Feb 27 '23 at 08:57
  • :host(ion-item)::ng-deep #shadow-root .input-wrapper { height: 30px; } I have tried this and it doesent work – weinde Feb 27 '23 at 09:01
  • Try to set your component (`ViewEncapsulation`)[https://angular.io/api/core/ViewEncapsulation#Emulated] to `None` – wei Feb 27 '23 at 09:54
  • @weinde `ng-deep` is deprecated from several years and they don't plan to remove it soon. See [this post](https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep) for more details – Mateut Alin Feb 27 '23 at 12:24