From f1cf875872ebe64f61b9351c0fb68de2673a53dd Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 26 Jan 2021 12:58:12 +0200
Subject: [PATCH] docs(elements): add notice about choosing a tag name in
 Elements guide (#40510)

This commit adds a warning in the Elements guide about using
`@Component.selector` as the tag name for the registered custom element.
See also #40452 for context.

PR Close #40510
---
 aio/content/guide/elements.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/aio/content/guide/elements.md b/aio/content/guide/elements.md
index 3b0ffa253e..3a1c7fcf33 100644
--- a/aio/content/guide/elements.md
+++ b/aio/content/guide/elements.md
@@ -71,6 +71,15 @@ When the browser encounters the tag for the registered element, it uses the cons
   <img src="generated/images/guide/elements/createElement.png" alt="Transform a component to a custom element" class="left">
 </div>
 
+<div class="alert is-important">
+
+  Avoid using the [`@Component`](api/core/Component) [selector](api/core/Directive#selector) as the custom-element tag name.
+  This can lead to unexpected behavior, due to Angular creating two component instances for a single DOM element:
+  One regular Angular component and a second one using the custom element.
+
+</div>
+
+
 ### Mapping
 
 A custom element _hosts_ an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs. Component properties and logic maps directly into HTML attributes and the browser's event system.