How to make SVG Elements wrapped in Angular Component which is a Shadow DOM focusable by tabbing

Question

I am trying to make use of the default behaviour when a user presses Tab to iterate over input elements.

I want to make SVG elements focusable by key stroke. The SVG is wrapped inside a component.

<parent-component>
  <input>
  <child-component></child-component>
  <input>
</parent-component>

child-component.html

<svg>
  <g (click)='doSomething' tabindex='0' focusable='true'></g>
</svg>

Can't make it work with tabindex or focusable tho.

Edit I - 11/29/2022

I am logging the active/focused element like this

@HostListener('document:keydown.tab', ['$event'])
  omitFocusedElement(e: KeyboardEvent) {
    console.log(document.activeElement)    
  }

Tabbing order breaks and the element before the nested svg keeps the focus, tabbing does not go any further then

So instead, I tried something else

<parent-component>
  <input>
  <svg>
    <g (click)='doSomething' tabindex='0'></g>
  </svg>
  <input>
</parent-component>

This way the svg element becomes focusable.

But I need to make it work, when a svg is wrapped by a component.

Edit II - 11/30/2022

So appearantly the reason that those elements could not receive focus was, that the component which contains the svg was set to ViewEncapsulation.ShadowDom. Because when i removed that, svg elements become focusable.

The downside to this is, that i need to use this encapsulation.