title: How to apply custom css to shadow DOM inside elements?
body: <p>I have created a new project with IONIC 4. Everything is fine and working. But when I tried to apply CSS to elements which are present inside <strong>#shadow-root</strong>.</p>
  
  <p>Below is my HTML code</p>
  
  <pre><code>&lt;ion-item class="itm-pad" no-padding&gt;
  &lt;p&gt;Rajkumar&lt;/p&gt;
  &lt;ion-buttons slot="start"&gt;
    &lt;ion-button&gt;
      &lt;ion-icon slot="icon-only" name="funnel"&gt;&lt;/ion-icon&gt;
    &lt;/ion-button&gt;
  &lt;/ion-buttons&gt;
  &lt;ion-buttons slot="end"&gt;
    &lt;ion-button&gt;
      &lt;ion-icon slot="icon-only" name="search"&gt;&lt;/ion-icon&gt;
    &lt;/ion-button&gt;
  &lt;/ion-buttons&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p>Please refer below screenshot for this statement. Here I can apply CSS to ion-buttons and p tag as usual. But cannot apply CSS to item-native and item-inner which is inside item-native.
  <a href="https://i.stack.imgur.com/8mjzX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8mjzX.png" alt="enter image description here"></a></p>
  
  <p>I have searched this issue but all said why this is implemented and how important this is. But no one explained the exact process of applying the CSS to these elements. Please check and let me know the solution.</p>