* What is the difference between a property and an attribute?
Attributes are defined by HTML, all definitions inside HTML tag are attributes. The type of attributes is always string. We can get and set properties as we do to a normal object in JavaScript and properties can be any types. Non-custom attributes have 1:1 mapping onto properties. Non-custom property (attribute) changes when corresponding attribute (property) changes in most cases. Attribute which has a default value doesn't change when corresponding property changes. It is recommended to use property in JavaScript as it's much easier and faster.
* Which one would you use to pass a large complex object into the component?
properties
* Inside a component event handler, what does this refer to?
The component itself
* Which Custom event flags need to be set (if any) for an event to cross the Shadow DOM boundary?
Both the composed and bubbles flags
* List 2 lifecycle methods that LitElement inherits from Custom Web Components.
ConnectedCallback and disconnectedCallback
* list 3 ways to provide CSS styles to our Web Components
1. The static styles property
2. Add styles using a <style> element.
3. Add styles using an external style sheet.
* Does the CSS cascade extend beyond the Shadow Root?
No
* Provide 1 or 2 ways you can pass CSS styles across the shadow root?
1. Use the ::slotted() CSS pseudo-element to style direct slotted children
2. Use the :host CSS pseudo-class and :host() CSS pseudo-class function to style the component itself
3. Use the ::shadow CSS pseudo-element to style shadow DOM internals from outside
Attributes are defined by HTML, all definitions inside HTML tag are attributes. The type of attributes is always string. We can get and set properties as we do to a normal object in JavaScript and properties can be any types. Non-custom attributes have 1:1 mapping onto properties. Non-custom property (attribute) changes when corresponding attribute (property) changes in most cases. Attribute which has a default value doesn't change when corresponding property changes. It is recommended to use property in JavaScript as it's much easier and faster.
* Which one would you use to pass a large complex object into the component?
properties
* Inside a component event handler, what does this refer to?
The component itself
* Which Custom event flags need to be set (if any) for an event to cross the Shadow DOM boundary?
Both the composed and bubbles flags
* List 2 lifecycle methods that LitElement inherits from Custom Web Components.
ConnectedCallback and disconnectedCallback
* list 3 ways to provide CSS styles to our Web Components
1. The static styles property
2. Add styles using a <style> element.
3. Add styles using an external style sheet.
* Does the CSS cascade extend beyond the Shadow Root?
No
* Provide 1 or 2 ways you can pass CSS styles across the shadow root?
1. Use the ::slotted() CSS pseudo-element to style direct slotted children
2. Use the :host CSS pseudo-class and :host() CSS pseudo-class function to style the component itself
3. Use the ::shadow CSS pseudo-element to style shadow DOM internals from outside