Using --paper-item css variables may inadvertently affect default values when they don't apply

[govis]

Description

Setting paper-item attributes such as min-height via --paper-item css variable affects another not related paper-item default style.

Expected outcome

Item 2 height is 48px

Actual outcome

Item 2 height is 24px

Live Demo

https://jsbin.com/vokidarawa/edit?html,output

    class MyItem extends PolymerElement {

      static get template() {
        return html`
          <style>
            paper-item {
              background-color: azure;
            }
            :host([item-sizing='small']) {
                --paper-item: {
                    min-height: 32px;
                    font-size: 14px;
                    padding: 0;
                };
            }         
          </style>
        <paper-item>[[text]]</paper-item>
        `;
      }
      
      static get properties() { 
        return { 
          text: String,
          itemSizing: {
             type: String,
             value: 'small',
             reflectToAttribute: true
          }  
        }
      }   
    }

    customElements.define('my-item', MyItem);
  </script>
  
  <my-item text="Item 1"></my-item>
  <br>
  <my-item text="Item 2" item-sizing=""></my-item>

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10