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

1. ::part() css pseudo-element is useful for 'allowing shadow hosts to selectively expose chosen elements from their shadow tree to the outside page for styling purposes.' The tab example here (https://developer.mozilla.org/en-US/docs/Web/CSS/::part) is a perfect situation for ::part().

2. connectedCallback is invoked each time the custom element is appended into a document-connected element so its useful when initializing. 

3. Shadow DOM is used primarily to modularize styling.  

4. ShadowRoot.

5. <slot>  can be used to dynamically add html. 

* What is ::part() css pseudo-element useful for?
The ::part() pseudo-element allows the styling of a specific, purposely exposed elements in a shadow treee from outside the page's context.  This allows the outside page to interact in safe, powerful ways, with the element while maintaining encapsulation without surrendering all control.

* What actions can be performed during the lifecycle callback: connectedCalback?
Setup code - like fetching data, or setting default attributes can be performed during connectedCallback.

* What is the purpose of shadowDOM?
The purpose of the shadowDOM is to separate and hide the structure, style and behavior of your custom element from the rest of the page.  It is a type of encapsulation.  This keeps different parts of your page from clashing and helps keep the code nice and clean. 

* If you want to peek/query inside the ShadowDOM using DOM api methods, which element in the ShadowDOM do you hook into?
The shadowRoot.

* Can you give an example for what you'd use the <slot> tag for?
You could use the <slot> tag to designate dynamic/customizable text in a template.