diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md
index c73cebe4dc..34201cee59 100644
--- a/aio/content/guide/styleguide.md
+++ b/aio/content/guide/styleguide.md
@@ -3773,8 +3773,7 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 <div class="s-rule do">
 
 
-
-**Do** give components an _element_ selector, as opposed to _attribute_ or _class_ selectors.
+**Consider** giving components an _element_ selector, as opposed to _attribute_ or _class_ selectors.
 
 
 </div>
@@ -3803,7 +3802,11 @@ Developers place components on the page as they would native HTML elements and w
 
 </div>
 
+<div class="l-sub-section">
 
+There are a few cases where you give a component an attribute, such as when you want to augment a built-in element. For example, [Material Design](https://material.angular.io/components/button/overview) uses this technique with `<button mat-button>`. However, you wouldn't use this technique on a custom element.
+
+</div>
 
 <code-example path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/hero-button/hero-button.component.ts">
 
@@ -3819,8 +3822,6 @@ Developers place components on the page as they would native HTML elements and w
 
 
 
-
-
 <code-tabs>
 
   <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts" region="example">