css :first-child selector will not work when using *ng-for

[rolandjitsu]

It seems like when using *ng-for="item of items" to render a list of items, if I want to use the :first-child selector it will not work as expected. It looks like right before the first item, there is a <script></script> tag inserted, so the rendering ends up as:

<ul>
    <script></script>
    <li></li>
    <li></li>
    <li></li>
</ul>

Probably that is intentional, but it should be taken into consideration that this would break the expected behaviour of :first-child and a fix for it might be a good idea.

[ericmartinezr]

You're right, I ran into this a while ago. This happens with *ng-if, *ng-for and probably any other directive that uses *. I just workaround it by iterating over the children and finding the first element I needed. In your case you can use :first-of-type for now.

Edit
I know that's not the point. Anyway, this not only affects :first-child, it may affect others css selectors +.

<div></div>
<script></script>
<span *ng-if="..."></span>
// css..
div + span {} // won't work

[rolandjitsu]

I know I can use :first-of-type, but that's not the point. On lists such as ul or ol that expect that all the children are li it should not insert anything else along with the li. It's also a little weird the first time you see that :first-child doesn't work and you have no clue why is that.

[EmmanuelDemey]

According to the HTML5 spec, ul element can containt Zero or more li and script-supporting elements.

And for you (and for me :D) I check the definition of script-supporting elemens :

Script-supporting elements are those that do not represent anything themselves (i.e. they are not rendered), but are used to support scripts, e.g. to provide functionality for the user.

The following elements are script-supporting elements: script template

So we can have script as a first child a ul element.

But you are right, it is not very developer-friendly to have this kind of element. I do not like frameworks that insert tags in my HTML.

What is the content of this tag ?

[vicb]

What is the content of this tag ?

There is no content, it marks place where views can be inserted.

[rolandjitsu]

@Gillespie59 as @vicb said, there is no content, it's just an anchor for angular 2 to know where to insert views. In my case it's the place where *ng-for knows to add more li elements (next to it).

[mhevery]

@tbosch we should switch back to <!-- anchor --> with the new compiler, which would make this problem go away.

[scatcher]

Just for clarification, we currently have the ability to set additional attributes on the script template anchor. Is there a situation where we need to be able to retain this functionality? If not, converting to a comment seems like the right answer.

[adamdbradley]

Would this be able to make it into Beta00?

[IgorMinar]

@tbosch can you take a look and determine if this should/can be in beta?

[tbosch]

yes

[jeffbcross]

Reopening since the commit was reverted, though hopefully PR #5416 will land soon.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}