this.$ on view (or component) with tagName: '' returns too many nodes

[duizendnegen]

See http://jsbin.com/yimeyi/2/edit
Expected alert: 1
Received alert: 4

returns entire DOM or parent nodes (didn't verify)

[alexspeller]

So, I had thought that tagName: '' was totally crazy - components always need a tag at the moment right? However it seems in IRC that many people are using this behaviour. It'd be great to either add an assertion here that tagName is required or document this feature if it is supported, because many people actually seem to be using it and if it is supported it would actually be quite useful!

[rwjblue]

@duizendnegen:

Using tagName: '' gives your component no element, therefore this.$() cannot return what you expect. This is not a bug, but just a caveat of using tagless views/components.

@alexspeller:

Tagless views/components are used quite extensively internally: anything that extends Ember._MetamorphView is using tagName: '', isVirtual: true.

The main reason we have not documented this further is illustrated by this exact issue, when you have no tagName you get no element. Which means that this.$() will not (and can not) work properly. It also means that DOM events that folks would normally expect to get fired (things like click) cannot be caught/handled because there was no element present to listen to those events.

tldr; We do support tagless views/components, but they have a whole slew of caveats that are not trivially explained. We have batted around the idea of making a Ember.TaglessComponent or something that you could extend, but would provide real documentation about these caveats.

[rwjblue]

I submitted #10530 to add a helpful assertion when calling this.$() in a tagless view/component.