PD1 Lightning Components 3 — Questions and Answers
Question 1: In LWC, which event option must be set to `true` for a custom event to cross shadow DOM boundaries to an ancestor component?
- bubbles: true only
- composed: true only
- Both bubbles: true and composed: true (Correct answer)
- propagate: true
Correct answer: Both bubbles: true and composed: true
For a custom event to traverse both the shadow DOM boundary and bubble up the DOM tree, both bubbles and composed must be set to true.
Question 2: Which Aura component attribute allows you to define regions where parent components can inject markup?
- <aura:set>
- <aura:if>
- <aura:attribute>
- <aura:slot> (Correct answer)
Correct answer: <aura:slot>
<aura:slot> (similar to <slot> in LWC) defines placeholder regions in an Aura component that parent components can fill with markup.
Question 3: When using @wire with a Salesforce Apex method in LWC, what are the two properties available on the wired result object?
- result and error
- data and error (Correct answer)
- value and exception
- response and fault
Correct answer: data and error
A @wire result object exposes data (the successful response) and error (any error that occurred), following LWC's standard wire adapter pattern.
Question 4: In LWC, how do you reference a static resource named 'myResource' in JavaScript?
- import myResource from '@salesforce/resourceUrl/myResource'; (Correct answer)
- import myResource from '@salesforce/staticResource/myResource';
- import { myResource } from 'resource';
- const myResource = StaticResource.load('myResource');
Correct answer: import myResource from '@salesforce/resourceUrl/myResource';
The @salesforce/resourceUrl scoped module import is used to reference static resources in LWC JavaScript files.
Question 5: Which method is used in LWC to query a single element within the component's template?
- document.querySelector()
- this.template.querySelector() (Correct answer)
- this.querySelector()
- this.shadow.querySelector()
Correct answer: this.template.querySelector()
In LWC, this.template.querySelector() scopes the query to the component's shadow DOM, preventing access to elements outside the component.
Question 6: What is the purpose of the `renderedCallback()` lifecycle hook in LWC?
- It runs once after the component is first inserted into the DOM
- It runs after every render, useful for post-render DOM manipulation (Correct answer)
- It runs before the component renders for the first time
- It runs when the component is removed from the DOM
Correct answer: It runs after every render, useful for post-render DOM manipulation
renderedCallback() fires after every render cycle, making it appropriate for DOM operations that must happen after the template has been updated.
Question 7: In an Aura component, how do you fire a component event that is defined with type="COMPONENT"?
- this.fire('eventName', params)
- var event = this.getEvent('eventName'); event.fire(); (Correct answer)
- var event = $A.getEvent('eventName'); event.fire();
- this.dispatchEvent(new CustomEvent('eventName'))
Correct answer: var event = this.getEvent('eventName'); event.fire();
In Aura, component events are fired using this.getEvent('eventName').fire(), with optional parameters set before firing.
PD1 Lightning Components 3
In LWC, which event option must be set to `true` for a custom event to cross shadow DOM boundaries to an ancestor component?