title: Styling elements inside shadow root
body: <p>I'm trying to style an element inside of a shadow dom. I've tried a couple of things, namely the following:</p>
  <p>Using JS:</p>
  <pre><code>document.querySelector('#select-input').shadowRoot.getElementById('#aab-select-label');
  </code></pre>
  <p>This returns an error stating: Cannot read properties of null (reading 'setAttribute')</p>
  <p>Using CSS:</p>
  <pre><code>  #select-input::shadow .mb-1 #aab-select-label {
      height: 20px !important;
    }
  
    #select-input /deep/ .mb-1 #aab-select-label {
      height: 20px !important;
    }
  </code></pre>
  <p>But these selectors also don't apply any styling for some reason. The shadow root is open as far as I can see:</p>
  <p><a href="https://i.stack.imgur.com/IdypU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IdypU.png" alt="enter image description here" /></a></p>
  <p>Does anyone know how I should style this?</p>