When we are creating a component in Angular 2, a shadow DOM is created and our template gets loaded into it (not by default). What is a shadow DOM? Shadow DOM refers to a subtree of DOM elements that renders as part of the document, but not into the main document DOM tree.
Let's see a well-known example of a shadow DOM, an HTML select, in action. Create a plain HTML file in your favorite text editor and create a select element in its body:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select>
<option>ONE</option>
<option>TWO</option>
<option>THREE</option>
</select>
</body>
</html>Next, open it up in Chrome and right-click on the element, then choose Inspect Element from the pop-up menu:
The Chrome DevTool will pop up, and we can inspect the select element in the Elements...