Element Events

I have a HTML canvas, I want to add elements.  Polymer elements have on-xxx event handlers built in.  The element class has defined events onXXX.  To correctly work the event must be labeled on-XxxXxx.

It turns out keypress events are a little harder to figure out than Mouse Events.

Variable Styling

Looking at options to dynamically control the styling.

Option 1.  Bind an attribute of an element to an attribute of the div.

<paper-toggle-button class="blue" checked="{{fadeSelected}}">

Then create a css rule that changes based on the value.
*[data-fade-selected="true"] {
  opacity: 0.3;
}

Option 2.  Call a function that changes a style attribute

For elements with change events, you can call a function on-change. In the function, you locate the id or class and then change the style.

$['drawerPanel'].style.display = 'none';