How To Transclude Table Row Into AngularJs Component

Question

Iv been trying to create an angularJS component for constructing a dynamic html table from a provided array. The components template includes some ng-transclude directives as 'placeholders'/slots for templates provided by the component consumer.

Is it possible to transclude a <tr> template (with nested <th>), to be used inside the table <thead>?

I have tried using all variations for transclution: transclude: true, transclude: 'element' and transclude: { header: 'header'} (the third option seems as the most suitable, as I will eventually required multiple elements to be transcluded).

Component:

app.component("virtualTable", {
  bindings: {
    someArray: "<"
  },
  transclude: {
    header: "header"
  },
  templateUrl: () => {
    return "/app/components/virtual-table.component.html";
  });

Component Template:

<div>
  <table>
    <thead>
      <tr ng-transclude="header"></tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in vt.someArray">
        ...another place for transclution...
      </tr>
    </tbody>
  </table>
</div>

Consuming HTML (component declaration):

<virtual-table some-array="vm.personList">
    <header>
        <th>First Column</th>
        <th>Second Column<th>
    </header>
</virtual-table>

I excpect the compiled DOM to look like this:

<table>
    <thead>
        <tr>
            <th>First Column</th>
            <th>Second Column</th>
        </tr>
    </thead>
...

But instead I get the innerHTML of the transcluded element (header) as Text:

<table>
    <thead>
        <tr ng-transclude="header">
            <header class="ng-scope">
                First Column
                Second Column
        </tr>
    </header>
...

I Suspect the browser (chrome 76) to somehow strip the <tr> tags from the transcluded element before it is being provided to the component (as it illegal us to use <tr> outside of a <table>). I would like to maintain an html table structure. Is The Any Way to Solve This?