JSFiddle - React, Tailwind, and code Playground

HTML

<script>Polymer={dom:'shadow'}</script>
<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">

<dom-module id="x-foo">
  <template>
    <style>paper-checkbox { display: block; }</style>
    <div hidden$="[[emptyStr]]">emptyStr should be visible</div>
    <div hidden$="[[!emptyStr]]">!emptyStr should be hidden</div>
    <div hidden$="[[truthyStr]]">truthyStr should be hidden</div>
    <div hidden$="[[!truthyStr]]">!truthStr should be visible</div>
    <br>
    
    <paper-checkbox checked="[[emptyStr]]">emptyStr should not be checked</paper-checkbox>
    <paper-checkbox checked="[[!emptyStr]]">!emptyStr should be checked</paper-checkbox>
    <paper-checkbox checked="[[truthyStr]]">truthyStr should be checked</paper-checkbox>
    <paper-checkbox checked="[[!truthyStr]]">!truthyStr should not be checked</paper-checkbox>
    <br>
    
    <paper-checkbox checked$="[[emptyStr]]">emptyStr should not be checked</paper-checkbox>
    <paper-checkbox checked$="[[!emptyStr]]">!emptyStr should be checked</paper-checkbox>
    <paper-checkbox checked$="[[truthyStr]]">truthyStr should be checked</paper-checkbox>
    <paper-checkbox checked$="[[!truthyStr]]">!truthyStr should not be checked</paper-checkbox>
  </template>
</dom-module>

<x-foo></x-foo>

CSS

[hidden] {
  display: none !important;
}

JavaScript

Polymer({
  is: 'x-foo',
  properties: {
    emptyStr: {
      type: String,
      value: 'sdsdsdsdsa',
    },
    truthyStr: {
      type: String,
      value: 'truthy',
    },
  },
});