LWCIntermediatesldsvisualforceiframe
Debug SLDS class conflicts between LWC and Visualforce iframe embed
Real World Scenario
Hybrid page embeds legacy Visualforce in iframe beside LWC; SLDS spacing breaks and buttons misalign only when VF page uses older SLDS version.
Expected Answer
• Isolate VF in iframe — do not share SLDS scope between VF and LWC on same document
• Upgrade VF to SLDS version closest to Lightning or strip SLDS from VF using custom stylesheet
• Use postMessage between iframe and LWC for coordinated height not CSS inheritance
• Avoid !important wars across boundaries
• Plan VF deprecation rather than perpetual CSS patching
• Test zoom 125% and 150% for alignment regressions
• Document supported VF embed pattern for admins
Follow-Up Questions & Answers
Click to expand — each follow-up includes a direct, interview-ready answer
Direct answer: Isolate VF in iframe — do not share SLDS scope between VF and LWC on same document Also consider: Upgrade VF to SLDS version closest to Lightning or strip SLDS from VF using custom stylesheet In practice: Use postMessage between iframe and LWC for coordinated height not CSS inheritance Balance speed of delivery with maintainability.
Architect Perspective
VF+LWC hybrid is transitional — architect exit path to full LWC, not infinite CSS compatibility.