O'Reilly logo

Mastering Ember.js by Mitchel Kelonye

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Customizing a component's element tag

Since the W3C component specification is still being worked on, Ember.js components utilize the existing standard HTML elements. In Chapter 3, Routing and State Management, we learned that a view's template is wrapped around an element, which by default is div. This element can then be customized using the view's tagName property. A component's template is also wrapped in the same way in a customizable element. For example, we promised to discuss how the post-input component mentioned previously was rendered into DOM.

All we need to do is define the property in the corresponding class as:

App.PostInputComponent = Ember.Component.extend({
  ...
  tagName: 'button',
  ...
});

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required