title: CSS for nested id not getting overridden
body: <p>In below code, CSS for <code>li:after </code> is not working in <code>progressBarSlot</code>.
  The line connecting the circles is not visible after putting it into the slot.</p>
  <p>This is my template.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>slot {
    width: 100%;
    display: block;
  }
  
  .top-padded {
    padding-top: 34px
  }
  
  .progress-bar-padding {
    padding-bottom: 40px;
    padding-left: 50px;
  }
  
  .left-padded {
    padding-left: 100px
  }
  
  .stick-to-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  
  .footer-padding {
    padding-top: 44px
  }
  
  .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #FAFAFA;
  }
  
  .content {
    flex: 1;
  }
  
  .nav-bar {
    background-color: #FAFAFA;
  }
  
  .progress-bar-box {
    width: 100%;
    align: center;
  }
  
  li {
    list-style-type: none;
    float: left;
    width: 16.66%;
    position: relative;
    text-align: center;
    font-family: AEmb, Helvetica, Arial, sans-serif;
    font-size: 10px;
  }
  
  li:before {
    content: '';
    width: 10px;
    height: 10px;
    line-height: 30px;
    border: 2px solid #002f36;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
  }
  
  li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #002f36;
    top: 5px;
    left: -50%;
    z-index: -1;
  }
  
  li:first-child:after {
    content: none;
  }
  
  li.complete:before {
    border-color: #002f36;
    background-color: #002f36;
  }
  
  li.active:before {
    border-color: aqua;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="katal wrapper"&gt;
    &lt;div class="content"&gt;
      &lt;div class="kat-row"&gt;
        &lt;slot name="headerSlot"&gt;
        &lt;/slot&gt;
      &lt;/div&gt;
      &lt;section class="container"&gt;
        &lt;div class="kat-row progress-bar-padding"&gt;
          &lt;div id="progress-bar-parent"&gt;
              &lt;ul class="progress-bar-box"&gt;
                  &lt;li&gt; 1 &lt;/li&gt;
                  &lt;li&gt; 2 &lt;/li&gt;
                  &lt;li&gt; 3 &lt;/li&gt;
                  &lt;li&gt; 4 &lt;/li&gt;
                  &lt;li&gt; 5 &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="kat-row top-padded"&gt;
          &lt;div class="kat-col-md-2"&gt;
          &lt;/div&gt;
          &lt;div class="kat-col-md-6"&gt;
            &lt;slot name="bannerSlot"&gt;&lt;/slot&gt;
            &lt;slot name="bodySlot1"&gt;&lt;/slot&gt;
            &lt;slot name="bodySlot2"&gt;&lt;/slot&gt;
            &lt;slot name="bodySlot3"&gt;&lt;/slot&gt;
            &lt;slot name="bodySlot4"&gt;&lt;/slot&gt;
            &lt;slot name="bodySlot5"&gt;&lt;/slot&gt;
            &lt;slot name="bodySlot6"&gt;&lt;/slot&gt;
            &lt;slot name="bodySlot7"&gt;&lt;/slot&gt;
            &lt;slot name="bodySlot8"&gt;&lt;/slot&gt;
            &lt;div class="kat-row top-padded"&gt;
              &lt;slot name="navControlSlot"&gt;&lt;/slot&gt;
            &lt;/div&gt;
            &lt;div class="top-padded nav-bar"&gt;
              &lt;slot name="navSlot"&gt;&lt;/slot&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="kat-col-md-1"&gt;
          &lt;/div&gt;
          &lt;div class="kat-col-md-3"&gt;
            &lt;slot name="rightVerticalSlot"&gt;
            &lt;/slot&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/div&gt;
    &lt;div class="kat-row footer-padding flex-footer"&gt;
      &lt;slot name="footerSlot"&gt;
      &lt;/slot&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is progress bar:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progress-bar-box {
    width: 100%;
    align: center;
  }
  
  li {
    list-style-type: none;
    float: left;
    width: 16.66%;
    position: relative;
    text-align: center;
    font-family: AEmb, Helvetica, Arial, sans-serif;
    font-size: 10px;
  }
  
  li:before {
    content: '';
    width: 10px;
    height: 10px;
    line-height: 30px;
    border: 2px solid #002f36;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
  }
  
  li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #002f36;
    top: 5px;
    left: -50%;
    z-index: -1;
  }
  
  li:first-child:after {
    content: none;
  }
  
  li.complete:before {
    border-color: #002f36;
    background-color: #002f36;
  }
  
  li.active:before {
    border-color: aqua;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="progress-bar-parent"&gt;
    &lt;ul class="progress-bar-box"&gt;
      &lt;li&gt; 1 &lt;/li&gt;
      &lt;li&gt; 2 &lt;/li&gt;
      &lt;li&gt; 3 &lt;/li&gt;
      &lt;li&gt; 4 &lt;/li&gt;
      &lt;li&gt; 5 &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>