add Components and class section to specify class merge behavior (vuejs#562)

* add Components and class section to specify class merge hebavior

* Update component class binding examples

Author: defcc

src/guide/class-and-style.md

@@ -111,6 +111,44 @@ However, this can be a bit verbose if you have multiple conditional classes. Tha
 <div v-bind:class="[{ active: isActive }, errorClass]">
 ```
 
+### With Components
+
+> This section assumes knowledge of [Vue Components](components.html). Feel free to skip it and come back later.
+
+When you use the `class` attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.
+
+For example, if you declare this component:
+
+``` js
+Vue.component('my-component', {
+  template: '<p class="foo bar">Hi</p>'
+})
+```
+
+Then add some classes when using it:
+
+``` html
+<my-component class="baz boo"></my-component>
+```
+
+The rendered HTML will be:
+
+``` html
+<p class="foo bar baz boo">Hi</p>
+```
+
+The same is true for class bindings:
+
+``` html
+<my-component v-bind:class="{ active: isActive }"></my-component>
+```
+
+When `isActive` is truthy, the rendered HTML will be:
+
+``` html
+<div class="foo bar active"></div>
+```
+
 ## Binding Inline Styles
 
 ### Object Syntax