<div todo-app>
  <div class="row">
    <div class="columns">
      <!-- TodoVisibilityFilter -->
      <div todo-visibility-filter>
        <div class="top-bar">
          <div class="top-bar-left">
            <ul class="menu">
              <li class="menu-text">Show: </li>
              <li><a href="#">all</a></li>
              <li><a href="#">active</a></li>
              <li><a href="#">completed</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- @TODO fix with css -->
  <br>

  <div class="row">
    <div class="columns">
      <todo-editor
        placeholder="'What to get done?'"
        is-new-item="true"
        is-content-editable="true"></todo-editor>
    </div>
  </div>

  <div class="row">
    <div class="columns">
      <todo-list-container></todo-list-container>
    </div>
  </div>
</div>

<div class="todoApp">
  <div class="row">
    <div class="columns">
      <!-- TodoVisibilityFilter -->
      <div todo-visibility-filter>
        <div class="top-bar">
          <div class="top-bar-left">
            <ul class="menu">
              <li class="menu-text">Show: </li>
              <li><a href="#">all</a></li>
              <li><a href="#">active</a></li>
              <li><a href="#">completed</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- @TODO fix with css -->
  <br>

  <div class="row">
    <div class="columns">
      <todo-editor
        placeholder="'What to get done?'"
        is-new-item="true"
        is-content-editable="true"></todo-editor>
    </div>
  </div>

  <div class="row">
    <div class="columns">
      <todo-list-container></todo-list-container>
    </div>
  </div>
</div>

Use class instead of todo-app attribute
Use class instead of todo-app attribute
