Styling elements inside shadow root

Question

I'm trying to style an element inside of a shadow dom. I've tried a couple of things, namely the following:

Using JS:

document.querySelector('#select-input').shadowRoot.getElementById('#aab-select-label');

This returns an error stating: Cannot read properties of null (reading 'setAttribute')

Using CSS:

  #select-input::shadow .mb-1 #aab-select-label {
    height: 20px !important;
  }

  #select-input /deep/ .mb-1 #aab-select-label {
    height: 20px !important;
  }

But these selectors also don't apply any styling for some reason. The shadow root is open as far as I can see:

Does anyone know how I should style this?

Answer 1

The whole purpose of shadowDOM is to scope styling.

Technologies like /deep/ where Google only parties and never made into a standard supported in other browsers.

The answers in ::slotted CSS selector for nested children in shadowDOM slot reference a lot of the modern possibilities:

• slots
• Inheritable styles
• CSS Properties
• Parts
• Themes

Note: your querySelector(...).shadowRoot should work on an open shadowRoot. Please create a minimal example with the [<>] button in the editor, so we can see running code.