默认情况下，每个组件都有<div>元素支持。如果您要查看开发人员工具中的渲染组件，你会看到一个类似于一下内容的DOM表示：
<div id="ember180" class="ember-view">
<h1>My Component</h1>
</div>
你可以自定义Ember为你的组件生成什么类型的元素，包括其属性和类名，通过在Javascript中创建Component的子类。
自定义元素
要使用除<div>之外的标记，请将Component子类化，并为其指定Tagname属性。此属性可以将任何有效的HTML5标记名称作为字符串。
//in component.js
import dafault Component.extend({
tagName: 'nav',
})
//in component.hbs
<ul>
<li>{{#link-to 'home'}}Home{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>
自定义元素的类
你可以在调用时指定组件元素的类，就像使用常规HTML元素一样：
{{navigation-bar class="primary"}}
你还可以通过将其classNames属性设置为字符串数组的方式来指定哪些类名被应用于组件元素：
// in component.js
export default.Component({
classNames: ['primary'],
})
如果你希望类名由组件的属性确定，你可以使用类名绑定。如果你绑定了一个Boolean属性，类名将根据布尔值被增加或删除：
//in component.js
export default Component.extend({
classNameBindings: ['isUrgent'],
isUrgent: true,
})
这个组件将像下面这样渲染：
<div class='ember-view is-urgent'><div>
如果isUrgent变成了false,is-Urgent类名将被删除。
默认情况下，Boolean属性的名称是classNameBinding绑定的值。你可以通过冒号分隔它来自定义应用的类名：
export dafault Component.extend({
classNameBindings: ['isUrgent: urgent'],
isUrgent: true,
})
它会渲染这样的HTML：
<div class='ember-view urgent'></div>
你还可以通过声明classNameBindings来指定一个只应在属性为false时添加的类：
//in component.js
export dafault Component.extend({
classNameBindings: ['isEnabled::disabled'],
isEnabled: false,
})
它将会渲染这样的HTML：
<div class='ember-view disabled'>
如果disabled属性设置为true,将不会添加类名：
<div class='ember-view'>
如果bound属性的值是一个字符串，那么该值将作为类名添加而不进行修改：
// in component.js
classNameBindings: ['priority'],
priority: 'highestPriority',
它将会渲染出下面的HTML：
<div class='ember-view highestPriority'>
自定义属性
你可以使用attributeBindingd将属性绑定到表示组件的DOM元素：
//in component.js
export default Component.extend({
tagName: 'a',
attributeBindings: ['href'],
href: 'wordlu.github.io'
});
你也可以将这些attributes绑定到不同命名的属性：
//in component.js
export default Component.extend ({
tagName: 'a',
attributeBindings: ['customHref:href'],
customHref: 'wordlu.github.io',
})
如果attributes的值为null，它将不会被渲染：
//in component.js
export default Component.extend({
tagName: 'a',
attributeBindings: ['title'],
title: null,
})
当没有title传递给组件时，将渲染以下HTML：
<span class='ember-view'>
当命名为Ember JS的title传递给组件时，HTML如下：
<soan class='ember-view' title='Ember JS'>