Wrapper div around components and routes - how to adjust css?


#1

There is an automatically generated wrapper div around all of my routes and components.

<div id="ember43" class="ember-view">

I have posted about this elsewhere and I am told that this isn’t supposed to happen.

Is there a way to change the css of the component wrapper div?


#2

Routes don’t generate any div. Your templates renders into {{outlet}} cleanly.

You can add additional class to your components with classNames and classNameBindings property. You can read more in the API doc. You can attach additional class to your component with class attribute {{my-component class="additional-class"}}. You can get rid of the component’s wrapper div entirely by setting tagName attribute to empty string.


#3

You can remove the tag with tagName, but I remember reading somewhere that it’s better to lift one of the internal tags instead of remove the tag entirely, either because of performance issues or future deprecation issues. Perhaps someone more familiar with the issue can point to where or explain why.

The only time this really caused problems for us was when our designer had been using flex-box and the intermediary divs broke the layout, but lifting the outer tags inside the component template to the component container tag using tagName fixed it.