sky-element stocks demo: add splashes and highlights to menu items

sky/framework/sky-menu-item.sky

 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <import src="sky-element.sky" />
+<import src="material-element.sky" />
 <import src="sky-icon.sky" />
 
 <sky-element attributes="icon:string">
 <template>
   <style>
     :host {
       display: flex;
       align-items: center;
       height: 48px;
       -webkit-user-select: none;
     }
+    #background {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      flex: 1;
+    }
+    #background[highlight] {
+      background: rgba(153, 153, 153, 0.4);
+    }
     sky-icon {
       padding: 0px 16px;
     }
     #label {
       font-family: 'Roboto Medium', 'Helvetica';
       color: #212121;
       padding: 0px 16px;
       flex: 1;
     }
   </style>
-  <sky-icon size="24" />
-  <div id="label">
-    <content />
+  <div id="background">
+    <sky-icon size="24" />
+    <div id="label">
+      <content />
+    </div>
   </div>
 </template>
 <script>
 import "dart:sky";
 
 @Tagname('sky-menu-item')
-class SkyMenuItem extends SkyElement {
+class SkyMenuItem extends MaterialElement {
   SkyIcon _icon;
   Element _label;
 
+  SkyMenuItem() {
+    addEventListener('pointerdown', _handlePointerDown);
+    addEventListener('pointerup', _handlePointerUp);
+    addEventListener('pointercancel', _handlePointerUp);
+  }
+
   void shadowRootReady() {
     _icon = shadowRoot.querySelector('sky-icon');
     _icon.type = "${icon}_grey600";
   }
 
   void iconChanged(String oldValue, String newValue) {
     if (_icon != null)
       _icon.type = "${newValue}_grey600";
   }
+
+  void _handlePointerDown(Event event) {
+    shadowRoot.getElementById('background').setAttribute('highlight', '');
+  }
+
+  void _handlePointerUp(Event event) {
+    shadowRoot.getElementById('background').removeAttribute('highlight');
+  }
 }
 
 _init(script) => register(script, SkyMenuItem);
 </script>
 </sky-element>