plwalters

<template>
  <require from="./my-element"></require>
  <my-element my-prop="test ${message}"></my-element>
</template>
 

plwalters

<template>
  <input type="text" value.bind="address.line1" />
</template>

plwalters

<template>
  <select value.bind="val" if.bind="opts && !val">
    <option repeat.for="opt of opts" model.bind="opt">${opt.firstName}</option>
  </select>
  <div if.bind="!opts || val">
    <span>${val.firstName}</span>
    <button click.delegate="clearVal()" if.bind="val">Clear</button>
  </div>
  <button click.delegate="getOpts()">Get</button>
  <template with.bind="val.address">

plwalters

<template>
  <h1>Dialog Repro</h1>
  <button click.delegate="submit()">Open Dialog</button>
</template>

plwalters

<template>
  <require from='./records'></require>
  <require from='./record-form'></require>
  
  <div class="container-fluid">
    <div class="row mt-1">
      <div class="col-xs-12">
        <p class="lead text-muted">${heading}</p>
      </div>
    </div>

plwalters

<template>
  <template repeat.for="app of apps" show.bind="selectedApp === app">
    ${app.name}
  </template>
</template>

plwalters

<template>
  <button click.delegate="prompt()">open dialog</button>

<br><br>
  (app [inline]) inner data:<br>
  <div repeat.for="s of outer.inner">${s.name}</div> 
</template>

plwalters

<template>
  <require from="./customel"></require>
  <customel attribute="0"></customel>
  <customel attribute="2"></customel>
</template>

plwalters

<template>
  <ul>
    <li repeat.for="person of people" click.delegate="changeColor(person, $event)" style="background-color: ${person.color}">
    ${person.name}
    <div repeat.for="item of items" click.delegate="changeColor(item, $event)" style="color: ${item.color}">
      ${item.checked}
      <input type="checkbox" click.delegate="stopPropagation($event)"/>
    </div>
  </li>
  </ul>

plwalters

<template>
  <require from="./my-custom-element"></require>
  <my-custom-element>Hey</my-custom-element>
</template>