simplesitedesigns

I should add, the css for the default shown one (in this case, “cpd”), does not get removed.

When I default them all hidden and apply css to show just the required div, the css for showing them gets excluded.

The HTML is contained in the page template file and as below.

    <div class="section section-levels bg-white-grey bg-white-tablet">
      <div id="level-shown" class="cpd" [class]="levelShown">
        <div class="contained grid grid-2">
          <div class="col tab-buttons">
            <div class="tab-button cpo" on="tap:AMP.setState({ levelShown: 'cpo' })">Button CPO</div>
            <div class="tab-button cpp" on="tap:AMP.setState({ levelShown: 'cpp' })">Button CPP</div>
            <div class="tab-button cpm" on="tap:AMP.setState({ levelShown: 'cpm' })">Button CPM</div>
            <div class="tab-button cpd" on="tap:AMP.setState({ levelShown: 'cpd' })">Button CPD</div>
            <div class="tab-button cpt" on="tap:AMP.setState({ levelShown: 'cpt' })">Button CPT</div>
          </div>

          <div class="col tab-section cpo">
            TAB CPO
          </div>

          <div class="col tab-section cpp">
            TAB CPP
          </div>

          <div class="col tab-section cpm">
            TAB CPM
          </div>

          <div class="col tab-section cpd">
            TAB CPD
          </div>

          <div class="col tab-section cpt">
            TAB CPT
          </div>
        </div>
      </div>
    </div>

I understand they are not meant to be removed – but they are getting removed.

A hacky way I resolved this was instead of using a css selector to hide all the elements and then showing the correct element based on the class set via bind, was to hide the elements using the css :not() selector as below. This appears to have prevented the tree shaker removing the rules.

#level-shown:not(.show-cpo) .col.tab.tab-cpo,
#level-shown:not(.show-cpp) .col.tab.tab-cpp,
#level-shown:not(.show-cpm) .col.tab.tab-cpm,
#level-shown:not(.show-cpd) .col.tab.tab-cpd,
#level-shown:not(.show-cpt) .col.tab.tab-cpt  {
  display: none;
}

Thanks @jrubinart, your solution is the only thing that worked for me too.