Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Including comment in template body breaks prop inheritance #2253

Closed
efc-awebb opened this issue Jan 28, 2016 · 8 comments

Comments

Projects
None yet
5 participants
@efc-awebb
Copy link

commented Jan 28, 2016

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

This comment has been minimized.

Copy link
Author

commented Jan 28, 2016

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

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

This comment has been minimized.

Copy link
Author

commented Jan 28, 2016

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

This comment has been minimized.

Copy link

commented Jan 28, 2016

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

This comment has been minimized.

Copy link

commented Jan 28, 2016

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

This comment has been minimized.

Copy link

commented Jan 28, 2016

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

@nirazul

This comment has been minimized.

Copy link

commented Jan 28, 2016

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

@efc-awebb

This comment has been minimized.

Copy link
Author

commented Jan 28, 2016

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 comment has been minimized.

Copy link

commented Mar 12, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.