2

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:

enter image description here

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?

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; 
}
| improve this answer | |
  • 1
    Don't forget to accept your own answer. – Adrian Larson Dec 3 '19 at 15:49
  • When lwc moves to a full web components implementation, will this be possible? (at the moment, the DOM is not fully isolated, I believe) – Caspar Harmer Dec 3 '19 at 17:33
  • In my question, I stated that I was using the Synthetic DOM as opposed to the Shadow DOM. If it were using Shadow DOM, this approach would not be possible I don't think. The solution feels like a bit of a hack tbh, but not sure what the alternative is if I want to use SLDS and not reverse engineer the whole .css file – Phil Hawthorn Dec 3 '19 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.