Transclude slot doesn't work as expected when outlet is in a <table>

[cheapsteak]

Want to create a table component but still allow users to customize the rendering of each row

This does not seem to work

component('myTable', {
    transclude: {
      row: 'row',
    },
    replace: true,
    template: `
      <table>
        <tr ng-repeat="row in vm.rows" ng-transclude="row">
        </tr>
      </table>
    `,
  })

<my-table>
    <row>
        <td>this doesn't show up</td>
    </row>
</my-table>

The <row> tag ends up being rendered inside the <tr>, and <td>s are lost

The browser takes liberties with <tr> and <td> tags (seems to strip them out if they're not in the right place)

One way to solve would be if we could transclude <tr attribute-selector> and transclude: { row: '[attribute-selector]'}

[Narretz]

Looks like this is a follow-up to #14169

Yes, browsers discard td and tr elements if they are not inside a table element. This is standard behavior and cannot be changed, because the browser parses the HTML before Angular mutates the DOM. Looks like a valid use case attribute selectors in multi transclusion.

Css / Complex selectors are tracked here: #14709

Btw you can't use replace in components.

[gkalpak]

I am not sure how attribute selectors would help here. The problem is that you can't have <td> elements inside non-<tr> elements. How you select them is not the issue.

[cheapsteak]

I think attribute selectors would allow

component('myTable', {
    transclude: {
      row: '[row]',
    },
});

<my-table>
    <tr row>
        <td>content</td>
    </tr>
</my-table>

[gkalpak]

It wouldn't, because <tr> elements are not allowed inside <my-table>.

[Narretz]

@gkalpak is correct, I think we can close this. Angular 1 is not built to work around these browser limitations.