Question 67 - Certified User Experience Designer discussion

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 theloadStyle()method from theplatformResourceLoadermodule.Alternatively, a shared CSS file can be created as a LWC component, and imported into the components using the@importdirective134.

: [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 -- 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]