Web-components Q&A

  1. What is ::part() css pseudo-element useful for?
    ::part() css pseudo-elements allows us to style inside a shadow tree, from outside of that shadow tree. For example, 
```
<style>
  x-foo::part(some-box) { ... }
  x-foo::part(some-input) { ... }     
</style>   
<x-foo>    
  #shadowRoot    
  <div part="some-box"><span>...</span></div>     
  <input part="some-input">   
  </x-foo> 
```
  2. What actions can be performed during the lifecycle callback: connectedCalback?
    Attach shadow root to the custom element and add content to the shadow root's children
  3. What is the purpose of shadowDOM?
    Shadow DOM introduces scoped styles to the web platform and helps building reusable custom elements.
  4. If you want to peek/query inside the ShadowDOM using DOM api methods, which element in the ShadowDOM do you hook into?
   shadow root
  5. Can you give an example for what you'd use the <slot> tag for?
   In the following example, <slot> works as placeholders
   ```
   #shadowRoot
    <style>       
      #hw {          color: red;        }     
     </style>     
     <slot id="hw" name="hw"></slot>
   ```
   ```
    <cool-heading>     
      <h1 slot="hw">Hello World!</h1>   
    </cool-heading>   
  ```