Add support for attribute lookup for multi slot transclusion

[david2tm]

Currently ti use multi slot transfusion, we need to name our elements using not standard HTML elements. Like in a snippet below.

<!-- parent.html -->
<div data-my-directive>
  <my-slot>
    <span>Lorem Ipsum</span>
  </my-slot>
</div>

This is not HTML5 compliant.
Enabling attribute lookup, may help this. Consider following syntax:

<!-- parent.html -->
<div data-my-directive>
  <div data-my-slot>
    <span>Lorem Ipsum</span>
  </div>
</div>

[Narretz]

This is not HTML5 compliant.

I assume you are using a validator or such?
Because the w3c has a spec for custom elements, and while that may not be 100% HTML5 compliant, it's definitely here to stay: http://w3c.github.io/webcomponents/spec/custom/

[Narretz]

/cc @petebacondarwin

[petebacondarwin]

I agree with @Narretz. See http://stackoverflow.com/a/9845124/287070
Is using custom-elements breaking your application in some way?

[david2tm]

It was a decision we made about two years ago, to be fully compliant, meaning the use of data-* prefix instead of element names, etc.
I had a discussion with a team, and we decided to allow non standard (custom) elements, so as of now it is no longer an issue for us.

After saying that, since most directives (or should I say features) in Angular do provide an ability to be used as attributes instead of elements, it seems only logical to me, that slots will allow this too.

[petebacondarwin]

@david2tm thanks for following up on this. The main reasons for the decision was simplicity and performance.

• It is much faster only to check the names of the top level elements of the template for matching slots.
• The code is simpler to understand and maintain

That being said, we were also conscious that this decision did not preclude us from making the matching more sophisticated later (such as jquery style selectors), whereas backing down from an overly sophisticated public API design is much harder.

So far you are the only person to have requested the more sophisticated API. If there are other people out there who would like to see it, then please say so and we can reconsider.

Given that this is no longer a problem for you I am going to close this issue.

[johngull]

Hello,

I faced problem when attribute lookup will help much.
It appears that when you add in transclude slot and tags browser remove it, because there is no table around.
So when you append it to the table inside template you got just a 'text1\ntext2' instead of text1text2

I beleive that with the attribute lookup this can be fixed.

If you have another workaround please share it.

Thank you.

[cheapsteak]

This does not seem to work with tables

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 "" tag ends up being rendered inside the <tr>, and <td>s are lost

[petebacondarwin]

I wonder if this is because the ngRepeat is creating its own transclusions?
Could you create a new bug for this?