Subscribe on changes!

Comments inside <template> breaks this.$el

avatar
Sep 20th 2021

Version

3.2.12

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Create a template and declare one element. Define the component and try to access to this.$el. Then add a comment at first inside the template.

What is expected?

The element should remain the same div

What is actually happening?

The element become the comment. In the playground try to remove and add the comment to toggle the behaviour


IDK if that was intended but in my case was difficult to find why i was getting this error:

vue-router.esm-bundler.js?f6c4:3264 TypeError: element.querySelectorAll is not a function
    at myFunction
avatar
Sep 20th 2021

That's expected because comments are considered part of your template and thus rendered making your component a fragment instance.

If you want to avoid that, put the comment outside <template> or nested.