title: How to Override CSS of Inner Elements of Lightning Web Component
body: <p>I have a dataTable component looke like below:</p>
  <pre><code>&lt;template&gt;
    &lt;lightning-datatable
      class=&quot;pw-table&quot;
      key-field=&quot;id&quot;
      columns={columns}
      data={data}
      hide-checkbox-column
    &gt;&lt;/lightning-datatable&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Now I want write some custom css to make table header higher,</p>
  <pre><code>.pw-table {
    height: 300px;
  }
  </code></pre>
  <p>but useless, so how I can do it?
  I use loadStyle but failed, I dont know why?</p>
  <pre><code>import { loadStyle } from 'lightning/platformResourceLoader';
  import accountCustom from '@salesforce/resourceUrl/accountCustom';
  </code></pre>