diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md
index a24f42afbe..81f2683a58 100644
--- a/src/guide/class-and-style.md
+++ b/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