how to style the vaadin-grid header?

Question

i am trying to apply styles to the header vaadin grid component but nothing comes out what could be the problem

I have components in page

<script-loader-grid></script-loader-grid> 

and inside it component I try implement styles

  <style>
            ${styles}
          :host {
             height: 150px;
          }
        [part="header-cell"] {
             background: red;
          }
        </style>
        

           <vaadin-grid id="test" .items ="${test_data}">
              <vaadin-grid-column path="company" header="Company" ы></vaadin-grid-column>
              <vaadin-grid-column path="script" header="Script"></vaadin-grid-column>
              <vaadin-grid-column path="stage" header="Stage"></vaadin-grid-column>
              <vaadin-grid-column path="atributes" header="Atributes"></vaadin-grid-column>
            </vaadin-grid>
        
    `

Answer 1

I resolve my problem this way, just using registerStyles

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'
import {css} from '@vaadin/vaadin-themable-mixin/register-styles'


class scriptLoaderGrid extends connect(store)(LitElement) {
    static get properties() {
        return {
            opened: {type: Boolean},
        }
    }

    constructor() {
        super()
        registerStyles('vaadin-grid', css`
      :host [part~="header-cell"] ::slotted(vaadin-grid-cell-content), [part~="footer-cell"] ::slotted(vaadin-grid-cell-content), [part~="reorder-ghost"] {
        background:red
      }
    `)
    }

......
 <vaadin-grid .items ="${test_data}" theme="special-field">
              <vaadin-grid-column path="company" header="Company"></vaadin-grid-column>
      .....
            </vaadin-grid>