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.

4

I’m having this same issue with css on the wrapper div. I tried to get rid of it by setting

Component.extend({ tagName: “”,

Inside of my component.js but the wrapper still shows up in my elements tree. Any suggestions?

EDIT: Solved the problem i needed to recompile to see a change in my component.js. file.

5

This should not be an issue anymore with Ember Octane.

  • Glimmer components, which is the new default base class for components in Ember Octane, do not have a base element. They render exactly what is defined in their templates.
  • Template-only components do not render a wrapping element anymore unless template-only-glimmer-components optional feature is explicitly disabled.
  • Ember does not render a wrapping div anymore around the application unless application-template-wrapper optional feature is explicitly enabled.
6

Great and useful information, thanks!