ember angle-bracket syntax for non-top-level component?

Question

I decided to try out the angle-bracket component syntax in the canary build of ember. If create a component with ember g component foo/bar/my-panel --pod, how do I refer to it in a template using angle-bracket syntax?

EDIT Just found that <foo.bar.my-panel /> works. Hmm... is that element syntax going to work well in browsers? Is there an alternative if not?

According to this answer http://stackoverflow.com/a/20316213/2482265 on a different question custom html5 elements are valid if they start with an ascii letter and contain a hypen. Ember 2.0 also ends support for ie8 so I'd test ie9 and see what happens. — Adam Knights, Jul 20 '15 at 16:45
I was also worried about css, jquery, etc -- how to differentiate between element `foo.bar.my-panel` and element `foo` with classes `bar` and `my-panel`? — shaunc, Jul 21 '15 at 01:14
Jquery you can use \\ as escape see https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/ — Adam Knights, Jul 21 '15 at 07:04
Use a single \ in CSS http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier - the other thing you could do is use `classNames="..."`and use one class per component and then style it that way in css and select it that way in jquery — Adam Knights, Jul 21 '15 at 07:08
@Knightsy -- thanks! That takes care of my concerns, I think. If you put that all into an answer I'll accept it. :) — shaunc, Jul 22 '15 at 12:52

score 1 · Accepted Answer · edited May 23 '17 at 12:30

<foo.bar.my-panel /> is perfectly valid HTML 5 syntax. As https://stackoverflow.com/a/20316213/2482265 points out, custom HTML 5 elements are valid if they start with an ascii letter and contain a hyphen.

In order to select an element such as this in Jquery you would need to use double backslash \\ to escape the dot . - see https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/ i.e.

$('foo\\.bar\\.my-panel')

For CSS you can use a single backslash \ to escape the dot . - see http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

Finally, I myself would add a simpler className to my component such as foo-bar-my-panel to save the faff of selecting that way in Jquery i.e.

$('.foo-bar-my-panel')

ember angle-bracket syntax for non-top-level component?

1 Answers1