I am using a web component that has an iframe tag in its root.

For example:

<my-component>
  <!-- SHADOW DOM -->
  <iframe>
    ...
  </iframe>
</my-component>

Now when I try to style my-component as below, it does not seem to apply.

my-component {
  cursor: default;
}

The default behaviour is cursor: pointer and I want to get rid of it. Could I access the shadow DOM via css directly, such as follows?:

my-component > iframe {
  cursor: default;
}

Even if the cursor: pointer is in some deep nested HTML element, I could try and find the target this way, but I’m not sure if such a thing is even possible.