I have a static site, hosted in a AWS S3 bucket. The static site uses Lightning Out to load a component that contains a flow. I have included the SLDS stylesheet in the static site, and have confirmed it loads correctly. It looks like everything in the actual lightning component is styled correctly and the SLDS stylesheet is doing its job. However, when a flow is loaded in the component the content comes through unstyled.
Here is the static site:
<html>
<head>
<script src="[MY_SANDBOX]/lightning/lightning.out.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsforce/1.7.0/jsforce.min.js"></script>
</head>
<body>
<button onclick="login()">Login</button>
<script>
jsforce.browser.init({
loginUrl : 'https://test.salesforce.com',
clientId: '[ MY_CLIENT_ID ]',
redirectUri: '[ MY_REDIRECT ]'
});
function login(){
jsforce.browser.login();
}
jsforce.browser.on('connect', function(conn) {
if(conn.accessToken && jsforce.browser.isLoggedIn()){
$Lightning.use("c:DEPENDENCY_APP", function() {
$Lightning.createComponent("c:CONTAINER_COMPONENT",
{},
"lightningout",
function(cmp) {
//nothing yet
});
},
'https://[MY_URL].lightning.force.com',
conn.accessToken
);
}
});
</script>
<div class="slds-scope">
<div id="lightningout">
</div>
</div>
</body>
</html>
The component that holds the flow looks like this:
<div aura:id="newBidContainer" class="slds-scope">
<lightning:flow title="" aura:id="newBidFlow" onstatuschange="{!c.handleNewBidStatusChange}" class="slds-scope" />
</div>
As you can see, I have tried to force slds-scope in every parent div that will hold the flow. I have also included it in the class="slds-scope" parameter on the lightning:flow directive.
This is what the flow looks like in salesforce:
And this is what it looks like in the static site:
I have included the SLDS stylesheet in the static site- that's exactly what I did. I have also verified that the SLDS stylesheet is loading correctly. – Ross Bassett Feb 26 '18 at 14:00