LWCIntermediatecssstylingslds
Apply CSS styling within LWC shadow DOM constraints
Real World Scenario
Team uses global CSS hacks breaking in Experience Cloud LWR sites.
Expected Answer
• Style scoped to component css file only
• SLDS utility classes preferred over custom CSS
• CSS custom properties for theming passing from parent
• :host selector for root element styling
• Cannot style child base components internals—use variants
• Mobile responsive with SLDS grid not media query soup
• Dark mode via SLDS hooks where supported
Follow-Up Questions & Answers
Click to expand — each follow-up includes a direct, interview-ready answer
Direct answer: Style scoped to component css file only Also consider: SLDS utility classes preferred over custom CSS In practice: CSS custom properties for theming passing from parent Balance speed of delivery with maintainability.
Architect Perspective
Shadow DOM encapsulation is intentional—design with SLDS variants not DOM piercing.