From a4f9e8180b0e30f3f4dd89cef49ec584ffdba93c Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Tue, 6 Feb 2018 16:02:19 -0500
Subject: [PATCH] docs: edit styleguide recommendation on components as
 elements (#22074)

Change recommendation on using attributes for components since there are use cases including the use of <button mat-button> in MD

Closes #19401.

PR Close #22074
---
 aio/content/guide/styleguide.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

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">