I have seen the other questions on this subject and can either inject the slds stylesheet into my component, or use the synthetic DOM. Using either approach, SLDS styling is generally working ok.
However, there are instances when the SLDS utilises pseudo elements :first-child
and :last-child
which kind of breaks things a little. To illustrate the issue, take the setup assistant which comprises of an ordered list:
<ol class="slds-setup-assistant">
<li class="slds-setup-assistant__item">
<article class="slds-setup-assistant__step">
<div class="slds-setup-assistant__step-summary">
<div class="slds-media">
<div class="slds-setup-assistant__step-summary-content slds-media__body">
<h3 class="slds-setup-assistant__step-summary-title slds-text-heading_small">Add Users to Your Org</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<button class="slds-button slds-button_outline-brand">Add Users</button>
<p class="slds-text-align_right slds-text-color_weak slds-p-top_medium">4 mins</p>
</div>
</div>
</div>
</article>
</li>
</ol>
and styling (from slds):
.slds-setup-assistant__item {
border-bottom: 1px #dddbda solid;
padding: 2rem 0;
}
.slds-setup-assistant__item:first-child {
padding-top: 0;
}
.slds-setup-assistant__item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
Renders correctly with the right spacing and bottom border:
However, when I convert li.slds-setup-assistant__item
to a component, I end up with:
<ol class="slds-setup-assistant">
<c-setup-assistant-item id="item1">
<li class="slds-setup-assistant__item">
<!-- content removed for brevity -->
</li>
</c-setup-assistant-item>
<c-setup-assistant-item id="item2">
<li class="slds-setup-assistant__item">
<!-- content removed for brevity -->
</li>
</c-setup-assistant-item>
</ol>
Which of course means that the li.slds-setup-assistant__item
is always the :first-child
and the :last-child
because its the only child of c-setup-assistant-item
rather than being a direct descendant of the <ol>
. I realise the whole point of web components is isolation and mixing top level stylesheets is not the done thing, but I want to avoid hacking the SLDS since css is not particularly my strong point. Has anyone come up with an elegant solution for this?
<link rel="stylesheet" href="/assets/styles/salesforce-lightning-design-system.min.css" type="text/css" >