<dom-if> interferes with justify-content: space-between

[andrey-git]

Description

Using <template is='dom-if'> in source code causes <dom-if> element to be put in resulting HTML (regardless of whether the condition is true or false).
If the parent element has justify-content: space-between; display: flex; then <dom-if> participates in element count for justification sake and the result looks broken.

This can be fixed by styling <dom-if> with display: none. Since this is a regression from Polymer 1.9, maybe the library can apply this automatically? I can't think of a use case where one wouldn't want display: none on the <dom-if>

Live Demo

http://jsbin.com/megukipana/1/edit?html,output

Steps to Reproduce

Example:

    <template>
      <style>
        .parent {
          border: 1px solid red;
          justify-content: space-between;
          width: 300px;
          display: flex;
        }
        .child {
          border: 1px solid green;
          width: 100px;
        }
      </style>
      <div class='parent'>
        <div class='child'>Child1</div>        
        <template is='dom-if' if='1'>
          <div class='child'>Child2</div>
        </template>
      </div>
    </template>

Expected Results

Child1 is to the left, Child2 is to the right.

Actual Results

Space to the right if Child2 caused by empty <dom-if>

Browsers Affected

• Chrome
• Firefox

Versions

• Polymer: v2.0
• webcomponents: vX.X.X

[TimvdLippe]

The reason it regressed in Polymer 1 vs 2 is that in Polymer 2 the <template is="dom-if"> is transformed into a <dom-if>. This means that it is an actual custom element and not inert, thus it participates in the CSS styling counts. Since is= was not implemented (see the long discussion in WICG/webcomponents#509 for more information), dom-if can't take advantage of the properties of template in 2.0.

To resolve this, we could maybe force styling on dom-if to resolve this:

:host {
  display: none;
}

I am not 100% sure this will work because of CSS priorities and specificity.

[andrey-git]

Setting

:host {
  display: none;
}

would be a good first step.
Probably the cases where user's CSS makes <dom-if> specifically displayed are rare.

[sorvell]

There's also a colspan issue in tables: http://jsbin.com/tuqadit/edit?html,output.

[equinusocio]

:host dom-if {
  display: none;
}