From e69602e2c33b0f364451630ea05011fe7d1426b1 Mon Sep 17 00:00:00 2001
From: Scott Miles <sjmiles@google.com>
Date: Fri, 30 Nov 2012 17:07:50 -0800
Subject: [PATCH 1/4] refactored desugar/extend code, implement bindDelegates

---
 src/g-component.html | 167 +++++++++++++++++++++++--------------------
 1 file changed, 91 insertions(+), 76 deletions(-)

diff --git a/src/g-component.html b/src/g-component.html
index b9b001dd37..e4ce406dc5 100644
--- a/src/g-component.html
+++ b/src/g-component.html
@@ -6,7 +6,7 @@
 <element name="g-component">
   <script>
     // FOUC prevent, if user sets opacity 0 on body
-    
+
     window.addEventListener("WebComponentsReady", function() {
       document.body.style.opacity = 1;
     });
@@ -19,12 +19,12 @@
       PROPERTY_CHANGED_SUFFIX: "Changed",
       CUSTOM_EVENT_PREFIX: "on-",
       DELEGATES_DIRECTIVE: "bind",
-      BINDING_OUT_SUFFIX: "Output",
-      BINDING_IN_SUFFIX: "Input"
+      DELEGATE_OUT_SUFFIX: "Output",
+      DELEGATE_IN_SUFFIX: "Input"
     };
 
     // decorate HTMLElementElement with toolkit API
-    
+
     HTMLElementElement.prototype.component = component;
 
     // entry point for declarative component definition
@@ -46,20 +46,21 @@
       // desugar lifecycle definition into a public prototype
       var prototype = desugar(lifecycle, this.name, this.extendsName);
       // publish definitions from attributes attributes
-      publishAttributes(attributes[conventions.ATTRIBUTES_ATTRIBUTE], 
+      publishAttributes(attributes[conventions.ATTRIBUTES_ATTRIBUTE],
           prototype);
       // install our public interface
       this.generatedConstructor.prototype = prototype;
       // TODO(sjmiles): get clarity on whether 'prototype' can be a chain
       //   (we are careful *not* to generate a chain)
     };
-    
+
     // ultimate base class for Toolkit Components
 
-    // note $ used as name prefix to prevent collision with reserved words, 
+    // note $ used as name prefix to prevent collision with reserved words,
     // e.g. $super for super (also default, interface, etc.)
 
     var Base = {
+      //$super: function() ... see implementation below
       ready: function() {
       },
       asyncMethod: function(inMethod, inArgs, inTimeout) {
@@ -125,47 +126,46 @@
           publish($protected, p, $protected.exports);
         });
       }
-    };    
+    };
 
     //
     // OO sugaring
     //
-    
+
     // build component prototype from element definition
-    
+
     var desugar = function(inLifecycle, inName, inExtendsName) {
-      // inherit protected API from a cached prototype or ProtectedBase
-      var base = registry[inExtendsName] || ProtectedBase;
       // build prototype that extends base
-      var prototype = extend(base, inLifecycle);
-      // cache and return desugared prototype
-      return registry[inName] = prototype;
-    };
-    
-    var ProtectedBase = {$protected: Base};
-    HTMLElementElement.prototype.ProtectedBase = ProtectedBase;
-      
-    // it's convenient to keep track of our own components 
+      var prototype = extend(inName, inExtendsName, inLifecycle);
+      // return desugared prototype
+      return prototype;
+    };
+
+    // it's convenient to keep track of our own components
     // for protected inheritance
-    
+
     var registry = {};
-    
+
     // produce a prototype from inLifecycle which extends inBase
-    
-    var extend = function(inBase, inLifecycle) {
+
+    var PublicBase = {$protected: Base};
+
+    var extend = function(inName, inExtendsName, inLifecycle) {
+       // inherit protected API from a cached prototype or ProtectedBase
+      var base = registry[inExtendsName] || PublicBase;
       // reuse inLifecycle as the protected prototype to avoid copying
       var $protected = inLifecycle || {};
+      // chain to inBase's protected prototype
+      $protected.__proto__ = base.$protected;
       // published properties to prototype and prototype.exports
       publishProperties($protected);
-      // chain to inBase's protected prototype
-      $protected.__proto__ = inBase.$protected;
       // we must return the public prototype
       var $public = $protected.exports;
       // store our protected prototype so we can instance it
       // when we instance the public prototype
       $public.$protected = $protected;
-      // return generated public prototype
-      return $public;
+      // cache and return extended prototype
+      return registry[inName] = $public;
     };
 
     // TODO(sjmiles): for-in loops below possibly not x-platform safe,
@@ -181,13 +181,13 @@
       }
       // ... and on our exports
       inPrototype.exports = {};
-      for (var n in inPrototype.publish) {
+      for (var n in inPrototype[conventions.PUBLISH_DIRECTIVE]) {
         publish(inPrototype, n, inPrototype.exports);
       }
       // return the configured prototype
       return inPrototype;
     };
-    
+
     // copy property 'name' from src to obj
 
     var copyProperty = function(name, src, obj) {
@@ -203,7 +203,7 @@
       }
     };
 
-    // copy all properties (including get/set pairs) from 
+    // copy all properties (including get/set pairs) from
     // inProps (et al) to inObj
 
     var mixin = function(inObj, inProps/*, inMoreProps, ...*/) {
@@ -257,7 +257,7 @@
       var nextSuper = function(inProto, inName, inCaller) {
         // look for an inherited prototype that implements inName
         var proto = inProto;
-        while (proto && 
+        while (proto &&
             (!proto.hasOwnProperty(inName) || proto[inName] == inCaller)) {
           proto = proto.__proto__;
         }
@@ -267,7 +267,7 @@
       var memoizeSuper = function(inMethod, inName, inProto) {
         //console.log('$super: memoizing super');
         // find and cache next prototype containing inName
-        // we need the prototype so we can another lookup 
+        // we need the prototype so we can another lookup
         // from here
         inMethod._super = nextSuper(inProto, inName, inMethod);
         if (inMethod._super) {
@@ -289,7 +289,7 @@
         // since we are thunking a method call, performance is important
         // here: memoize all lookups, once memoized the fast path
         // calls no helper functions
-        // 
+        //
         // find the caller (can't be 'strict' here)
         //var caller = arguments.callee.caller;
         //console.log("super.caller good?", (this.$super.caller == caller));
@@ -329,19 +329,22 @@
     })();
 
     // instance lifecycle
- 
+
     //
     // per-root initialization
     //
-    
+
     var initializeRoot = function(inRoot/*, inLifecycle*/) {
-      // we only want to do this per-instance, but it has to be 
-      // the first thing we do and we have no other entry point
+      // we only want to do these tasks per-instance, but they must
+      // be done before root initializations, and we have no other entry point
       if (!this.hasOwnProperty("$protected")) {
         // instance our protected interface
         this.$protected = Object.create(this.$protected);
         // point our protected instance at our node instance
         this.$protected.node = this;
+        // process 'bind' directive to build a local model delegate, as needed
+        // TODO(sjmiles): move more of this to desugar-time
+        bindDelegates.call(this.$protected);
       }
       // map nodes to ids
       establishNodeReferences.call(this.$protected, inRoot);
@@ -353,10 +356,21 @@
       */
       // model binding fixups for root, if it exists
       if (inRoot) {
-        // ShadowDOM: inRoot.model doesn't propagate, that propagation is 
-        // rooted in light DOM; simulate by installing a local model in 
+        // ShadowDOM: inRoot.model doesn't propagate, that propagation is
+        // rooted in light DOM; simulate by installing a local model in
         // each immediate child
-        injectScope(inRoot.childNodes, this.$protected, this.localModelDelegate);
+        injectScope(inRoot.insertions || inRoot.childNodes, this.$protected,
+            this.$protected.localModelDelegate);
+        // TODO(sjmiles): under shim, we can't rely on model cascade because
+        // we have played tricks on the DOM Tree
+        // TODO(sjmiles): make polymorphic instead of conditional
+        if (ShadowDOM.shim) {
+          var comps = ShadowDOM.localQueryAll(inRoot, "[is]");
+          comps.forEach(function(c) {
+            injectScope(c.lightDOM.childNodes, this.$protected,
+                this.$protected.localModelDelegate);
+          }, this);
+        }
         // parse and apply model binding markup in DOM
         bindModel(inRoot.childNodes);
         // TODO(sjmiles): nodes created ex-post facto need similar treatment
@@ -364,7 +378,7 @@
       // parse custom declarative event syntax out of DOM
       bindAllCustomEvents(inRoot);
     };
-    
+
     // locate nodes with id and store references to them in this.$ hash
 
     var establishNodeReferences = function(inRoot) {
@@ -380,7 +394,7 @@
     };
 
     // helper for ShadowDOM shim compatibility
-    
+
     var deref = function(inNode) {
       // return the real node if inNode is a placeholder (Changeling)
       return inNode && (inNode.baby || inNode);
@@ -416,19 +430,19 @@
     bindModel.mustache = /\{\{([^{}]*)}}/g;
 
     // manually cascade a model and a delegate
-    // 
+    //
     // MDV uses node.model for binding, where node.model automatically
     // cascades down the DOM tree
-    // 
+    //
     // we need separate model for LightDOM vs ShadowDOM, so we
-    // short-circuit the MDV cascade and manually inject localModel 
+    // short-circuit the MDV cascade and manually inject localModel
     // (and localModelDelegate) into all child nodes
-        
+
     var injectScope = function(inNodes, inLocalModel, inLocalModelDelegate) {
       Array.prototype.forEach.call(inNodes, function(n) {
         n.model = inLocalModel;
         n.modelDelegate = inLocalModelDelegate;
-        // if there is a baby, do it too
+        // if there is a baby, inject to it too
         n = n.baby;
         if (n) {
           n.model = inLocalModel;
@@ -442,7 +456,7 @@
     // TODO(sjmiles):
     // we wanted to simply look for nearest ancestor
     // with a 'controller' property to be WLOG
-    // but we need to honor ShadowDOM, so we had to 
+    // but we need to honor ShadowDOM, so we had to
     // customize this search
 
     var findController = function(inNode) {
@@ -465,14 +479,14 @@
     };
 
     // generic event delegate
-    // 
+    //
     // find controller nearest the event.currentTarget
-    // and delegate event to that controller's 'inHandlerName' 
+    // and delegate event to that controller's 'inHandlerName'
     // method, if it has one
-    // 
+    //
     // can function declaratively, e.g. onclick="_('method')"
     // but we bind event listeners here directly
-    
+
     var _ = function(inHandlerName) {
       var controller = findController(event.currentTarget);
       // TODO(sjmiles): have 'controller' dispatch this method itself
@@ -517,7 +531,7 @@
       if (inNode.childNodes) {
         for (var i=0, c; c=deref(inNode.childNodes[i]); i++) {
           if (c.tagName !== 'SHADOW') {
-            bindAllCustomEvents(c);
+            _bindAllCustomEvents(c);
           }
         }
       }
@@ -541,12 +555,12 @@
         eventsObserver(inNode);
       }
     };
-    
+
     //
     // per-instance initialization
     // TODO(sjmiles): performance sensitive
     //
-    
+
     var initializeInstance = function(inAttributes) {
       // bind events as directed in handlers attribute
       bindEvents.call(this.$protected, inAttributes.handlers);
@@ -557,7 +571,7 @@
       // initialize protected controller
       this.$protected.ready();
     };
-    
+
     // event bindings
     //
     // <element handlers="onclick: click, onkeypress: keypress, ..."
@@ -619,9 +633,9 @@
         propertyChanged.call(this, c.name, c.old);
       }, this);
     };
-    
+
     // helpers
-    
+
     var invoke = function(inMethod, inArgs) {
       if (this[inMethod]) {
         return this[inMethod].apply(this, inArgs || []);
@@ -644,25 +658,26 @@
     // in inNode using MDV delegates
     //
 
-    var bindDelegates = function(inDelegates) {
-      if (inDelegates) {
-        var node = this;
+    var bindDelegates = function() {
+      var delegates = this[conventions.DELEGATES_DIRECTIVE]
+      if (delegates) {
+        var delegate = this;
         this.localModelDelegate = function(inBinding) {
-          if (inBinding in inDelegates) {
-            var dependencies = inDelegates[inBinding] || [inBinding];
+          if (inBinding in delegates) {
+            var dependencies = delegates[inBinding] || [inBinding];
             if (typeof dependencies == 'string') {
               dependencies = [dependencies];
             }
-            //console.log("bindDelegates:", inBinding, dependencies, node);
-            var inMethod = inBinding + conventions.BINDING_IN_SUFFIX;
-            var outMethod = inBinding + conventions.BINDING_OUT_SUFFIX;
+            console.log("bindDelegates:", inBinding, dependencies, this);
+            var inMethod = inBinding + conventions.DELEGATE_IN_SUFFIX;
+            var outMethod = inBinding + conventions.DELEGATE_OUT_SUFFIX;
             return [
               dependencies,
               function(/*inValues*/) {
-                return delegateBinding(node, outMethod, arguments);
+                return delegateBinding.call(delegate, outMethod, arguments);
               },
               function(/*inValues*/) {
-                return delegateBinding(node, inMethod, arguments);
+                return delegateBinding.call(delegate, inMethod, arguments);
               }
             ];
           }
@@ -670,10 +685,10 @@
       }
     };
 
-    var delegateBinding = function(inNode, inDelegate, inValues) {
+    var delegateBinding = function(inDelegate, inValues) {
       // late binding to named delegate function
-      var fn = inNode[inDelegate];
-      var value = fn ? fn.apply(inNode, inValues) : undefined;
+      var fn = this[inDelegate];
+      var value = fn ? fn.apply(this, inValues) : undefined;
       // whenever undefined, echo back first input value
       if (value === undefined) {
         value = inValues[0];
@@ -695,7 +710,7 @@
         }
       }
     };
-    
+
     var deserializeValue = function(inValue) {
       switch (inValue) {
         case "":
@@ -708,13 +723,13 @@
         }
         return isNaN(inValue) ? inValue : parseFloat(inValue);
     };
-    
+
     var attributeChanged = function(inName) {
       // if this represents a value we are interested in
       var name = propertyForAttribute.call(this, inName);
       if (name) {
         //console.log('attributeChanged:', name, '(as "' + inName + '") in', this);
-        this.setProperty(name, 
+        this.setProperty(name,
           deserializeValue(this.node.getAttribute(inName)));
       }
     };

From a5837acdd713cfeccd11a656ababaef3e29563c0 Mon Sep 17 00:00:00 2001
From: Scott Miles <sjmiles@google.com>
Date: Fri, 30 Nov 2012 18:45:25 -0800
Subject: [PATCH 2/4] remove comment

---
 src/g-component.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/g-component.html b/src/g-component.html
index e4ce406dc5..12aee10857 100644
--- a/src/g-component.html
+++ b/src/g-component.html
@@ -668,7 +668,6 @@
             if (typeof dependencies == 'string') {
               dependencies = [dependencies];
             }
-            console.log("bindDelegates:", inBinding, dependencies, this);
             var inMethod = inBinding + conventions.DELEGATE_IN_SUFFIX;
             var outMethod = inBinding + conventions.DELEGATE_OUT_SUFFIX;
             return [

From 38e41a6a08f8fabb465f09d1c8a046d786e70413 Mon Sep 17 00:00:00 2001
From: Scott Miles <sjmiles@google.com>
Date: Mon, 17 Dec 2012 14:05:10 -0800
Subject: [PATCH 3/4] update some logging

---
 src/g-component.html | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/g-component.html b/src/g-component.html
index 12aee10857..f4314111f5 100644
--- a/src/g-component.html
+++ b/src/g-component.html
@@ -265,7 +265,6 @@
       };
 
       var memoizeSuper = function(inMethod, inName, inProto) {
-        //console.log('$super: memoizing super');
         // find and cache next prototype containing inName
         // we need the prototype so we can another lookup
         // from here
@@ -290,9 +289,7 @@
         // here: memoize all lookups, once memoized the fast path
         // calls no helper functions
         //
-        // find the caller (can't be 'strict' here)
-        //var caller = arguments.callee.caller;
-        //console.log("super.caller good?", (this.$super.caller == caller));
+        // find the caller (can't be strict because of 'caller')
         var caller = this.$super.caller;
         // memoization for 'name of method'
         var nom = caller._nom;
@@ -313,7 +310,7 @@
         var _super = caller._super;
         if (!_super) {
           // if _super is falsey, there is no super implementation
-          console.warn('called $super(' + nom + ') where there is none');
+          console.warn('called $super(' + nom + ') where there is no super implementation');
         } else {
           // our super function
           var fn = _super[nom];

From 0dd09a1e37f1918d155111f2b716a5046de70dec Mon Sep 17 00:00:00 2001
From: Scott Miles <sjmiles@google.com>
Date: Fri, 4 Jan 2013 17:00:40 -0800
Subject: [PATCH 4/4] Conflicts: 	workbench/menu-button.html 
 workbench/toolbar.html

---
 src/g-component.html                          | 1491 +++++++++--------
 src/g-icon.html                               |   10 +-
 src/g-menu.html                               |    2 +-
 src/g-selection.html                          |   14 +-
 src/g-selector.html                           |   18 +-
 src/g-tabs.html                               |    5 +-
 src/g-togglebutton.html                       |    4 +-
 .../g-flow-panel-transition.html              |    2 +-
 workbench/icon-button.html                    |    5 +-
 workbench/icon.html                           |    1 +
 workbench/menu-button.html                    |    8 +-
 workbench/menu.html                           |    1 +
 workbench/overlay.html                        |    1 +
 workbench/page.html                           |    3 +-
 workbench/panels.html                         |    5 +-
 workbench/ratings.html                        |    3 +-
 workbench/selection.html                      |    1 +
 workbench/selector.html                       |    2 +-
 workbench/tabs.html                           |    5 +-
 workbench/togglebutton.html                   |    5 +-
 workbench/toolbar.html                        |   10 +-
 21 files changed, 852 insertions(+), 744 deletions(-)

diff --git a/src/g-component.html b/src/g-component.html
index f4314111f5..a653fb04ad 100644
--- a/src/g-component.html
+++ b/src/g-component.html
@@ -1,756 +1,831 @@
-<!--
-Copyright 2012 The Toolkitchen Authors. All rights reserved.
-Use of this source code is governed by a BSD-style
-license that can be found in the LICENSE file.
--->
-<element name="g-component">
-  <script>
-    // FOUC prevent, if user sets opacity 0 on body
-
-    window.addEventListener("WebComponentsReady", function() {
-      document.body.style.opacity = 1;
+<element name="g-component">
+<script>
+
+  // FOUC prevent (to opt-in set opacity: 0 on body)
+
+  window.addEventListener('WebComponentsReady', function() {
+    document.body.style.webkitTransition = "opacity 0.4s";
+    document.body.style.opacity = 1;
+  });
+
+  // log control
+  
+  var log = {
+    ready: 1,
+    events: 0,
+    data: 0
+  };
+  log = window.logFlags || log;
+  
+  // decorate HTMLElementElement with toolkit API
+
+  HTMLElementElement.prototype.component = component;
+
+  // entry point for declarative component definition
+
+  function component(inDefinition) {
+    // ensure non-null definition
+    var definition = inDefinition || {};
+    // use information from HTMLElementElement attributes
+    var attributes = this.element.attributes;
+    // install boilerplate callbacks
+    this.lifecycle({
+      shadowRootCreated: function(inRoot) {
+        initializeRoot.call(this, inRoot, definition);
+      },
+      created: function(/*inSuper*/) {
+        instanceReady.call(this);
+      }
     });
-
-    // conventional names for automation
-
-    var conventions = {
-      ATTRIBUTES_ATTRIBUTE: "attributes",
-      PUBLISH_DIRECTIVE: "publish",
-      PROPERTY_CHANGED_SUFFIX: "Changed",
-      CUSTOM_EVENT_PREFIX: "on-",
-      DELEGATES_DIRECTIVE: "bind",
-      DELEGATE_OUT_SUFFIX: "Output",
-      DELEGATE_IN_SUFFIX: "Input"
-    };
-
-    // decorate HTMLElementElement with toolkit API
-
-    HTMLElementElement.prototype.component = component;
-
-    // entry point for declarative component definition
-
-    function component(inLifecycle) {
-      // make sure we have an object
-      var lifecycle = inLifecycle || {};
-      // prepare callbacks
-      this.lifecycle({
-        shadowRootCreated: function(inRoot) {
-          initializeRoot.call(this, inRoot, lifecycle);
-        },
-        created: function(/*inSuper*/) {
-          initializeInstance.call(this, attributes);
-        }
+    // parse declared attributes into imperative form
+    publishAttributes(attributes[conventions.ATTRIBUTES_ATTRIBUTE],
+      definition);
+    // parse declared on-* delegates into imperative form
+    parseHostEvents(attributes, definition);
+    // construct a prototype from our sugared definition
+    var prototype = desugar(definition, this.extendsName);
+    // register this prototype with it's tag name
+    register(this.name, prototype);
+    // install our prototype
+    this.generatedConstructor.prototype = prototype;
+  };
+
+  function initializeRoot(inRoot) {
+    // we only want to do somes tasks per-instance, but they must
+    // be done before root initializations, and we have no other
+    // entry point, so we have to multiplex this method
+    if (!this.hasOwnProperty('$protected')) {
+      instanceCreated.call(this);
+    }
+    if (inRoot) {
+      rootCreated.call(this, inRoot);
+    }
+  };
+
+  // component lifecycle
+
+  function instanceCreated() {
+    // instance our protected interface
+    this.$protected = Object.create(this.$protected);
+    // point our protected instance at our node instance
+    this.$protected.node = this;
+  };
+
+  function rootCreated(inRoot) {
+    // set shadow-root model
+    inRoot.model = this.$protected;
+    // parse and apply model binding markup in DOM
+    bindModel.call(this, localChildNodes(inRoot));
+    // map id's to nodes, for nodes with id's
+    marshalNodeReferences.call(this.$protected, inRoot);
+    // accumulate events of interest
+    // TODO(sjmiles): ideally on native we set up listeners directly on inRoot,
+    // under shim inRoot does not participate in event bubbling
+    this.__events = accumulateEvents(inRoot, this.__events);
+    //console.log('[%s]:', this.localName, this.__events);
+  };
+
+  function instanceReady() {
+    // delegate host events
+    bindHostEvents.call(this.$protected);
+    // TODO(sjmiles): ideally delegated events are set up per root
+    // not on the host node (see above)
+    bindAccumulatedEvents(this, this.__events);
+    // initialize our Observable aspect
+    Observable.call(this.$protected);
+    takeAttributes.call(this.$protected);
+    // call ready hook
+    this.$protected.ready();
+    // force dirty check
+    Model.dirtyCheck();
+    log.ready && console.log('[%s#%s] ready', this.localName, this.id || '');
+  };
+
+  // helper functions
+
+  var forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach);
+
+  // helper for ShadowDOM shim compatibility
+  var deref = function(inNode) {
+    // return the real node if inNode is a placeholder (Changeling)
+    return inNode && (inNode.baby || inNode);
+  };
+
+  var publishAttributes = function(inAttributes, inDefinition) {
+    if (inAttributes) {
+      var pd = conventions.PUBLISH_DIRECTIVE;
+      // need a publish block to extend
+      var pub = inDefinition[pd] = inDefinition[pd] || {};
+      // use the value of the attributes-attribute
+      var a$ = inAttributes.value;
+      // attributes='a b c' or attributes='a,b,c'
+      var names = a$.split(a$.indexOf(',') >= 0 ? ',' : ' ');
+      // record each name for publishing
+      names.forEach(function(p) {
+        pub[p.trim()] = null;
       });
-      // use markup directives from HTMLElementElement attributes
-      var attributes = this.element.attributes;
-      // desugar lifecycle definition into a public prototype
-      var prototype = desugar(lifecycle, this.name, this.extendsName);
-      // publish definitions from attributes attributes
-      publishAttributes(attributes[conventions.ATTRIBUTES_ATTRIBUTE],
-          prototype);
-      // install our public interface
-      this.generatedConstructor.prototype = prototype;
-      // TODO(sjmiles): get clarity on whether 'prototype' can be a chain
-      //   (we are careful *not* to generate a chain)
-    };
+    }
+  };
 
-    // ultimate base class for Toolkit Components
+  var parseHostEvents = function(inAttributes, inDefinition) {
+    inDefinition.eventDelegates = mixin(inDefinition.eventDelegates,
+      parseEvents(inAttributes));
+  };
 
-    // note $ used as name prefix to prevent collision with reserved words,
-    // e.g. $super for super (also default, interface, etc.)
-
-    var Base = {
-      //$super: function() ... see implementation below
-      ready: function() {
-      },
-      asyncMethod: function(inMethod, inArgs, inTimeout) {
-        var args = (inArgs && inArgs.length) || [inArgs];
-        return window.setTimeout(function() {
-          this[inMethod].apply(this, args);
-        }.bind(this), inTimeout || 0);
-      },
-      setProperty: function(inName, inValue) {
-        var old = this[inName];
-        this[inName] = inValue;
-        if (old !== inValue) {
-          var fn = inName + "Changed";
-          if (this[fn]) {
-            this[fn](old);
-          }
-        }
-      },
-      fireEvent: function(inType, inDetail) {
-        this.node.dispatchEvent(
-          new CustomEvent(inType, {bubbles: true, detail: inDetail})
-        );
-      },
-      findDistributedTarget: function(inTarget, inNodes) {
-        // find first ancestor of target (including itself) that
-        // is in inNodes, if any
-        var n = inTarget;
-        while (n && n != this) {
-          var i = Array.prototype.indexOf.call(inNodes, n);
-          if (i >= 0) {
-            return i;
-          }
-          n = n.parentNode;
+  var parseEvents = function(inAttributes) {
+    var events = {};
+    if (inAttributes) {
+      var prefix = conventions.CUSTOM_EVENT_PREFIX;
+      for (var i=0, a; a=inAttributes[i]; i++) {
+        if (a.name.slice(0, prefix.length) == prefix) {
+          events[a.name.slice(prefix.length)] = a.value;
         }
       }
-    };
-
-    // support properties declared via 'attributes' directive
-    // <element ... attributes="<attr1 attr2...">
-    // by copying declared property names to inLifecycle's published block
-
-    var publishAttributes = function(inAttributesAttribute, inPrototype) {
-      // We used to record these values on to the publish
-      // block before desugaring, to reuse the existing publish
-      // machinery, but this code operates after desugaring,
-      // poking the necessary objects directly.
-      // We publish manually to avoid improper type-inferencing
-      // by not setting any value for this name in the prototype.
-      if (inAttributesAttribute) {
-        // need a published block to extend
-        var pd = conventions.PUBLISH_DIRECTIVE;
-        var $protected = inPrototype.$protected;
-        var published = $protected[pd] = $protected[pd] || {};
-        // use the value of the attributes-attribute
-        var a$ = inAttributesAttribute.value;
-        // attributes="a b c" or attributes="a,b,c"
-        var names = a$.split(a$.indexOf(',') >= 0 ? ',' : ' ');
-        names.forEach(function(p) {
-          p = p.trim();
-          // record as published
-          published[p] = null;
-          // bind to exports
-          publish($protected, p, $protected.exports);
-        });
-      }
-    };
-
+    }
+    return events;
+  };
+
+  // conventional names for automation
+
+  var conventions = {
+    ATTRIBUTES_ATTRIBUTE: 'attributes',
+    PUBLISH_DIRECTIVE: 'publish',
+    PROPERTY_CHANGED_SUFFIX: 'Changed',
+    CUSTOM_EVENT_PREFIX: 'on-',
+    DELEGATES_DIRECTIVE: 'bind',
+    DELEGATE_OUT_SUFFIX: 'Output',
+    DELEGATE_IN_SUFFIX: 'Input'
+  };
+
+  //
+  // OOP abstractions
+  //
+
+  // it's convenient to keep track of our own components
+  // for protected inheritance
+
+  function desugar(inDefinition, inExtendsName) {
+    // prototype to extend
+    var base = registry[inExtendsName] || BasePrototype;
+    // extend prototype
+    var prototype = extend(inDefinition, base);
+    // publish public properties
+    publish(prototype);
     //
-    // OO sugaring
+    // more desugaring
     //
-
-    // build component prototype from element definition
-
-    var desugar = function(inLifecycle, inName, inExtendsName) {
-      // build prototype that extends base
-      var prototype = extend(inName, inExtendsName, inLifecycle);
-      // return desugared prototype
-      return prototype;
-    };
-
-    // it's convenient to keep track of our own components
-    // for protected inheritance
-
-    var registry = {};
-
-    // produce a prototype from inLifecycle which extends inBase
-
-    var PublicBase = {$protected: Base};
-
-    var extend = function(inName, inExtendsName, inLifecycle) {
-       // inherit protected API from a cached prototype or ProtectedBase
-      var base = registry[inExtendsName] || PublicBase;
-      // reuse inLifecycle as the protected prototype to avoid copying
-      var $protected = inLifecycle || {};
-      // chain to inBase's protected prototype
-      $protected.__proto__ = base.$protected;
-      // published properties to prototype and prototype.exports
-      publishProperties($protected);
-      // we must return the public prototype
-      var $public = $protected.exports;
-      // store our protected prototype so we can instance it
-      // when we instance the public prototype
-      $public.$protected = $protected;
-      // cache and return extended prototype
-      return registry[inName] = $public;
-    };
-
-    // TODO(sjmiles): for-in loops below possibly not x-platform safe,
-    // add 'hasOwnProperty' check?
-
-    var publishProperties = function(inPrototype) {
-      // 'publish' means to express on our prototype...
-      for (var n in inPrototype.publish) {
-        // prototype takes precendent
-        if (!(inPrototype.hasOwnProperty(n))) {
-          copyProperty(n, inPrototype.publish, inPrototype);
+    // return extended prototype
+    return prototype;
+  };
+
+  // it's convenient (but probably redundant) to maintain
+  // an internal registry
+
+  var registry = {};
+
+  function register(inName, inPrototype) {
+    // cache prototype
+    return registry[inName] = inPrototype;
+  };
+
+  // produce a prototype from inDefinition which extends inBase
+
+  function extend(inDefinition, inBase) {
+    var prototype = Object.create(inBase);
+    // use definition directly to avoid a mixin step
+    // (caveats: can't reuse definitions, relies on __proto__)
+    prototype.$protected = inDefinition;
+    prototype.$protected.__proto__ = inBase.$protected;
+    return prototype;
+  };
+
+  // publishing is a sugaring mechanism where properties
+  // specified in a 'publish' block are forwarded to the
+  // public interface via get/set pairs and bound functions
+  function publish(inPrototype) {
+    var $protected = inPrototype.$protected;
+    // publish properties via 'publish' directive
+    var pd = conventions.PUBLISH_DIRECTIVE;
+    if ($protected.hasOwnProperty(pd)) {
+      var $public = $protected[pd];
+      // install public properties on $protected
+      for (var n in $public) {
+        // do not overwrite default values already (directly) on prototype
+        if (!$protected.hasOwnProperty(n)) {
+          copyProperty(n, $public, $protected)
         }
       }
-      // ... and on our exports
-      inPrototype.exports = {};
-      for (var n in inPrototype[conventions.PUBLISH_DIRECTIVE]) {
-        publish(inPrototype, n, inPrototype.exports);
+      // publish public properties to master prototype
+      publishProperties($public, $protected, inPrototype);
+    }
+  }
+
+  // copy property 'name' from src to obj
+  var copyProperty = function(name, src, obj) {
+    var g = src.__lookupGetter__(name);
+    if (g) {
+      obj.__defineGetter__(name, g);
+    } else {
+      obj[name] = src[name];
+    }
+    var s = src.__lookupSetter__(name);
+    if (s) {
+      obj.__defineSetter__(name, s);
+    }
+  };
+
+  // copy all properties from inProps (et al) to inObj
+  var mixin = function(inObj/*, inProps, inMoreProps, ...*/) {
+    var obj = inObj || {};
+    var p$ = Array.prototype.slice.call(arguments, 1);
+    for (var i=0, p; (p=p$[i]); i++) {
+      for (var n in p) {
+        copyProperty(n, p, obj);
       }
-      // return the configured prototype
-      return inPrototype;
-    };
-
-    // copy property 'name' from src to obj
-
-    var copyProperty = function(name, src, obj) {
-      var g = src.__lookupGetter__(name);
-      if (g) {
-        obj.__defineGetter__(name, g);
-      } else {
-        obj[name] = src[name];
-      }
-      var s = src.__lookupSetter__(name);
-      if (s) {
-        obj.__defineSetter__(name, s);
+    }
+    return obj;
+  };
+
+  // publish properties identified by inProperties from inSource to inTarget
+  function publishProperties(inProperties, inSource, inTarget) {
+    for (var n in inProperties) {
+      publishProperty(inSource, n, inTarget);
+    }
+  };
+
+  // make inSource[inName] available on inTarget as a getter/setter
+  // pair or a method bound to this.$protected
+  function publishProperty(inSource, inName, inTarget) {
+    // access property value (unless it is a getter itself)
+    var value = (!inSource.__lookupGetter__(inName)) && inSource[inName];
+    if (typeof value == 'function') {
+      inTarget[inName] = function() {
+        return value.apply(this.$protected, arguments);
       }
-    };
-
-    // copy all properties (including get/set pairs) from
-    // inProps (et al) to inObj
-
-    var mixin = function(inObj, inProps/*, inMoreProps, ...*/) {
-      var obj = inObj || {};
-      var p$ = Array.prototype.slice.call(arguments, 1);
-      for (var i=0, gs, p; (p=p$[i]); i++) {
-        for (var n in p) {
-          copyProperty(n, p, obj);
+    } else {
+      // TODO(sjmiles): can't remember why I needed to install
+      // the property before defining get/set
+      // if it turns out we do need this, beware of overrides
+      // where there is already a setter and there are side effects
+      //inTarget[inName] = null;
+      Object.defineProperty(inTarget, inName, {
+        get: function() {
+          return this.$protected[inName];
+        },
+        set: function(inValue) {
+          this.$protected.setProperty(inName, inValue);
         }
+      });
+    }
+  };
+
+  //
+  // Base API
+  //
+
+  // data observer abstraction
+  // this implementation uses MDV polyfill
+
+  var Observable = function() {
+    api.activate.call(this);
+  };
+
+  var watch_blacklist = {$: 1, node: 1, eventDelegates: 1, publish: 1};
+
+  var api = Observable.api = {
+    activate: function () {
+      var watched = {};
+      Model.observePropertySet(this, function(inChange) {
+        api.propertySetChanged.call(this, inChange, watched);
+      }.bind(this));
+      api.watchAll.call(this, watched);
+    },
+    propertySetChanged: function(inChange, inWatched) {
+      if (inChange.mutation == 'add') {
+        log.data && console.log('[%s] propertySetChanged: adding watch for [%s]', this.node.localName, inChange.propertyName);
+        api.addWatch.call(this, inChange.propertyName, inWatched);
+        this.propertyChanged(inChange.propertyName);
+      }
+    },
+    watchable: function(inName, inWatched) {
+      return (inName[0] != '_')
+          && !(inName in Object.prototype)
+          && !inWatched[inName]
+          && (typeof this[inName] != 'function')
+          && !this.__lookupGetter__(inName)
+          && !watch_blacklist[inName];
+    },
+    addWatch: function(inName, inWatched) {
+      if (api.watchable.call(this, inName, inWatched)) {
+        log.data && console.log('[' + this.node.localName + '] watching [' + inName + ']');
+        inWatched[inName] = true;
+        Model.observe(this, inName, function(inNew, inOld) {
+          this.propertyChanged(inName, inOld);
+        }.bind(this));
+      }
+    },
+    watchAll: function(inWatched) {
+      for (var n in this) {
+        api.addWatch.call(this, n, inWatched);
+      }
+    }
+  };
+
+  Observable.prototype = {
+    propertyChanged: function(inName, inOldValue) {
+      log.data && console.log('[%s#%s] propertyChanged: [%s] now [%s] was [%s]', this.node.localName, this.node.id || '', inName, this[inName], inOldValue);
+      var fn = inName + 'Changed';
+      if (this[fn] && !Observable._squelch) {
+        this[fn](inOldValue);
+      }
+    },
+    setProperty: function(inName, inValue, inSilent) {
+      Observable._squelch = inSilent;
+      try {
+        this[inName] = inValue;
+      } finally {
+        Observable._squelch = false;
+      }
+    }
+  };
+
+  // super call implementation
+
+  var $super = (function() {
+    // TODO(sjmiles): will not work with mixins because
+    //    the memoization strategy assumes
+    //    each function exists on only one prototype chain
+    //    (i.e. we use the function object for memoizing)
+
+    var nextSuper = function(inProto, inName, inCaller) {
+      // look for an inherited prototype that implements inName
+      var proto = inProto;
+      while (proto &&
+          (!proto.hasOwnProperty(inName) || proto[inName] == inCaller)) {
+        proto = proto.__proto__;
+      }
+      return proto;
+    };
+
+    var memoizeSuper = function(inMethod, inName, inProto) {
+      // find and cache next prototype containing inName
+      // we need the prototype so we can another lookup
+      // from here
+      inMethod._super = nextSuper(inProto, inName, inMethod);
+      if (inMethod._super) {
+        // _super is a prototype, the actual method is _super[inName]
+        // tag super method with it's name for further lookups
+        inMethod._super[inName]._nom = inName;
       }
-      return obj;
     };
 
-    // make inSource[inName] available via inTarget
-    //
-    // used to elevate inName from protected to public
-
-    var publish = function(inSource, inName, inTarget) {
-      // access property value (unless it is a getter itself)
-      var value = (!inSource.__lookupGetter__(inName)) && inSource[inName];
-      // delegate function-valued properties to this.$protected
-      if (typeof value == "function") {
-        inTarget[inName] = function() {
-          return value.apply(this.$protected, arguments);
+    var nameInThis = function(inValue) {
+      for (var n in this) {
+        if (this[n] == inValue) {
+          return n;
         }
-      } else {
-        // make the property enumerable
-        // TODO(sjmiles): use defineProperty to do this
-        //inTarget[inName] = null;
-        // delegate other properties to this.$protected
-        Object.defineProperty(inTarget, inName, {
-          get: function() {
-            return this.$protected[inName];
-          },
-          set: function(inValue) {
-            this.$protected.setProperty(inName, inValue);
-          },
-          enumerable: true
-        });
       }
     };
 
-    // super impl
-
-    Base.$super = (function() {
-      // TODO(sjmiles): will not work with mixins because
-      //    the memoization strategy assumes
-      //    each function exists on only one prototype chain
-      //    (i.e. we use the function object for memoizing)
-
-      var nextSuper = function(inProto, inName, inCaller) {
-        // look for an inherited prototype that implements inName
-        var proto = inProto;
-        while (proto &&
-            (!proto.hasOwnProperty(inName) || proto[inName] == inCaller)) {
-          proto = proto.__proto__;
-        }
-        return proto;
-      };
-
-      var memoizeSuper = function(inMethod, inName, inProto) {
-        // find and cache next prototype containing inName
-        // we need the prototype so we can another lookup
-        // from here
-        inMethod._super = nextSuper(inProto, inName, inMethod);
-        if (inMethod._super) {
-          // _super is a prototype, the actual method is _super[inName]
-          // tag super method with it's name for further lookups
-          inMethod._super[inName]._nom = inName;
-        }
-      };
-
-      var nameInThis = function(inValue) {
-        for (var n in this) {
-          if (this[n] == inValue) {
-            return n;
-          }
-        }
-      };
-
-      return function(inArgs) {
-        // since we are thunking a method call, performance is important
-        // here: memoize all lookups, once memoized the fast path
-        // calls no helper functions
-        //
-        // find the caller (can't be strict because of 'caller')
-        var caller = this.$super.caller;
-        // memoization for 'name of method'
-        var nom = caller._nom;
+    return function(inArgs) {
+      // since we are thunking a method call, performance is important
+      // here: memoize all lookups, once memoized the fast path
+      // calls no helper functions
+      //
+      // find the caller (can't be strict because of 'caller')
+      var caller = this.$super.caller;
+      // memoization for 'name of method'
+      var nom = caller._nom;
+      if (!nom) {
+        // once per call chain
+        nom = caller._nom = nameInThis.call(this, caller);
         if (!nom) {
-          // once per call chain
-          nom = caller._nom = nameInThis.call(this, caller);
-          if (!nom) {
-            console.warn('called super() on a method not in "this"');
-            return;
-          }
+          console.warn('called super() on a method not in "this"');
+          return;
         }
-        // super prototype is either cached or we have to find it
-        // by searching __proto__ (at the 'top')
-        if (!('_super' in caller)) {
-          memoizeSuper(caller, nom, this.__proto__);
-        }
-        // memoized next implementation prototype
-        var _super = caller._super;
-        if (!_super) {
-          // if _super is falsey, there is no super implementation
-          console.warn('called $super(' + nom + ') where there is no super implementation');
-        } else {
-          // our super function
-          var fn = _super[nom];
-          // memoize information so 'fn' can call 'super'
-          if (!('_super' in fn)) {
-            memoizeSuper(fn, nom, _super);
-          }
-          // invoke the inherited method
-          // if 'fn' is not function valued, this will throw
-          return fn.apply(this, inArgs || []);
-        }
-      };
-    })();
-
-    // instance lifecycle
-
-    //
-    // per-root initialization
-    //
-
-    var initializeRoot = function(inRoot/*, inLifecycle*/) {
-      // we only want to do these tasks per-instance, but they must
-      // be done before root initializations, and we have no other entry point
-      if (!this.hasOwnProperty("$protected")) {
-        // instance our protected interface
-        this.$protected = Object.create(this.$protected);
-        // point our protected instance at our node instance
-        this.$protected.node = this;
-        // process 'bind' directive to build a local model delegate, as needed
-        // TODO(sjmiles): move more of this to desugar-time
-        bindDelegates.call(this.$protected);
       }
-      // map nodes to ids
-      establishNodeReferences.call(this.$protected, inRoot);
-      /*
-      // invoke user's initialization
-      if (inLifecycle.shadowRootCreated) {
-        inLifecycle.shadowRootCreated.call(this, inRoot);
+      // super prototype is either cached or we have to find it
+      // by searching __proto__ (at the 'top')
+      if (!('_super' in caller)) {
+        memoizeSuper(caller, nom, this.__proto__);
       }
-      */
-      // model binding fixups for root, if it exists
-      if (inRoot) {
-        // ShadowDOM: inRoot.model doesn't propagate, that propagation is
-        // rooted in light DOM; simulate by installing a local model in
-        // each immediate child
-        injectScope(inRoot.insertions || inRoot.childNodes, this.$protected,
-            this.$protected.localModelDelegate);
-        // TODO(sjmiles): under shim, we can't rely on model cascade because
-        // we have played tricks on the DOM Tree
-        // TODO(sjmiles): make polymorphic instead of conditional
-        if (ShadowDOM.shim) {
-          var comps = ShadowDOM.localQueryAll(inRoot, "[is]");
-          comps.forEach(function(c) {
-            injectScope(c.lightDOM.childNodes, this.$protected,
-                this.$protected.localModelDelegate);
-          }, this);
+      // memoized next implementation prototype
+      var _super = caller._super;
+      if (!_super) {
+        // if _super is falsey, there is no super implementation
+        console.warn('called $super(' + nom + ') where there is no super implementation');
+      } else {
+        // our super function
+        var fn = _super[nom];
+        // memoize information so 'fn' can call 'super'
+        if (!('_super' in fn)) {
+          memoizeSuper(fn, nom, _super);
         }
-        // parse and apply model binding markup in DOM
-        bindModel(inRoot.childNodes);
-        // TODO(sjmiles): nodes created ex-post facto need similar treatment
+        // invoke the inherited method
+        // if 'fn' is not function valued, this will throw
+        return fn.apply(this, inArgs || []);
       }
-      // parse custom declarative event syntax out of DOM
-      bindAllCustomEvents(inRoot);
     };
-
-    // locate nodes with id and store references to them in this.$ hash
-
-    var establishNodeReferences = function(inRoot) {
-      // establish $ instance variable
-      this.$ = this.$ || {};
-      // populate $ from nodes with ID from the LOCAL tree
-      if (inRoot) {
-        var nodes = ShadowDOM.localQueryAll(inRoot, "[id]");
-        Array.prototype.forEach.call(nodes, function(n) {
-          this.$[n.id] = deref(n);
-        }, this);
+  })();
+
+  // (protected) Base API
+
+  var ProtectedBase = {
+    ready: function() {
+    },
+    $super: $super,
+    asyncMethod: function(inMethod, inArgs, inTimeout) {
+      var args = (inArgs && inArgs.length) ? inArgs : [inArgs];
+      return window.setTimeout(function() {
+        this[inMethod].apply(this, args);
+      }.bind(this), inTimeout || 0);
+    },
+    dispatch: function(inMethodName, inArguments) {
+        // TODO(sjmiles): have 'controller' dispatch this method itself
+      if (this[inMethodName]) {
+        this[inMethodName].apply(this, inArguments);
       }
-    };
-
-    // helper for ShadowDOM shim compatibility
-
-    var deref = function(inNode) {
-      // return the real node if inNode is a placeholder (Changeling)
-      return inNode && (inNode.baby || inNode);
-    };
-
-    // model bindings
-    //
-    // convert {{macro}} strings in markup into MDV bindings
-    //
-    // MDV usually does this work but requires an additional
-    // nested template and functions asynchronously
-
-    var bindModel = function(inNodes) {
-      var bindMustache = function(inN, inNameOrValue, inValue) {
-        if ((inValue || inNameOrValue).search(bindModel.mustache) >= 0) {
-          inN.addBinding(inNameOrValue, inValue);
-        }
-      };
-      Array.prototype.forEach.call(inNodes, function(n) {
-        n = deref(n);
-        if (n.nodeName == "#text") {
-          // text-node binding
-          bindMustache(n, n.textContent);
-        } else if (n.attributes && n.tagName !== "TEMPLATE") {
-          // attribute bindings
-          Array.prototype.forEach.call(n.attributes, function(a) {
-            bindMustache(n, a.name, a.value);
-          });
-          bindModel(n.childNodes);
-        }
-      });
-    };
-    bindModel.mustache = /\{\{([^{}]*)}}/g;
-
-    // manually cascade a model and a delegate
-    //
-    // MDV uses node.model for binding, where node.model automatically
-    // cascades down the DOM tree
-    //
-    // we need separate model for LightDOM vs ShadowDOM, so we
-    // short-circuit the MDV cascade and manually inject localModel
-    // (and localModelDelegate) into all child nodes
-
-    var injectScope = function(inNodes, inLocalModel, inLocalModelDelegate) {
-      Array.prototype.forEach.call(inNodes, function(n) {
-        n.model = inLocalModel;
-        n.modelDelegate = inLocalModelDelegate;
-        // if there is a baby, inject to it too
-        n = n.baby;
-        if (n) {
-          n.model = inLocalModel;
-          n.modelDelegate = inLocalModelDelegate;
+    },
+    send: function(inType, inDetail) {
+      log.events && console.log('[%s]: sending [%s]', this.node.localName, inType);
+      this.node.dispatchEvent(
+        new CustomEvent(inType, {bubbles: true, detail: inDetail})
+      );
+    },
+    asend: function(/*inType, inDetail*/) {
+      this.asyncMethod("send", arguments);
+    },
+    findDistributedTarget: function(inTarget, inNodes) {
+      // find first ancestor of target (including itself) that
+      // is in inNodes, if any
+      var n = inTarget;
+      while (n && n != this) {
+        var i = Array.prototype.indexOf.call(inNodes, n);
+        if (i >= 0) {
+          return i;
         }
-      });
-    };
-
-    // experimental delegating declarative event handler
-
-    // TODO(sjmiles):
-    // we wanted to simply look for nearest ancestor
-    // with a 'controller' property to be WLOG
-    // but we need to honor ShadowDOM, so we had to
-    // customize this search
-
-    var findController = function(inNode) {
-      // find the shadow root that contains inNode
-      var n = inNode.changeling || inNode;
-      while (n.parentNode && n.tagName !== 'SHADOW-ROOT') {
         n = n.parentNode;
-        if (n.lightDOM) {
-          n = n.host;
-        }
-        if (n.changeling) {
-          n = n.changeling;
-        }
       }
-      return n.host;
-      // TODO(sjmiles):
-      // the WLOG version uses a 'controller' concept
-      // but here, n.host.controller === n.host
-      //return n.host.controller;
-    };
-
-    // generic event delegate
-    //
-    // find controller nearest the event.currentTarget
-    // and delegate event to that controller's 'inHandlerName'
-    // method, if it has one
-    //
-    // can function declaratively, e.g. onclick="_('method')"
-    // but we bind event listeners here directly
-
-    var _ = function(inHandlerName) {
-      var controller = findController(event.currentTarget);
-      // TODO(sjmiles): have 'controller' dispatch this method itself
-      if (controller && controller.$protected && controller.$protected[inHandlerName]) {
-        controller.$protected[inHandlerName](event, event.detail);
+    }
+  };
+
+  // TODO(sjmiles): deprecated
+  
+  ProtectedBase.fireEvent = ProtectedBase.send;
+  
+  // use ProtectedBase directly to avoid a mixin step
+  // (caveat: relies on __proto__)
+
+  ProtectedBase.__proto__ = Object.create(Observable.prototype);
+
+  var BasePrototype = {
+    // base $protected implementation is Observable
+    $protected: ProtectedBase
+  };
+
+  // ShadowDOM tree walking
+  // TODO(sjmiles): should be provided by ShadowDOM object
+
+  // TODO(sjmiles): make unit tests and stabilize the tree walking concepts
+  //    once and for all
+  var localChildNodes = function(inNode) {
+    return (inNode.tagName == 'CONTENT' && [])
+      || (inNode.lightDOM && inNode.lightDOM.childNodes) 
+      || inNode.insertions
+      || inNode.childNodes
+      ;
+  };
+  
+  var localParentNode = function(inNode) {
+    var node = inNode.host || inNode.parentNode;
+    if (node) {
+      if (node.isLightDOM) {
+        node = node.host;
       }
-    };
-
-    // automagic event mapping
-    //
-    // locate attributes of the form <prefix><eventName>="<methodName>" and
-    // map <eventName> events to method <methodName> to inNode's controller
-
-    var bindCustomEvent = function(inNode, inEventName, inHandler) {
-      // only attach one listener per inEventName, so we can
-      // rebind without accumulating listeners
-      var h = inNode.__athandlers = inNode.__athandlers || {};
-      if (!h[inEventName]) {
-        var fn = function() {
-          _(inHandler);
-        };
-        h[inEventName] = fn;
-        inNode.addEventListener(inEventName, fn);
+      node = node.changeling || node;
+    }
+    return node;
+  };
+  
+  //
+  // reference marshalling
+  //
+
+  // locate nodes with id and store references to them in this.$ hash
+  var marshalNodeReferences = function(inRoot) {
+    // establish $ instance variable
+    this.$ = this.$ || {};
+    // populate $ from nodes with ID from the LOCAL tree
+    if (inRoot) {
+      var nodes = ShadowDOM.localQueryAll(inRoot, "[id]");
+      forEach(nodes, function(n) {
+        this.$[n.id] = deref(n);
+      }, this);
+    }
+  };
+
+  //
+  // model bindings
+  //
+  // convert {{macro}} strings in markup into MDV bindings
+  //
+  // MDV usually does this work but requires an additional
+  // nested template and functions asynchronously
+
+  function bindModel(inNodes) {
+    log.data && console.group("[%s] bindModel", this.localName);
+    _bindModel.call(this, inNodes);
+    log.data && console.groupEnd();
+  };
+
+  function _bindModel(inNodes) {
+    forEach(inNodes, bindNodeModel, this);
+  };
+
+  function bindNodeModel(inNode) {
+    var n = deref(inNode);
+    // node's binding model is this component's protected object
+    n.model = this.$protected;
+    if (n.nodeName == '#text') {
+      // text-node binding
+      bindMustache.call(this, n, n.textContent);
+    } else if (n.tagName !== 'TEMPLATE') {
+      // scan for bindings in attributes
+      if (n.attributes) {
+        forEach(n.attributes, function(a) {
+          bindMustache.call(this, n, a.name, a.value);
+        }, this);
       }
-    };
-
-    var bindCustomEvents = function(inNode) {
-      var prefix = conventions.CUSTOM_EVENT_PREFIX;
-      var a$ = inNode.attributes;
-      if (a$) {
-        for (var i=0, a; a=a$[i]; i++) {
-          if (a.name.slice(0, prefix.length) == prefix) {
-            bindCustomEvent(inNode, a.name.slice(prefix.length), a.value);
-          }
+      // walking the LOCAL tree
+      _bindModel.call(this, localChildNodes(n));
+    }
+  };
+
+  function bindMustache(inNode, inName, inValue) {
+    // ad-hoc component test
+    if (inNode.$protected) {
+      var m = inValue.match(bindMustache.pattern);
+      if (m) {
+        var source = m[1];
+        var target = propertyForAttribute.call(inNode.$protected, inName);
+        if (source && target) {
+          bindProperties(this, source, inNode, target);
         }
       }
-    };
-
-    // TODO(sjmiles): improper tree walking (?)
-    var _bindAllCustomEvents = function(inNode) {
-      bindCustomEvents(inNode);
-      if (inNode.childNodes) {
-        for (var i=0, c; c=deref(inNode.childNodes[i]); i++) {
-          if (c.tagName !== 'SHADOW') {
-            _bindAllCustomEvents(c);
-          }
-        }
+    } else {
+      if ((inValue || inName).search(bindMustache.pattern) >= 0) {
+        inNode.addBinding(inName, inValue);
+        log.data && console.log('[%s] bindMustache: [%s] to [%s]%s', 
+            this.localName, inValue || inName, (inNode.localName || '#text'), 
+            inValue ? '.[' + inValue + ']' : '');
       }
-    };
-
-    // register a MutationObserver on inNode so we can bind
-    // custom events when the DOM subtree changes
-    var eventsObserver = function(inNode) {
-      // TODO(sjmiles): optimize so we only bind new nodes
-      new WebKitMutationObserver(_bindAllCustomEvents.bind(this, inNode))
-        .observe(inNode, {
-          childList: true,
-          subTree: true
-        });
-    };
-
-    var bindAllCustomEvents = function(inNode) {
-      if (inNode) {
-        _bindAllCustomEvents(inNode);
-        // we need this in particular for custom events in iterated templates
-        eventsObserver(inNode);
+    }
+  };
+
+  bindMustache.pattern = /\{\{([^{}]*)}}/;
+
+  // property binding extensions to MDV
+  
+	function bindProperties(inA, inPropA, inB, inPropB) {
+     log.data && console.log('[%s] bindProperties [%s] to [%s].[%s]', inA.localName, inPropA, inB.localName, inPropB);
+    _bindProperties(inA.$protected, inPropA, inB.$protected, inPropB);
+  };
+
+  function _getProp(parts, create, context) {
+		var obj = context || window;
+		for(var i=0, p; obj && (p=parts[i]); i++){
+			obj = (p in obj ? obj[p] : (create ? obj[p]={} : undefined));
+		}
+		return obj;
+	};
+
+  // TODO(sjmiles): parameters crufty for the usage below, simplify
+  
+	function setProperty(name, value, context) {
+		var parts = name.split("."), p = parts.pop(), 
+        obj = _getProp(parts, true, context);
+		return obj && p ? (obj[p]=value) : undefined;
+	};
+
+  function getProperty(name, create, context) {
+		return _getProp(name.split("."), create, context);
+	};
+  
+ 
+  function _bindProperties(inA, inPropA, inB, inPropB) {
+    setProperty(inPropB, getProperty(inPropA, false, inA), inB);
+    Model.observe(inA, inPropA, function(inNew) {
+      // intermediate changes are observed, but are irrelevant
+      // we only propagate when the value stabilizes
+      if (getProperty(inPropA, false, inA) === inNew) {
+        log.data && console.log('_bindProperties: propagating', inA.node.localName, inPropA, '(' + inNew + ')', 'to', inB.node.localName, inPropB);
+        setProperty(inPropB, inNew, inB);
       }
-    };
-
-    //
-    // per-instance initialization
-    // TODO(sjmiles): performance sensitive
-    //
-
-    var initializeInstance = function(inAttributes) {
-      // bind events as directed in handlers attribute
-      bindEvents.call(this.$protected, inAttributes.handlers);
-      // process parsed attributes as inputs (the initial mutation)
-      takeAttributes.call(this.$protected);
-      // watch changes to attributes
-      this.$protected.attributeObserver = new AttributeObserver(this);
-      // initialize protected controller
-      this.$protected.ready();
-    };
-
-    // event bindings
-    //
-    // <element handlers="onclick: click, onkeypress: keypress, ..."
-    //
-    // create listeners on instances that map named events to
-    // methods on the instance
-
-    var bindEvents = function(inEvents) {
-      if (inEvents) {
-        var bindables = inEvents.value.split(",");
-        bindables.forEach(function(e) {
-          // {eventName: handlerName} pairs
-          var pair = e.split(":");
-          var event = pair[0].trim();
-          var handler = pair[1].trim();
-          // listener is weakly-bound to handler
-          this.node.addEventListener(event, function() {
-            var fn = this[handler];
-            if (fn) {
-              fn.apply(this, arguments);
-            }
-          }.bind(this));
-        }, this);
+    });
+    Model.observe(inB, inPropB, function(inNew) {
+      // intermediate changes are observed, but are irrelevant
+      // we only propagate when the value stabilizes
+      if (getProperty(inPropB, false, inB) === inNew) {
+        log.data && console.log('_bindProperties: propagating', inB.node.localName, inPropB, '(' + inNew + ')', 'to', inA.node.localName, inPropA);
+        setProperty(inPropA, inNew, inA);
       }
-    };
-
-    // propagate initial attribute values into properties as a batch,
-    // invoking side-effects only after all values are set
-
-    var takeAttributes = function() {
-      // accumulate a record of all non-default attribute values
-      // so we can invoke side-effects after all values are initialized
-      var changed = [];
-      // for each attribute
-      Array.prototype.forEach.call(this.node.attributes, function(a) {
-        // try to match this attribute to a property (attributess are
-        // all lower-case, so this is case-insensitive search)
-        var name = propertyForAttribute.call(this, a.name);
-        if (name) {
-          // filter out 'mustached' values, these are to be
-          // replaced with bound-data and are not yet values
-          // themselves
-          if (a.value.search(bindModel.mustache) >= 0) {
-            return;
-          }
-          // deserialize Boolean or Number values from attribute
-          var value = deserializeValue(a.value);
-          // only act if the value has changed
-          if (this[name] !== value) {
-            // track values that differ from property values
-            changed.push({name: name, old: this[name]});
-            // install new value (no side-effects on direct assignment)
-            this[name] = value;
-          }
+    });
+  };
+
+  //
+  // attribute processing
+  //
+
+  // propagate initial attribute values into properties as a batch,
+  // invoking side-effects only after all values are set
+
+  function takeAttributes() {
+    // accumulate a record of all non-default attribute values
+    // so we can invoke side-effects after all values are initialized
+    //var changed = [];
+    // for each attribute
+    forEach(this.node.attributes, function(a) {
+      // try to match this attribute to a property (attributess are
+      // all lower-case, so this is case-insensitive search)
+      var name = propertyForAttribute.call(this, a.name);
+      if (name) {
+        // filter out 'mustached' values, these are to be
+        // replaced with bound-data and are not yet values
+        // themselves
+        if (a.value.search(bindMustache.pattern) >= 0) {
+          return;
+        }
+        // deserialize Boolean or Number values from attribute
+        var value = deserializeValue(a.value);
+        //console.log('takeAttributes: ', a.name, a.value);
+        // only act if the value has changed
+        if (this[name] !== value) {
+          // track values that differ from property values
+          //changed.push({name: name, old: this[name]});
+          // install new value (has side-effects)
+          this[name] = value;
         }
-      }, this);
-      // batch invoke side-effects
-      changed.forEach(function(c) {
-        propertyChanged.call(this, c.name, c.old);
-      }, this);
-    };
-
-    // helpers
-
-    var invoke = function(inMethod, inArgs) {
-      if (this[inMethod]) {
-        return this[inMethod].apply(this, inArgs || []);
       }
-    };
-
-    var appendChangedSuffix = function(inName) {
-      return inName + conventions.PROPERTY_CHANGED_SUFFIX;
-    };
-
-    var propertyChanged = function(inName, inOld) {
-      invoke.call(this, appendChangedSuffix(inName), [inOld]);
-    };
-
-    // data bindings
-    //
-    // <name>: ['<path dependency>', '<path dependency>'...]
-    //
-    // bind MDV macros of the form {{<name>}} to formatting methods
-    // in inNode using MDV delegates
-    //
-
-    var bindDelegates = function() {
-      var delegates = this[conventions.DELEGATES_DIRECTIVE]
-      if (delegates) {
-        var delegate = this;
-        this.localModelDelegate = function(inBinding) {
-          if (inBinding in delegates) {
-            var dependencies = delegates[inBinding] || [inBinding];
-            if (typeof dependencies == 'string') {
-              dependencies = [dependencies];
-            }
-            var inMethod = inBinding + conventions.DELEGATE_IN_SUFFIX;
-            var outMethod = inBinding + conventions.DELEGATE_OUT_SUFFIX;
-            return [
-              dependencies,
-              function(/*inValues*/) {
-                return delegateBinding.call(delegate, outMethod, arguments);
-              },
-              function(/*inValues*/) {
-                return delegateBinding.call(delegate, inMethod, arguments);
-              }
-            ];
-          }
-        };
+    }, this);
+    //Model.dirtyCheck();
+    /*
+    // batch invoke side-effects
+    changed.forEach(function(c) {
+      propertyChanged.call(this, c.name, c.old);
+    }, this);
+    */
+  };
+
+  // find the public property identified by inAttributeName
+  function propertyForAttribute(inAttributeName) {
+    for (var n in this[conventions.PUBLISH_DIRECTIVE]) {
+      if (n.toLowerCase() == inAttributeName) {
+        return n;
       }
-    };
-
-    var delegateBinding = function(inDelegate, inValues) {
-      // late binding to named delegate function
-      var fn = this[inDelegate];
-      var value = fn ? fn.apply(this, inValues) : undefined;
-      // whenever undefined, echo back first input value
-      if (value === undefined) {
-        value = inValues[0];
+    }
+  };
+
+  function deserializeValue(inValue) {
+    switch (inValue) {
+      case '':
+      case 'true':
+        return true;
+      case 'false':
+        return false;
+      case '\\false':
+        return 'false';
       }
-      //console.log(inDelegate, inValues, value);
-      return value;
-    };
-
-    var deref = function(inNode) {
-      return inNode && (inNode.baby || inNode);
-    };
-
-    // attribute mutations
-
-    var propertyForAttribute = function(inAttributeName) {
-      for (var n in this[conventions.PUBLISH_DIRECTIVE]) {
-        if (n.toLowerCase() == inAttributeName) {
-          return n;
+      return isNaN(inValue) ? inValue : parseFloat(inValue);
+  }
+
+  //
+  // automagic event mapping
+  //
+
+  var prefix = conventions.CUSTOM_EVENT_PREFIX;
+
+  // experimental delegating declarative event handler
+
+  // TODO(sjmiles):
+  // we wanted to simply look for nearest ancestor
+  // with a 'controller' property to be WLOG
+  // but we need to honor ShadowDOM, so we had to
+  // customize this search
+
+  var findController = function(inNode) {
+    // find the shadow root that contains inNode
+    var n = inNode.changeling || inNode;
+    while (n.parentNode && n.tagName !== 'SHADOW-ROOT') {
+      n = localParentNode(n);
+    }
+    return n.host;
+  };
+
+  // generic event delegate
+  //
+  // find controller nearest the event.currentTarget
+  // and delegate event to that controller's 'inHandlerName'
+  // method, if it has one
+  //
+  // can function declaratively, e.g. onclick="_('method')"
+  // but we bind event listeners here directly
+
+  var dispatch = function(inNode, inHandlerName, inArguments) {
+    if (inNode && inNode.$protected) {
+      inNode.$protected.dispatch(inHandlerName, inArguments);
+    }
+  };
+
+  // automagic host-event binding
+
+  var bindHostEvents = function() {
+    // TODO(sjmiles): must walk the prototype tree
+    // to bind the superset of eventDelegate maps
+    var p = this;
+    while (p) {
+      if (p.hasOwnProperty('eventDelegates')) {
+        for (var n in p.eventDelegates) {
+          bindHostEvent(this.node, n, p.eventDelegates[n]);
         }
       }
-    };
-
-    var deserializeValue = function(inValue) {
-      switch (inValue) {
-        case "":
-        case "true":
-          return true;
-        case "false":
-          return false;
-        case "\\false":
-          return "false";
+      p = p.__proto__;
+    }
+  };
+
+  var bindHostEvent = function(inNode, inEventName, inHandler) {
+    var fn = function() {
+      dispatch(inNode, inHandler, [event, event.detail]);
+    };
+    // TODO(sjmiles): sadly permanent
+    inNode.addEventListener(inEventName, fn);
+    log.events && console.log('[%s] bindHostEvent: [%s] to [%s]', inNode.localName, inEventName, inHandler);
+  };
+
+  //
+  // new experimental late bound events
+  //
+
+  var accumulateEvents = function(inNode, inEvents) {
+    var events = inEvents || {};
+    accumulateNodeEvents(inNode, events);
+    accumulateChildEvents(inNode, events);
+    if (inNode.tagName == 'TEMPLATE' && inNode.content) {
+      accumulateChildEvents(inNode.content, events);
+    }
+    return events;
+  };
+
+  var accumulateNodeEvents = function(inNode, inEvents) {
+    var a$ = inNode.attributes;
+    if (a$) {
+      for (var i=0, a; a=a$[i]; i++) {
+        if (a.name.slice(0, prefix.length) == prefix) {
+          inEvents[a.name.slice(prefix.length)] = 1;
         }
-        return isNaN(inValue) ? inValue : parseFloat(inValue);
-    };
-
-    var attributeChanged = function(inName) {
-      // if this represents a value we are interested in
-      var name = propertyForAttribute.call(this, inName);
-      if (name) {
-        //console.log('attributeChanged:', name, '(as "' + inName + '") in', this);
-        this.setProperty(name,
-          deserializeValue(this.node.getAttribute(inName)));
       }
-    };
-
-    var handleMutations = function(inMxns) {
-      //console.log("handleMutations");
-      // summarize mutations
-      var names = {};
-      inMxns.forEach(function(inMxn) {
-        names[inMxn.attributeName] = 1;
-      });
-      // call attributeChanged for each unique name in inMxns
-      for (var name in names) {
-        attributeChanged.call(this, name);
+    }
+  };
+
+  var accumulateChildEvents = function(inNode, inEvents) {
+    var cn$ = localChildNodes(inNode);
+    if (cn$) {
+      for (var i=0, n; n=deref(cn$[i]); i++) {
+        accumulateEvents(n, inEvents);
       }
-    };
-
-    var AttributeObserver = function(inNode) {
-      var observer = new WebKitMutationObserver(
-          handleMutations.bind(inNode.$protected));
-      observer.observe(inNode, {
-        attributes: true,
-        attributeOldValue: true
-      });
-      return observer;
-    };
-  </script>
+    }
+  };
+
+  function bindAccumulatedEvents(inNode, inEvents) {
+    var fn = __.bind(inNode);
+    for (var n in inEvents) {
+      log.events && console.log('[%s] bindAccumulatedEvents: addEventListener("%s", __)', inNode.localName, n);
+      inNode.addEventListener(n, fn);
+    }
+  };
+  
+  function __(inEvent) {
+    var on = prefix + inEvent.type;
+    log.events && console.group("[%s]: __ [%s]", this.localName, on);
+    var t = inEvent.target;
+    while (t && t != this) {
+      t = deref(t);
+      log.events && console.dir(t);
+      if (t.attributes) {
+        var h = t.getAttribute(on);
+        if (h) {
+          var c = findController(t);
+          log.events && console.log('found handler [%s] for controller', h, c);
+          if (c == this) {
+            log.events && console.log('invoking [%s]', h);
+            if (this.$protected[h]) {
+              this.$protected[h](inEvent, inEvent.detail, t);
+            }
+          }
+        }
+      }
+      t = t.parentNode;
+    }
+    log.events && console.groupEnd();
+  };
+</script>
 </element>
\ No newline at end of file
diff --git a/src/g-icon.html b/src/g-icon.html
index f2339622a0..ca6995828a 100644
--- a/src/g-icon.html
+++ b/src/g-icon.html
@@ -16,7 +16,7 @@
         opacity: 0.8;
       }
 
-      .icon {
+      #icon {
         width: 21px;
         height: 21px;
         cursor: pointer;
@@ -24,9 +24,13 @@
         background-size: contain;
       }
     </style>
-    <div class="icon" style="background-image:url({{src}})"></div>
+    <div id="icon" style="background-image:url({{src}})"></div>
   </template>
-  <script>
+  <script>    
+    /**
+     * g-icon is a 21x21 glyph expressed as a background-image.
+     * @module g-icon
+     */
     this.component();
   </script>
 </element>
diff --git a/src/g-menu.html b/src/g-menu.html
index 0bcd6f898b..0a6149f015 100644
--- a/src/g-menu.html
+++ b/src/g-menu.html
@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-menu" extends="g-selector" handlers="click: clickHandler">
+<element name="g-menu" extends="g-selector">
   <link rel="components" href="g-selector.html">
   <template>
     <style>
diff --git a/src/g-selection.html b/src/g-selection.html
index 25bf5c351c..fdd37dc3f9 100644
--- a/src/g-selection.html
+++ b/src/g-selection.html
@@ -5,11 +5,13 @@
 -->
 <element name="g-selection" attributes="multi">
   <link rel="components" href="g-component.html">
-  <style>
-    @host {
-      display: none;
-    }
-  </style>
+  <template>
+    <style>
+      @host {
+        display: none !important;
+      }
+    </style>
+  </template>
   <script>
     this.component({
       publish: {
@@ -33,7 +35,7 @@
           }
           // TODO(sjmiles): consider replacing with summary
           // notifications (asynchronous job)
-          this.fireEvent("select", {isSelected: inIsSelected, item: inItem});
+          this.asend("select", {isSelected: inIsSelected, item: inItem});
         },
         select: function(inItem) {
           if (this.multi) {
diff --git a/src/g-selector.html b/src/g-selector.html
index a182bf819c..3ca4224bcf 100644
--- a/src/g-selector.html
+++ b/src/g-selector.html
@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-selector" attributes="selected multi" handlers="click: clickHandler">
+<element name="g-selector" attributes="selected multi" on-mousedown="activateHandler">
   <link rel="components" href="g-selection.html">
   <template>
     <g-selection id="selection" multi="{{multi}}" on-select="selectionSelect"></g-selection>
@@ -22,18 +22,22 @@
           return this.$.selection.getSelection();
         }
       },
-      _valueToIndex: function(inValue) {
+      valueForNode: function(inNode) {
+        return inNode.getAttribute('name') || inNode.value;
+      },
+      valueToIndex: function(inValue) {
         // find an item with value == inValue and return it's index
         for (var i=0, items=this.items, c; c=items[i]; i++) {
-          if (c.value && c.value == inValue) {
+          //if ((c.value === inValue) || (c.getAttribute('name') === inValue)) {
+          if (this.valueForNode(c) == inValue) {
             return i;
           }
         }
-        // if no item found, the value is an index itself
+        // if no item found, the value itself is probably the index
         return inValue;
       },
       selectedChanged: function() {
-        var item = this.items[this._valueToIndex(this.selected)];
+        var item = this.items[this.valueToIndex(this.selected)];
         if (item) {
           this.$.selection.select(item);
         }
@@ -45,11 +49,11 @@
         }
       },
       // event fired from host
-      clickHandler: function(inEvent) {
+      activateHandler: function(inEvent) {
         var items = this.items;
         var i = this.findDistributedTarget(inEvent.target, items);
         if (i >= 0) {
-          this.node.selected = items[i].value || i;
+          this.selected = this.valueForNode(items[i]) || i; 
         }
       }
     });
diff --git a/src/g-tabs.html b/src/g-tabs.html
index 0980df6115..46fa6113ec 100644
--- a/src/g-tabs.html
+++ b/src/g-tabs.html
@@ -5,10 +5,13 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-tabs" extends="g-selector" attributes="selected, multi, vertical" handlers="click: clickHandler">
+<element name="g-tabs" extends="g-selector" attributes="selected multi vertical" on-click="clickHandler">
   <link rel="components" href="g-selector.html">
   <template>
     <style>
+      style {
+        display: none !important;
+      }
       @host {
         display: block;
         height: 28px;
diff --git a/src/g-togglebutton.html b/src/g-togglebutton.html
index 56d558631b..a42b4716a7 100644
--- a/src/g-togglebutton.html
+++ b/src/g-togglebutton.html
@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-togglebutton" attributes="value" handlers="click: toggle">
+<element name="g-togglebutton" attributes="value" on-click="toggle">
   <link rel="components" href="g-component.html">
   <link rel="stylesheet" href="css/g-togglebutton.css" />
   <template>
@@ -22,7 +22,7 @@
       },
       publish: {
         toggle: function() {
-          this.node.value = !this.node.value;
+          this.value = !this.value;
         }
       }
     });
diff --git a/src/panel-transitions/g-flow-panel-transition.html b/src/panel-transitions/g-flow-panel-transition.html
index eb22d471df..2ef3eca816 100644
--- a/src/panel-transitions/g-flow-panel-transition.html
+++ b/src/panel-transitions/g-flow-panel-transition.html
@@ -30,7 +30,7 @@
       publish: {
         highlander: false,
         narrowMedia: '(max-width: 800px)',
-        setup: function(inPanels) {
+        setup: function() {
           this.$super(arguments);
           this.listenForMediaMatch();
           // TODO(sorvell): redo when reference combinators arrive
diff --git a/workbench/icon-button.html b/workbench/icon-button.html
index 24b8749439..46d1bb4e26 100644
--- a/workbench/icon-button.html
+++ b/workbench/icon-button.html
@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Icon Button</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-icon-button.html">
@@ -13,10 +14,10 @@
 <body>
   <g-icon-button src="images/star_full.svg"></g-icon-button>
   <g-icon-button active="true" src="images/star_full.svg"></g-icon-button>
-  <g-icon-button id="dyn"></g-icon-button>
+  <g-icon-button id="dynamic"></g-icon-button>
   <script>
     window.addEventListener("WebComponentsReady", function() {
-      document.querySelector("#dyn").src = "images/star_full.svg";
+      document.querySelector("#dynamic").src = "images/star_full.svg";
     });
   </script>
 </body>
diff --git a/workbench/icon.html b/workbench/icon.html
index 9c5ced2f72..8b9841881c 100644
--- a/workbench/icon.html
+++ b/workbench/icon.html
@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Icon</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-icon.html">
diff --git a/workbench/menu-button.html b/workbench/menu-button.html
index f60071c864..de9c4ec4cb 100644
--- a/workbench/menu-button.html
+++ b/workbench/menu-button.html
@@ -4,9 +4,11 @@
 license that can be found in the LICENSE file.
 -->
 <!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
-  <title>Dropdown Button</title>
+  <meta name="viewport" content="initial-scale=1.0">
+  <title>Menu Button</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-menu-button.html">
   <link rel="components" href="../src/g-menu-item.html">
@@ -15,7 +17,11 @@
     html, body {
       font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       height: 100%;
+    }
+    body {
+      font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       margin: 0;
+      opacity: 0;
       overflow: hidden;
     }
   </style>
diff --git a/workbench/menu.html b/workbench/menu.html
index 29e6b7d2b6..ba35baab27 100644
--- a/workbench/menu.html
+++ b/workbench/menu.html
@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Menu</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <style>
diff --git a/workbench/overlay.html b/workbench/overlay.html
index 41da7fcc64..3c5f048df3 100644
--- a/workbench/overlay.html
+++ b/workbench/overlay.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
 	<title>Overlay</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-overlay.html">
diff --git a/workbench/page.html b/workbench/page.html
index 0894518bd7..4dabe13c72 100644
--- a/workbench/page.html
+++ b/workbench/page.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
 	<title>Page</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-page.html">
@@ -13,7 +14,7 @@
     }
   </style>
 </head>
-<body>
+<body style="opacity: 0;">
   <g-page>
     <div class="content">Content...</div>
   </g-page>
diff --git a/workbench/panels.html b/workbench/panels.html
index 4d84b077df..ef9eab9d0a 100644
--- a/workbench/panels.html
+++ b/workbench/panels.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Panels</title>
-  <script src="../../polyfills/Components/components-polyfill.js" shadow="webkit"></script>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-panels.html">
   <link rel="stylesheet" href="../src/css/g-panels.css" />
 	<style>
@@ -63,7 +64,7 @@
     
 	</style>
 </head>
-<body>
+<body style="opacity: 0;">
   <div class="controls">
 		<button onclick="previous();">&laquo;</button>
 		<button onclick="next();">&raquo;</button>
diff --git a/workbench/ratings.html b/workbench/ratings.html
index fdf2c6ea3c..0295b4d294 100644
--- a/workbench/ratings.html
+++ b/workbench/ratings.html
@@ -6,11 +6,12 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Ratings</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-ratings.html">
 </head>
-<body>
+<body style="opacity: 0">
   <g-ratings value="3"></g-ratings>
   <br>
   <g-ratings value="5" count="10"></g-ratings>
diff --git a/workbench/selection.html b/workbench/selection.html
index e83fc0f6ea..9fcb130ec1 100644
--- a/workbench/selection.html
+++ b/workbench/selection.html
@@ -8,6 +8,7 @@
 <head>
   <title>Selection</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
+  <script src="../MDV/mdv-polyfill.js"></script>
   <link rel="components" href="../src/g-selection.html">
 </head>
 <body>
diff --git a/workbench/selector.html b/workbench/selector.html
index bc67867bc4..c409152a69 100644
--- a/workbench/selector.html
+++ b/workbench/selector.html
@@ -24,7 +24,7 @@
 </head>
 <body>
   <h2>Single-select</h2>
-  <g-selector>
+  <g-selector id="selector">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
diff --git a/workbench/tabs.html b/workbench/tabs.html
index 0d2fac5325..fc8fe6904b 100644
--- a/workbench/tabs.html
+++ b/workbench/tabs.html
@@ -1,11 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Tabs</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-tabs.html">
 </head>
-<body>
+<body style="opacity: 0">
   <g-tabs selected="0">
     <span>One</span>
     <span>Two</span>
diff --git a/workbench/togglebutton.html b/workbench/togglebutton.html
index b542880b68..e199c69950 100644
--- a/workbench/togglebutton.html
+++ b/workbench/togglebutton.html
@@ -3,14 +3,15 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
+  <meta name="viewport" content="initial-scale=1.0">
   <title>Toggle Button</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../../toolkit/src/g-togglebutton.html">
 </head>
-<body>
+<body style="opacity: 0">
   <g-togglebutton value="true"></g-togglebutton>
   <br>
   <g-togglebutton value="false"></g-togglebutton>
diff --git a/workbench/toolbar.html b/workbench/toolbar.html
index c636b6d4ae..c4fdaf67ab 100644
--- a/workbench/toolbar.html
+++ b/workbench/toolbar.html
@@ -3,10 +3,11 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html>
 <head>
-  <title>Menu</title>
+  <meta name="viewport" content="initial-scale=1.0">
+  <title>Toolbar</title>
   <script src="../../polyfills/Components/components-polyfill.js"></script>
   <link rel="components" href="../src/g-toolbar.html">
   <link rel="components" href="../src/g-icon-button.html">
@@ -14,9 +15,12 @@
     html, body {
       font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       height: 100%;
+    }
+    body {
+      font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
       margin: 0;
+      opacity: 0;
     }
-    
   </style>
 </head>
 <body>