SF-PD2 User Interface Practice Question
A developer is building a complex nested Lightning Web Component structure. A deeply nested child component needs to notify an ancestor component, which is not the immediate parent, about a data change. Which configuration of the CustomEvent constructor should the developer use to ensure the event reaches the ancestor across the shadow DOM boundary?
⚠ Common exam trap
Candidates often set only 'bubbles: true' and forget 'composed: true'. Without both, the event will stop at the shadow DOM boundary and never reach the ancestor component.
Answer choices
Why each option matters
Answer the question above first, then reveal the full breakdown to understand why each option is right or wrong.
Correct answer & explanation
✓
new CustomEvent('update', { bubbles: true, composed: true });
Understanding event propagation in Lightning Web Components is vital for building scalable architectures. When an event needs to cross the shadow DOM boundary and continue bubbling up the regular DOM, both the bubbles and composed properties must be set to true. This allows the event to reach components outside of the immediate shadow root where it originated, enabling decoupled communication between distant components.
Answer analysis
Option-by-option breakdown
For each option: why learners choose it and why it is or isn't the right answer here.
- ✗
new CustomEvent('update', { bubbles: true, composed: false });
Why it's wrong here
Setting bubbles to true allows the event to move up the DOM tree within the same shadow root. However, setting composed to false prevents the event from crossing the shadow DOM boundary. This means any ancestor component outside the immediate shadow tree will never receive the event notification during the bubbling phase.
- ✗
new CustomEvent('update', { bubbles: false, composed: true });
Why it's wrong here
While setting composed to true theoretically allows an event to cross the shadow boundary, events that do not bubble will not move past the element that dispatched them. This configuration is illogical for ancestor communication because the event remains stationary and does not move up the hierarchy to find listeners.
- ✓
new CustomEvent('update', { bubbles: true, composed: true });
Why this is correct
Combining bubbles and composed properties ensures the event travels up the DOM and successfully exits the shadow DOM boundary. This is the standard approach for bubbling events to ancestors that are not direct parents, allowing the event to reach the document root or any listener registered on higher-level components.
- ✗
new CustomEvent('update', { detail: { bubbles: true, composed: true } });
Why it's wrong here
Placing the propagation properties inside the detail object is a syntax error regarding event configuration. The detail property is intended for passing custom data payloads, not for defining how the event behaves in the DOM. The event will use default values, which are both false, failing to reach the ancestor.
About these practice questions
Courseiva writes every SF-PD2 question from scratch — 226 in total, each with an explanation and a wrong-answer breakdown. None are copied from real exams or dumps. Learn why practice questions differ from exam dumps →
JA
Written and reviewed by Johnson Ajibi, MSc IT Security
Senior Network & Security Engineer · founder of Courseiva
Last reviewed September 2026 · checked against the official Salesforce exam blueprint
This SF-PD2 practice question is part of Courseiva's free Salesforce certification practice question bank. Courseiva provides original exam-style practice questions with explanations, topic-based practice, mock exams, readiness tracking, and study analytics to help learners prepare for the SF-PD2 exam.