| Name the five custom element lifecycle methods | 1. constructor
2. connectedCallback
3. disconnectedCallback
4. attributeChangedCallback
5. adoptedCallback |
| What are the two events which trigger a reactive update cycle? | When a reactive property changes or when the requestUpdate() method is explicitly called |
| After a Lit component executes an #update, which is called first, #updated or #firstUpdated? | #firstUpdated.
Called after the component's DOM has been updated the first time, immediately before #updated is called. |
| Which Lit update cycle method would you use to determine when an update is complete? | #updateComplete.
The updateComplete Promise resolves when the element has finished updating. Use updateComplete to wait for an update. |
| What are the differences between public reactive properties and internal reactive state? | Opposed to public reactive props, internal reactive state props are not part of the component's public API. These state properties don't have corresponding attributes, and aren't intended to be used from outside the component. Internal reactive state should be set by the component itself. |
| What are two ways to customize the render root used by LitElement? | 1. shadowRootOptions
2. createRenderRoot |
| What three benefits does the shadow DOM provide? | 1. DOM Scoping
2. Style scoping
3. Composition |
| What can a component’s #render method return? | TemplateResult objects,
Primitive values,
DOM nodes,
Arrays or iterables of any supported types. |
| Which Lit API is used to access nodes in a components' shadow DOM? | renderRoot
Note: renderRoot is only accessible starting with the firstUpdated lifecycle stage. |
| If your component adds an event listener to anything except itself or its templated DOM – for example, to Window, Document, or some element in the main DOM – you should add the listener in ..... and remove the listener in ...... | connectedCallback
and remove it in disconnectedCallback. |
| True or false, the firstUpdated lifecycle callback fires before the browser has had a chance to paint. | True.
Note: To ensure that code in firstUpdated is added after the user can see the component, you can await a Promise that resolves after the browser paints. |
| Since events dispatched inside a shadowRoot are not visible outside that root, what can be done to make an event pass through the shadow DOM boundary? | Set the "composed" property to "true".
Note: It's common to pair composed with bubbles so that all nodes in the DOM tree can see the event: |
| What is the convention for creating a custom element tag name? | The tag must have a hyphen. |
| How can multiple slots be used in a single template? | They must be "named", e.g., <slot name="heading"> |
| Which function can be used to customize change detection on a reactive property? | #hasChanged
Note: All reactive properties have this function, which is called when a property is set. By default it does a strict equality check |
| What is the part where name is used called?
<h1>Hello ${name}</h1> | an expression. |
| Name the two sentinel expressions. | noChange
nothing |
| Describe what the "nothing" sentinel value does. | Nothing is a sentinel value that signals a ChildPart to fully clear its content.
eg:
const button = html`${
user.isAdmin
? html`<button>DELETE</button>`
: nothing
}`; |
| Describe a Reactive Controller. | A Reactive Controller is an object that can hook into the update lifecycle of a Lit component, encapsulating state and behavior related to a feature into a separate unit of code.
You should think of a Reactive Controller as a "has-a" relationship to the component which uses it. |
| Describe a Class Mixin. | A Mixin is an abstract subclass; i.e. a subclass definition that may be applied to different superclasses to create a related family of modified classes.
You should think of a Mixin as an "is-a" relationship to the component which subclasses it. |
| Which API would you use to dynamically render classnames in your template based on the value of props? | The classMap Directive |
| but does not bubble | the element that dispatches the event the host element containing the shadow root |
