Add a note about web component wrapper shadow root

Part of vaadin/flow#8543

documentation/embedding-flow-applications/tutorial-webcomponent-exporter.asciidoc

@@ -110,6 +110,13 @@ Let's analyze the HTML content generated by `MainAppServlet`:
 [NOTE]
 If embedding applications is targeted towards very specific browsers, the polyfill is not needed. For example Chrome and Firefox do not need the polyfill while Edge does.
 
+[NOTE]
+The generated `"login-form"` element is a web component which wraps 
+the original `LoginForm` HTML representation element (`"div"` , see below). This element is inside wrapper's shadow root and 
+it's not available outside it. So its styles don't leak to the page and global page styles don't affect
+the styles of the embedded component.  
+
+
 . Create the `UserService` class. This class contains the authentication logic and is shared between the `MainAppServlet` and the web component class (created in <<step-5,step 5>> below). You can use any interface and implementation you like. This example is a custom stub implementation and is provided as a reference.
 +
 [source, java]

documentation/embedding-flow-applications/tutorial-webcomponent-intro.asciidoc

@@ -63,6 +63,12 @@ To embed the exported application in a page:
 
 ** The element `my-component` is used in your HTML page content. This can be a static HTML file or content generated by any framework, for example a plain servlet, JSP, and more.
 
+[NOTE]
+The generated `_custom-tag-name_` (`"my-component"` in the example) element is a web component which wraps 
+the original `MyComponent` HTML representation element. This element is inside wrapper's shadow root and 
+it's not available outside it. So its styles don't leak to the page and global page styles don't affect
+the styles of the embedded component.  
+
 === Using an external Embeddable Application
 
 If you use an embedded application which you develop in your own web application on the same domain