Add support for custom elements to MDV

tools/dom/templates/html/impl/impl_Element.darttemplate

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 part of $LIBRARYNAME;
 
 class _ChildrenElementList extends ListBase<Element> {
   // Raw Element.
   final Element _element;
   final HtmlCollection _childElements;
@@ skipping 406 matching lines @@
     return e is Element && !(e is UnknownElement);
   }
 
   /**
    * Called by the DOM when this element has been instantiated.
    */
   @Experimental
   void onCreated() {}
 
   // Hooks to support custom WebComponents.
+
+$if DART2JS
+  @Creates('Null')  // Set from Dart code; does not instantiate a native type.
+$endif
+  Element _xtag;
+
   /**
    * Experimental support for [web components][wc]. This field stores a
    * reference to the component implementation. It was inspired by Mozilla's
    * [x-tags][] project. Please note: in the future it may be possible to
    * `extend Element` from your class, in which case this field will be
-   * deprecated and will simply return this [Element] object.
+   * deprecated.
+   *
+   * If xtag has not been set, it will simply return `this` [Element].
    *
    * [wc]: http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html
    * [x-tags]: http://x-tags.org/
    */
-$if DART2JS
-  @Creates('Null')  // Set from Dart code; does not instantiate a native type.
-$endif
-  var xtag;
+  Element get xtag => _xtag != null ? _xtag : this;
+
+  void set xtag(Element value) {
+    _xtag = value;
+  }
 
   /**
    * Scrolls this element into view.
    *
    * Only one of of the alignment options may be specified at a time.
    *
    * If no options are specified then this will attempt to scroll the minimum
    * amount needed to bring the element into view.
    *
    * Note that alignCenter is currently only supported on WebKit platforms. If
@@ skipping 216 matching lines @@
 
   // TODO(jmesserly): this is static to work around http://dartbug.com/10166
   // Similar issue for unbind/unbindAll below.
   static void _bindElement(Element self, String name, model, String path) {
     if (self._bindTemplate(name, model, path)) return;
 
     if (self._attributeBindings == null) {
       self._attributeBindings = new Map<String, StreamSubscription>();
     }
 
-    self.attributes.remove(name);
+    self.xtag.attributes.remove(name);
 
     var changed;
     if (name.endsWith('?')) {
       name = name.substring(0, name.length - 1);
 
       changed = (value) {
         if (_templateBooleanConversion(value)) {
-          self.attributes[name] = '';
+          self.xtag.attributes[name] = '';
         } else {
-          self.attributes.remove(name);
+          self.xtag.attributes.remove(name);
         }
       };
     } else {
       changed = (value) {
         // TODO(jmesserly): escape value if needed to protect against XSS.
         // See https://github.com/toolkitchen/mdv/issues/58
-        self.attributes[name] = value == null ? '' : '$value';
+        self.xtag.attributes[name] = value == null ? '' : '$value';
       };
     }
 
     self.unbind(name);
 
     self._attributeBindings[name] =
         new PathObserver(model, path).bindSync(changed);
   }
 
   @Experimental
@@ skipping 318 matching lines @@
   const ScrollAlignment._internal(this._value);
   toString() => 'ScrollAlignment.$_value';
 
   /// Attempt to align the element to the top of the scrollable area.
   static const TOP = const ScrollAlignment._internal('TOP');
   /// Attempt to center the element in the scrollable area.
   static const CENTER = const ScrollAlignment._internal('CENTER');
   /// Attempt to align the element to the bottom of the scrollable area.
   static const BOTTOM = const ScrollAlignment._internal('BOTTOM');
 }