LWC OSS utilising SLDS

Question

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?

Answer 1

Ok, I figured it out - funny how asking a question often leads you to the answer. The trick was to override the SLDS css with something more specific, e.g.

c-setup-assistant-item>li.slds-setup-assistant__item {
    border-bottom: 1px #dddbda solid!important;
    padding: 2rem 0!important; 
}

c-setup-assistant-item:first-child>li.slds-setup-assistant__item {
    padding-top: 0!important; 
}

c-setup-assistant-item:last-child>li.slds-setup-assistant__item {
    padding-bottom: 0!important;
    border-bottom: 0!important; 
}