Including comment in template body breaks prop inheritance

[efc-awebb]

Was having a world of trouble getting prop inheritance to work between a template and its instance (with the class prop specifically). Turns out that having comments in the code breaks this behavior.

Presumably an issue of trying to apply them to the first node in the template's element tree, regardless of whether it is a CommentNode.

<script src="https://gist.github.com/efc-awebb/bc6b4bccc2d9c426f20f.js"></script>

[efc-awebb]

https://gist.github.com/efc-awebb/bc6b4bccc2d9c426f20f

<script src="https://gist.github.com/efc-awebb/bc6b4bccc2d9c426f20f.js"></script>

[efc-awebb]

Relevant dependencies:

    "vue": "^1.0.15",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.0.0",
    "vue-style-loader": "^1.0.0",

[jsiebach]

Comments are considered nodes, and therefore by having a comment as well as a div in the template you've created a fragment instance (a template with multiple nodes). You can read about the disadvantages of fragment instances here, one of which is no non-prop attributes are accepted. You can solve it by moving your comment inside the div

<template>
    <div>
        <!-- Comment here is ok -->
        <slot></slot>
    </div>
</template>

Or by passing it as a dynamic :prop like :class="{'green':true}"

[nirazul]

Maybe this should produce a warning as it is not obvious that you'll change the component's handling by adding a comment at the 'wrong' location.

[jsiebach]

In debug mode it does: "[Vue warn]: Attribute "class" is ignored on component because the component is a fragment instance"

[nirazul]

Hmm.. I guess it's quite hard to add information to why the fragment instance was created.

[efc-awebb]

Thanks! I would consider updating the docs, since the comment thing specifically feels like a little bit of a gotcha - e.g.:

There are multiple conditions that will turn a Vue instance into a fragment instance:

1. Template contains multiple top-level elements (including HTML comment nodes).

[krishna303063]

this is a very intresting topic so very exclusive bing dashboard and positive think in article any problem so search now bing is a search engine