ModernUI development gotchas

I didn’t see a place to post the little gotchas that can turn into time eating development cycles so I thought I’d start it.

Today I had an issue with a screen that needed severe orthodontic work.

It was supposed to look like this:

As it turns out, the issue was an “empty” qp-fieldset that I was having an issue with. When I removed the comment tags, the screen rendered properly instead of every following field from being placed into that “empty” fieldset.
 

<qp-template id="formTPCommissionsSetup" name="17-17-14">
  <div id="colSetTPCommSetupA" slot="A">
    <qp-fieldset id="fldSetTPCommSetupA" view.bind="CurrentDocument">
      <!-- <field name="CurrentDocument.SalesPersonID_description"></field> -->
    </qp-fieldset>
  </div>
  <div id="colSetTPCommSetupB" slot="B">
    <qp-fieldset id="fldSetTPCommSetupB" view.bind="CurrentDocument">
      <field name="CurrentDocument.UsrTPCommRateClass"></field>
    </qp-fieldset>
  </div>
  <div id="colSetTPCommSetupC" slot="C">
    <qp-fieldset id="fldSetTPCommSetupC" view.bind="CurrentDocument">
      <field name="CurrentDocument.UsrTPCommStatus"></field>
    </qp-fieldset>
  </div>
</qp-template>