function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Alessandro FerrariAlessandro Ferrari 

SLDS style not applied to pre-chat LWC on website outside of Salesforce

Hi, I have created a Lightning Web Component to be used as pre-chat for an Einstein bot. 
When we test the Embedded Service Deployment on a Visualforce page, everything runs smoothly.
Nevertheless, on an external website (company website), the stylying of this component is completely lost and the input fields look very basic (as lacking any stylying whatsoever).

I have read that I should use Lightning Out to wrap LWC for external use but that is not working at all.

Any idea?
ShivankurShivankur (Salesforce Developers) 
Hi Alessandro,

As per my analysis the issue could be because, the current SLDS version is not compatible with the native shadow DOM (some selectors will attempt to style elements in different shadow trees). Salesforce is working on a new version of SLDS which better aligns with the shadow DOM restrictions. In the meantime, if you want to use SLDS + LWC standalone you will need to make sure the application runs with @lwc/synthetic-shadow.

You may want to explore a bit about it: https://github.com/salesforce/lwc/tree/master/packages/%40lwc/synthetic-shadow

Hope above information helps. Please mark as Best Answer so that it can help others in future.

Thanks.
Alessandro FerrariAlessandro Ferrari
Thank you Shivankur. Any suggestion on how to implement this for a pre-chat LWC?
I couldn't find anything by googling...
ShivankurShivankur (Salesforce Developers) 
Hi Alessandro,

The basic prechat form using LWC can implemented using following documentation, where you will find an example as well for reference:
https://developer.salesforce.com/docs/component-library/bundle/lightningsnapin-base-prechat/documentation

You can try using additional syntax like below in the component: 
import '@lwc/synthetic-shadow';
Hope above information helps. Please mark as Best Answer so that it can help others in future.

Thanks.
Alessandro FerrariAlessandro Ferrari
Thank you, Shivankur.
I added the import line you suggested but I got this error when tried to deploy it: 
FIELD_INTEGRITY_EXCEPTION: Exception while getting the LWC bundle for reference @lwc/synthetic-shadow of type module in file preChat.js: Source

My import statements look like this: 
import BasePrechat from 'lightningsnapin/basePrechat';
import { api, track } from 'lwc';
import LA_PreChat_Base_StartChat_04I690000008PP6_1988912 from '@salesforce/label/c.LA_PreChat_Base_StartChat_04I690000008PP6_1988912';
import '@lwc/synthetic-shadow';

​​​​​​​
Francesco Carmagnola 10Francesco Carmagnola 10
Hi Alessandro,

I'm facing the same exact issue. Could you find a workaround in the end?

Thanks,
Fra