SALESFORCE-PD1 User Interface Practice Test 3 — 15 Questions

Question 1

A developer is building a Lightning Web Component and wants to style it using Salesforce Lightning Design System (SLDS). Which TWO statements are true regarding SLDS usage in LWC? (Choose TWO)

Accepted Answer

SLDS styles are automatically available in LWC without needing to import static resources.. Option C is correct because the Lightning Web Components framework automatically provides SLDS styles to every component at runtime, so developers never need to upload SLDS as a static resource or import it manually. Option E is correct because SLDS utility classes are built on the BEM (Block, Element, Modifier) naming convention, using patterns like `slds-block__element--modifier`, which is why classes such as `slds-button__icon` and `slds-button--brand` follow that structure. Option A is incorrect because LWC uses Shadow DOM, which scopes styles to the component and prevents custom CSS from leaking into child components. Option B is incorrect because SLDS is not distributed as a static resource that must be loaded via `loadStyle`; it is available automatically. Option D is incorrect because SLDS design tokens (CSS custom properties such as `--slds-g-color-brand-base-50`) can be referenced directly within a component's CSS file.

Answer

Custom CSS styles written in LWC automatically leak into child components.

Answer

Developers must upload SLDS as a static resource and reference it via loadStyle for every component.

Answer

SLDS design tokens cannot be used within component CSS files.

Question 2

A developer is configuring a Lightning Web Component to accept design attributes in the Lightning App Builder. Which THREE files make up a complete LWC bundle that supports App Builder configuration properties? (Choose THREE)

Accepted Answer

componentName.js-meta.xml. A complete configurable LWC bundle includes the HTML template, JavaScript controller, metadata file (.js-meta.xml), and design file (.design).

Answer

componentName.cmp

Answer

componentName.apex

Answer

componentName.design

Question 3

A developer is building a Lightning Web Component and wants to style it using Salesforce Lightning Design System (SLDS). Which TWO statements are true regarding SLDS usage in LWC? (Choose TWO)

Choose an answer to begin — your selection is scored in the full session.

Accepted Answer

@salesforce/apex. The @salesforce/apex module is used to import Apex methods into Lightning Web Components, enabling imperative calls to Salesforce data via JavaScript. When a developer needs to fetch records imperatively (e.g., on a button click), they import an Apex method using this module and then invoke it. This is the standard way to call Apex from LWC, providing full control over when the server callout occurs.

Answer

lightning/platformResourceLoader

Answer

@salesforce/schema

Answer

lightning/uiRecordApi

Question 4

A Lightning Web Component needs to communicate an event up to a grandparent component that is nested two levels above. What is the best practice to achieve this in LWC?

Accepted Answer

Use standard browser CustomEvent with bubbles: true and composed: false. Custom events in LWC bubble up the DOM tree by default when constructed with { bubbles: true, composed: false }, allowing parent and grandparent components to listen for them.

Answer

Use the pubsub utility pattern by importing a shared JavaScript pubsub library

Answer

Use a global Lightning Message Service context to broadcast the event across components

Answer

Dispatch an Aura Application Event from within the LWC container

Question 5

A developer is implementing a Visualforce page that displays a list of accounts and needs to ensure that it adheres to Salesforce security best practices by preventing cross-site scripting (XSS) attacks. Which tag or attribute combination should be used to securely output user-supplied data?

Accepted Answer

. Using `` ensures that any HTML or JavaScript characters in the user-supplied input are HTML-encoded before rendering, neutralizing XSS payloads. The `escape="true"` attribute is the default and explicitly enforces output encoding, which is the Salesforce-recommended way to safely render untrusted data.

Answer

<apex:includeScript value="{!userSuppliedScript}" />

Answer

<apex:outputField value="{!account.Name}"> with escape="false"

Answer

{!$User.UIThemeDisplayed} without any wrappers

Question 6

A developer is designing a Lightning Web Component that needs to communicate with another component located anywhere in the application hierarchy, including unrelated components. Which TWO mechanisms are valid and appropriate for this requirement? Choose 2 answers.

Accepted Answer

A shared pub/sub utility module imported into both components. Option A (a shared pub/sub utility module imported into both components) is correct because a common JavaScript module that implements a publish-subscribe pattern lets any component import the same singleton and exchange messages regardless of where they sit in the hierarchy, which is exactly the decoupled, cross-hierarchy communication required. Option C (Lightning Message Service, LMS) is correct because LMS is the Salesforce-provided pub/sub API that uses MessageChannels to let Lightning Web Components, Aura components, and Visualforce pages communicate across any part of the application, including unrelated components and even across DOM boundaries. Option B (Aura Application Events) is not appropriate because application events are an Aura-specific mechanism and are deprecated for new development in favor of LMS, and they are not the recommended way for LWC-to-LWC communication. Option D (direct parent-to-child property passing via @api) only works along a direct parent-child relationship and cannot reach unrelated components. Option E (CustomEvent with bubbles set to true) only propagates up the DOM containment hierarchy to ancestor components, so it cannot reach components outside that ancestor chain.

Answer

Aura Application Events

Answer

Direct parent-to-child property passing via public properties (@api)

Answer

Standard DOM CustomEvent with bubbles set to true

Question 7

A developer is troubleshooting a Lightning Web Component where data retrieved via the @wire service needs to be formatted before being rendered in the template. Which THREE approaches are valid ways to handle or transform wired data? Choose 3 answers.

Accepted Answer

Use a getter function that evaluates the wired property and returns the formatted result.. Option B is correct because a JavaScript getter can read the wired property (e.g., this.wiredData) and return a transformed value, and the template re-renders reactively whenever the wired property updates. Option C is correct because the @wire service can call an Apex method, and that Apex method can shape, filter, or format the data server-side before it is returned to the component, which is a valid transformation strategy. Option E is correct because the property-and-function wire syntax invokes a handler function with the wire result, letting the developer process the data and assign it to a local reactive property that the template renders. Option A is not valid because wired data is read-only and mutating its properties directly (especially in the template) is unsupported and breaks reactivity. Option D is not valid because renderedCallback() is a lifecycle hook for post-render DOM work, not a supported place to mutate raw wired data, and doing so would not reliably trigger re-rendering.

Answer

Directly mutate the object properties returned by the wire adapter inside the template.

Answer

Use the renderedCallback() hook to modify the raw wired data object directly.

Question 8

Which THREE statements are true regarding the standard Salesforce Lightning Design System (SLDS)? Choose 3 answers.

Accepted Answer

SLDS is automatically included in Lightning experience pages to maintain a consistent UI.. SLDS is built into the Salesforce platform, provides CSS framework styling matching the Salesforce look-and-feel, and can be used in both LWC and Visualforce.

Answer

SLDS relies on external third-party UI frameworks like Bootstrap for grid styling.

Answer

Developers must manually upload all SLDS CSS and image files as static resources for every project.

Question 9

A developer is building a Lightning Web Component that renders a list of Account records inside an iteration. When a user clicks a row, the component must notify the parent component, which is itself a Lightning Web Component, and the parent must receive the original Account Id in the event detail. The developer writes `this.dispatchEvent(new CustomEvent('accountselected', { detail: { id: account.Id } }));`. Users report that nothing happens when a row is clicked. Which change is required for the parent component to receive the event?

Accepted Answer

Set bubbles to true and composed to true in the CustomEvent options so the event crosses the shadow boundary and propagates upward.. Custom events created with the CustomEvent constructor stay inside the dispatching component's shadow boundary unless propagation is explicitly enabled. Adding bubbles allows the event to travel up the DOM tree from the child, and composed allows it to cross the shadow root so an ancestor component can observe it. Without both flags, the parent's declared handler never fires, which matches the reported symptom of clicks producing no reaction.

Answer

Replace CustomEvent with LightningEvent and pass the Account Id through the event's payload property instead of detail.

Answer

Dispatch the event from the parent's renderedCallback and pass the child element reference so the parent can read the selected Account Id directly.

Answer

Change the event name from 'accountselected' to a namespaced name such as 'c__accountselected' so the parent can register a matching listener.

Question 10

A developer needs to retrieve Salesforce data in a Lightning Web Component without writing imperative Apex. Which module should be imported to use the wire service for standard record data?

Accepted Answer

lightning/uiRecordApi. lightning/uiRecordApi provides wire adapters to get, create, update, or delete record data.

Answer

lightning/platformShowErrorToast

Answer

lightning/navigation

Answer

lightning/apex

Question 11

A developer creates a Visualforce page and wants to include standard Salesforce styling. Which attribute on the <apex:page> tag enables this?

Accepted Answer

standardStylesheets="true". The standardStylesheets attribute on the <apex:page> tag, when set to 'true', includes standard Salesforce styling (CSS) in the Visualforce page. This enables the page to use the standard Salesforce look and feel.

Answer

lightningStylesheets="true"

Answer

applyHtmlTag="true"

Answer

sidebar="true"

Question 12

A developer creates a custom LWC that wraps child components. The developer needs to pass styling from the parent component into specific slots of the child component. Which CSS selector should be used inside the child component to style content passed into a slot?

Accepted Answer

::slotted(). The ::slotted() pseudo-class selector is used in the child component's stylesheet to target nodes slotted into a <slot> element.

Answer

:content

Answer

:scope

Answer

:host

Question 13

A developer wants to style a Lightning Web Component using the Salesforce Lightning Design System (SLDS). What is the recommended way to include SLDS styling?

Accepted Answer

Use standard SLDS utility classes directly in the component's HTML template.. Lightning Web Components are designed to work natively with SLDS, and the recommended approach is to apply SLDS utility classes (like slds-button, slds-grid, slds-m-around_medium) directly in the component's HTML template. Salesforce automatically makes SLDS available to LWC without any import, and using utility classes ensures visual consistency with the Lightning Experience and future SLDS updates.

Answer

Import the full SLDS stylesheet explicitly as a static resource.

Answer

Apply standard Bootstrap classes to match Salesforce themes.

Answer

Use inline styles exclusively for all components.

Question 14

A developer is building a Lightning Web Component and needs to execute code as soon as the component is inserted into the DOM. Which lifecycle hook should be used?

Accepted Answer

connectedCallback. The connectedCallback lifecycle hook is called when a component is inserted into the DOM. It is the appropriate place to execute initialization code that requires the component to be in the document, such as accessing the DOM or making imperative Apex calls.

Answer

renderedCallback

Answer

constructor

Answer

disconnectedCallback

Question 15

Which SLDS utility class should a developer use to add a standard margin around a container?

Accepted Answer

slds-m-around_medium. SLDS spacing classes follow the pattern slds-m-{sides}-{size}.

Answer

slds-grid

Answer

slds-padding_medium

Answer

slds-margin-all