Make parts of vega embed selectable with query selector in Angular or jQuery?

Question

I'm currently trying to make parts of my vega charts selectable with ngx-drag-to-select but don't know if it is even possible or if I have to change from ngx-drag-to-select to a other solution to make the elements of the rendered vega chart selectable by dragging from the user.

For ngx-drag-to-select I have to add [dtsSelectItem]="" to all the child elements I can select with the query selector from Angular.

vega

vegaEmbed('#vis',  vegaData[temp[0]], { "actions": false, "mode": "vega-lite" ,renderer: 'svg'})

html

<mat-grid-tile><div id="vis" style="width: 100%; height: 100%" (mouseover)='generateText(getTemp(0))'[matTooltip]="getTooltip(getTemp(0))|| ''" [dtsSelectItem]="getTooltip(getTemp(0))|| ''"></div></mat-grid-tile>

queryselector to get every single element I would like to be selectable

parentElements.forEach(parentElement => {
        const childElements = Array.from(parentElement.children);

        // Iterating through the child nodes of each parent element
        for (const childElement of childElements) {
          // Access child element properties or perform actions
          childElement.setAttribute("[dtsSelectItem]","123");
        }
      });

I'm relatively new to frontend but haven't found a way to make this happen.

Tried different query selector methods but I don't think any would work without the view rendering again.