Understanding Inline SVG id attribute

I have a separate SVG file icons.svg like this

<svg>
  <defs>
    <symbol id="symbol1">
      <g id="group1">
        ...
      </g>
    </symbol>
  </defs>
</svg>

When I try to use it my HTML like this

<svg class="shape1" width="24" height="24" viewBox="0 0 24 24">
  <use href="icons.svg#symbol1">
</svg>

What exactly happens to the id symbol1 and group1?

When I try to use the same SVG multiple times and try to inspect I see that the same ID gets repeated multiple times (although it's inside a shadow root?). Why is there no ID conflicts?

Can I reliably apply CSS using the ID selector to group1 even though it is inside this shadow root and gets repeated multiple times? Will it apply to all the group1 ids ?

Is it better to use class or id in this case?