the stylesheets for these components?

A UX Designer is creating a custom To-Do List component to replace the standard Salesforce one. Their developer is using a parent-child Lightning Web Component (LWC) structure to build the component, creating a parent component for the list and a single repeated child component for each To-Do Item within the list.

Which two impacts of the LWC’s Shadow DOM should be considered when designing or developing

the stylesheets for these components? Choose 2 answers
A . Any needed Saleforce Lightning Design System (SLDS) classes and styles must be imported into both the parent list and child items.
B . The CSS styles defined in the parent list component are not shared with the child items.
C . Any custom shared between the list and child items should be imported from a shared CSS file.
D . The CSS style defined in the parent list component are inherited by the child items

View Answer

Answer: B,C

Explanation:

Shadow DOM is a web standard that encapsulates the internal document object model (DOM) structure of a web component. It isolates the component’s markup and styles from the rest of the page, and prevents the component from being affected by or affecting the global DOM. When designing or developing the stylesheets for a parent-child LWC structure, the following impacts of the shadow DOM should be considered:

The CSS styles defined in the parent list component are not shared with the child items. This is because the shadow DOM creates a boundary between the parent and the child components, and the styles defined in the parent component do not cascade down to the child components. This means that each component needs to define its own styles, or import them from a common source. This also means that the parent component cannot directly style the child components, or vice versa12.

Any custom styles shared between the list and child items should be imported from a shared CSS file. This is a recommended practice to avoid duplicating the same styles in multiple components, and to maintain consistency and reusability. A shared CSS file can be created as a static resource, and imported into the components using the loadStyle() method from the platformResourceLoader module. Alternatively, a shared CSS file can be created as a LWC component, and imported into the components using the @import directive134.

Reference:

: [Shadow DOM | Lightning Web Components Developer Guide | Salesforce Developers]

: [Light DOM | Lightning Web Components Developer Guide | Salesforce Developers]

: [Understanding Shadow DOM and Template in LWC C SFDC Lightning]

: [Shadow DOM, CSS and Styling Hooks in LWC what you need to know]

: [How to Share CSS Between Lightning Web Components | Salesforce Developers Blog]

: [How to Use a Shared CSS File in a Lightning Web Component | Salesforce Developers Blog]