* What is the difference between a property and an attribute?
Attributes are defined by HTML, and all definitions inside HTML tags are attributes. Properties belong to the DOM, and the nature of the DOM is an object in JavaScript.
* Which one would you use to pass a large complex object into the component?
You would use properties, most likely using a static get properties() function.
* Inside a component event handler, what does this refer to?
'this' refers to that instance of the element itself.
* Which Custom event flags need to be set (if any) for an event to cross the Shadow DOM boundary?
Both the bubbles and composed flags need to be set to 'true'.
* List 2 lifecycle methods that LitElement inherits from Custom Web Components.
connectedCalleback, disconnectedCallback, adoptedCallback, and attributeChangedCallback.
* list 3 ways to provide CSS styles to our Web Components
static get styles() property, exporting/importing a module with tagged styles, inline styles
* Does the CSS cascade extend beyond the Shadow Root?
No, with the exception of inherited CSS properties
* Provide 1 or 2 ways you can pass CSS styles across the shadow root?
using inherited CSS properties, Using the custom element tag, using CSS custom properties
Attributes are defined by HTML, and all definitions inside HTML tags are attributes. Properties belong to the DOM, and the nature of the DOM is an object in JavaScript.
* Which one would you use to pass a large complex object into the component?
You would use properties, most likely using a static get properties() function.
* Inside a component event handler, what does this refer to?
'this' refers to that instance of the element itself.
* Which Custom event flags need to be set (if any) for an event to cross the Shadow DOM boundary?
Both the bubbles and composed flags need to be set to 'true'.
* List 2 lifecycle methods that LitElement inherits from Custom Web Components.
connectedCalleback, disconnectedCallback, adoptedCallback, and attributeChangedCallback.
* list 3 ways to provide CSS styles to our Web Components
static get styles() property, exporting/importing a module with tagged styles, inline styles
* Does the CSS cascade extend beyond the Shadow Root?
No, with the exception of inherited CSS properties
* Provide 1 or 2 ways you can pass CSS styles across the shadow root?
using inherited CSS properties, Using the custom element tag, using CSS custom properties