CSS Struggles with Components

1

I am working on a new app using the AdminLTE template. One of the struggles I am currently facing is that when I take pieces and break them out into components (like the user-profile popup that is in the upper right corner) when Ember actually renders that, the wrapped div breaks my look and feel by not having correct CSS to not enforce it’s on changes. Suddenly objects that weren’t originally inside a div end up there due to the component work. And the ember-view class doesn’t seem to do what’s expected to minimize that (if that’s what it’s trying to do).

What’s the best practice for making sure that making something a component doesn’t create un-intended CSS issues?

2

Have a look at customizing the component tag Customizing a Component's Element - Components - Ember Guides , you can also set the tagName: '' to remove it entirely.

3

So following the link given by dpreston, you can set CSS classes on the component’s div, or even change the div to be something more relevant.

So the idea could be to change:

<ul class="my-list">{{#each list as |item|}}<li>{{item}}</li>{{/each}}</ul>

To:

{{#each list as |item|}}<li>{{item}}</li>{{/each}}

And in the component:

export default Ember.Component.extend({
    tagName: 'ul',
    classNames: ['my-list']
});

Also note that classNames you set on the component can be added to when you instanciate it. For instance, if I do {{my-list class="someclass"}}, the resulting ul will have both someclass and my-list.

Try to keep the tagName: '' as a last resort solution, because it breaks some of the component features (event handling, this.$)

4

Thanks @spectras, I wasnt aware of the issues with tagName: '', it also seems to be removed from angle-components as well, so probably best not to use it.