An abstract class, which all HTML elements extend.

@DomName('Element')
abstract class Element extends Node implements ElementTraversal native "Element" {

 /**
  * Creates an HTML element from a valid fragment of HTML.
  *
  * The [html] fragment must represent valid HTML with a single element root,
  * which will be parsed and returned.
  *
  * Important: the contents of [html] should not contain any user-supplied
  * data. Without strict data validation it is impossible to prevent script
  * injection exploits.
  *
  * It is instead recommended that elements be constructed via [Element.tag]
  * and text be added via [text].
  *
  *     var element = new Element.html('<div class="foo">content</div>');
  */
 factory Element.html(String html) =>
     _ElementFactoryProvider.createElement_html(html);

 /**
  * Creates the HTML element specified by the tag name.
  *
  * This is similar to [Document.createElement].
  * [tag] should be a valid HTML tag name. If [tag] is an unknown tag then
  * this will create an [UnknownElement].
  *
  *     var divElement = new Element.tag('div');
  *     print(divElement is DivElement); // 'true'
  *     var myElement = new Element.tag('unknownTag');
  *     print(myElement is UnknownElement); // 'true'
  *
  * For standard elements it is more preferable to use the type constructors:
  *     var element = new DivElement();
  *
  * See also:
  *
  * * [isTagSupported]
  */
 factory Element.tag(String tag) =>
     _ElementFactoryProvider.createElement_tag(tag);

 /**
  * All attributes on this element.
  *
  * Any modifications to the attribute map will automatically be applied to
  * this element.
  *
  * This only includes attributes which are not in a namespace
  * (such as 'xlink:href'), additional attributes can be accessed via
  * [getNamespacedAttributes].
  */
 Map<String, String> get attributes => new _ElementAttributeMap(this);

 void set attributes(Map<String, String> value) {
   Map<String, String> attributes = this.attributes;
   attributes.clear();
   for (String key in value.keys) {
     attributes[key] = value[key];
   }
 }

 /**
  * List of the direct children of this element.
  *
  * This collection can be used to add and remove elements from the document.
  *
  *     var item = new DivElement();
  *     item.text = 'Something';
  *     document.body.children.add(item) // Item is now displayed on the page.
  *     for (var element in document.body.children) {
  *       element.style.background = 'red'; // Turns every child of body red.
  *     }
  */
 List<Element> get children => new _ChildrenElementList._wrap(this);

 void set children(List<Element> value) {
   // Copy list first since we don't want liveness during iteration.
   List copy = new List.from(value);
   var children = this.children;
   children.clear();
   children.addAll(copy);
 }

 /**
  * Finds all descendent elements of this element that match the specified
  * group of selectors.
  *
  * [selectors] should be a string using CSS selector syntax.
  *
  *     var items = element.query('.itemClassName');
  */
 ElementList queryAll(String selectors) =>
   new _FrozenElementList._wrap($dom_querySelectorAll(selectors));

 /**
  * The set of CSS classes applied to this element.
  *
  * This set makes it easy to add, remove or toggle the classes applied to
  * this element.
  *
  *     element.classes.add('selected');
  *     element.classes.toggle('isOnline');
  *     element.classes.remove('selected');
  */
 CssClassSet get classes => new _ElementCssClassSet(this);

 void set classes(Iterable<String> value) {
   CssClassSet classSet = classes;
   classSet.clear();
   classSet.addAll(value);
 }

 /**
  * Allows access to all custom data attributes (data-*) set on this element.
  *
  * The keys for the map must follow these rules:
  *
  * * The name must not begin with 'xml'.
  * * The name cannot contain a semi-colon (';').
  * * The name cannot contain any capital letters.
  *
  * Any keys from markup will be converted to camel-cased keys in the map.
  *
  * For example, HTML specified as:
  *
  *     <div data-my-random-value='value'></div>
  *
  * Would be accessed in Dart as:
  *
  *     var value = element.dataset['myRandomValue'];
  *
  * See also:
  *
  * * [Custom data attributes](http://www.w3.org/TR/html5/global-attributes.html#custom-data-attribute)
  */
 Map<String, String> get dataset =>
   new _DataAttributeMap(attributes);

 void set dataset(Map<String, String> value) {
   final data = this.dataset;
   data.clear();
   for (String key in value.keys) {
     data[key] = value[key];
   }
 }

 /**
  * Gets a map for manipulating the attributes of a particular namespace.
  *
  * This is primarily useful for SVG attributes such as xref:link.
  */
 Map<String, String> getNamespacedAttributes(String namespace) {
   return new _NamespacedAttributeMap(this, namespace);
 }

 /**
  * The set of all CSS values applied to this element, including inherited
  * and default values.
  *
  * The computedStyle contains values that are inherited from other
  * sources, such as parent elements or stylesheets. This differs from the
  * [style] property, which contains only the values specified directly on this
  * element.
  *
  * PseudoElement can be values such as `::after`, `::before`, `::marker`,
  * `::line-marker`.
  *
  * See also:
  *
  * * [CSS Inheritance and Cascade](http://docs.webplatform.org/wiki/tutorials/inheritance_and_cascade)
  * * [Pseudo-elements](http://docs.webplatform.org/wiki/css/selectors/pseudo-elements)
  */
 CssStyleDeclaration getComputedStyle([String pseudoElement]) {
   if (pseudoElement == null) {
     pseudoElement = '';
   }
   // TODO(jacobr): last param should be null, see b/5045788
   return window.$dom_getComputedStyle(this, pseudoElement);
 }

 /**
  * Gets the position of this element relative to the client area of the page.
  */
 Rect get client => new Rect(clientLeft, clientTop, clientWidth, clientHeight);

 /**
  * Gets the offset of this element relative to its offsetParent.
  */
 Rect get offset => new Rect(offsetLeft, offsetTop, offsetWidth, offsetHeight);

 /**
  * Adds the specified text as a text node after the last child of this
  * element.
  */
 void appendText(String text) {
   this.insertAdjacentText('beforeend', text);
 }

 /**
  * Parses the specified text as HTML and adds the resulting node after the
  * last child of this element.
  */
 void appendHtml(String text) {
   this.insertAdjacentHtml('beforeend', text);
 }

 /**
  * Checks to see if the tag name is supported by the current platform.
  *
  * The tag should be a valid HTML tag name.
  */
 static bool isTagSupported(String tag) {
   var e = _ElementFactoryProvider.createElement_tag(tag);
   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.

 @Creates('Null')  // Set from Dart code; does not instantiate a native type.
 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.
  *
  * 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/
  */
 // Note: return type is `dynamic` for convenience to suppress warnings when
 // members of the component are used. The actual type is a subtype of Element.
 get xtag => _xtag != null ? _xtag : this;

 void set xtag(Element value) {
   _xtag = value;
 }

 @DomName('Element.localName')
 @DocsEditable
 String get localName => $dom_localName;

 @DomName('Element.namespaceUri')
 @DocsEditable
 String get namespaceUri => $dom_namespaceUri;

 String toString() => localName;

 /**
  * 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
  * alignCenter is specified but not supported then this will fall back to
  * alignTop.
  *
  * See also:
  *
  * * [scrollIntoView](http://docs.webplatform.org/wiki/dom/methods/scrollIntoView)
  * * [scrollIntoViewIfNeeded](http://docs.webplatform.org/wiki/dom/methods/scrollIntoViewIfNeeded)
  */
 void scrollIntoView([ScrollAlignment alignment]) {
   var hasScrollIntoViewIfNeeded = false;
   hasScrollIntoViewIfNeeded =
       JS('bool', '!!(#.scrollIntoViewIfNeeded)', this);
   if (alignment == ScrollAlignment.TOP) {
     this.$dom_scrollIntoView(true);
   } else if (alignment == ScrollAlignment.BOTTOM) {
     this.$dom_scrollIntoView(false);
   } else if (hasScrollIntoViewIfNeeded) {
     if (alignment == ScrollAlignment.CENTER) {
       this.$dom_scrollIntoViewIfNeeded(true);
     } else {
       this.$dom_scrollIntoViewIfNeeded();
     }
   } else {
     this.$dom_scrollIntoView();
   }
 }

 @DomName('Element.mouseWheelEvent')
 static const EventStreamProvider<WheelEvent> mouseWheelEvent =
     const _CustomEventStreamProvider<WheelEvent>(
       Element._determineMouseWheelEventType);

 static String _determineMouseWheelEventType(EventTarget e) {
   if (JS('bool', '#.onwheel !== undefined', e)) {
     // W3C spec, and should be IE9+, but IE has a bug exposing onwheel.
     return 'wheel';
   } else if (JS('bool', '#.onmousewheel !== undefined', e)) {
     // Chrome & IE
     return 'mousewheel';
   } else {
     // Firefox
     return 'DOMMouseScroll';
   }
 }

 @DomName('Element.transitionEndEvent')
 static const EventStreamProvider<TransitionEvent> transitionEndEvent =
     const _CustomEventStreamProvider<TransitionEvent>(
       Element._determineTransitionEventType);

 static String _determineTransitionEventType(EventTarget e) {
   // Unfortunately the normal 'ontransitionend' style checks don't work here.
   if (Device.isWebKit) {
     return 'webkitTransitionEnd';
   } else if (Device.isOpera) {
     return 'oTransitionEnd';
   }
   return 'transitionend';
 }
 /**
  * Creates a text node and inserts it into the DOM at the specified location.
  *
  * To see the possible values for [where], read the doc for
  * [insertAdjacentHtml].
  *
  * See also:
  *
  * * [insertAdjacentHtml]
  */
 void insertAdjacentText(String where, String text) {
   if (JS('bool', '!!#.insertAdjacentText', this)) {
     _insertAdjacentText(where, text);
   } else {
     _insertAdjacentNode(where, new Text(text));
   }
 }

 @JSName('insertAdjacentText')
 void _insertAdjacentText(String where, String text) native;

 /**
  * Parses text as an HTML fragment and inserts it into the DOM at the
  * specified location.
  *
  * The [where] parameter indicates where to insert the HTML fragment:
  *
  * * 'beforeBegin': Immediately before this element.
  * * 'afterBegin': As the first child of this element.
  * * 'beforeEnd': As the last child of this element.
  * * 'afterEnd': Immediately after this element.
  *
  *     var html = '<div class="something">content</div>';
  *     // Inserts as the first child
  *     document.body.insertAdjacentHtml('afterBegin', html);
  *     var createdElement = document.body.children[0];
  *     print(createdElement.classes[0]); // Prints 'something'
  *
  * See also:
  *
  * * [insertAdjacentText]
  * * [insertAdjacentElement]
  */
 void insertAdjacentHtml(String where, String html) {
   if (JS('bool', '!!#.insertAdjacentHTML', this)) {
     _insertAdjacentHtml(where, html);
   } else {
     _insertAdjacentNode(where, new DocumentFragment.html(html));
   }
 }

 @JSName('insertAdjacentHTML')
 void _insertAdjacentHtml(String where, String text) native;

 /**
  * Inserts [element] into the DOM at the specified location.
  *
  * To see the possible values for [where], read the doc for
  * [insertAdjacentHtml].
  *
  * See also:
  *
  * * [insertAdjacentHtml]
  */
 Element insertAdjacentElement(String where, Element element) {
   if (JS('bool', '!!#.insertAdjacentElement', this)) {
     _insertAdjacentElement(where, element);
   } else {
     _insertAdjacentNode(where, element);
   }
   return element;
 }

 @JSName('insertAdjacentElement')
 void _insertAdjacentElement(String where, Element element) native;

 void _insertAdjacentNode(String where, Node node) {
   switch (where.toLowerCase()) {
     case 'beforebegin':
       this.parentNode.insertBefore(node, this);
       break;
     case 'afterbegin':
       var first = this.nodes.length > 0 ? this.nodes[0] : null;
       this.insertBefore(node, first);
       break;
     case 'beforeend':
       this.append(node);
       break;
     case 'afterend':
       this.parentNode.insertBefore(node, this.nextNode);
       break;
     default:
       throw new ArgumentError("Invalid position ${where}");
   }
 }

 /**
  * Checks if this element matches the CSS selectors.
  */
 @Experimental
 bool matches(String selectors) {
   if (JS('bool', '!!#.matches', this)) {
     return JS('bool', '#.matches(#)', this, selectors);
   } else if (JS('bool', '!!#.webkitMatchesSelector', this)) {
     return JS('bool', '#.webkitMatchesSelector(#)', this, selectors);
   } else if (JS('bool', '!!#.mozMatchesSelector', this)) {
     return JS('bool', '#.mozMatchesSelector(#)', this, selectors);
   } else if (JS('bool', '!!#.msMatchesSelector', this)) {
     return JS('bool', '#.msMatchesSelector(#)', this, selectors);
   }
   throw new UnsupportedError("Not supported on this platform");
 }

 @Creates('Null') // Set from Dart code; does not instantiate a native type.
 Map<String, StreamSubscription> _attributeBindings;

 // TODO(jmesserly): I'm concerned about adding these to every element.
 // Conceptually all of these belong on TemplateElement. They are here to
 // support browsers that don't have <template> yet.
 // However even in the polyfill they're restricted to certain tags
 // (see [isTemplate]). So we can probably convert it to a (public) mixin, and
 // only mix it in to the elements that need it.
 @Creates('Null')  // Set from Dart code; does not instantiate a native type.
 var _model;

 @Creates('Null')  // Set from Dart code; does not instantiate a native type.
 _TemplateIterator _templateIterator;

 @Creates('Null')  // Set from Dart code; does not instantiate a native type.
 Element _templateInstanceRef;

 // Note: only used if `this is! TemplateElement`
 @Creates('Null')  // Set from Dart code; does not instantiate a native type.
 DocumentFragment _templateContent;

 bool _templateIsDecorated;

 // TODO(jmesserly): should path be optional, and default to empty path?
 // It is used that way in at least one path in JS TemplateElement tests
 // (see "BindImperative" test in original JS code).
 @Experimental
 void bind(String name, model, String path) {
   _bindElement(this, name, model, path);
 }

 // 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.xtag.attributes.remove(name);

   var changed;
   if (name.endsWith('?')) {
     name = name.substring(0, name.length - 1);

     changed = (value) {
       if (_Bindings._toBoolean(value)) {
         self.xtag.attributes[name] = '';
       } else {
         self.xtag.attributes.remove(name);
       }
     };
   } else {
     changed = (value) {
       // TODO(jmesserly): escape value if needed to protect against XSS.
       // See https://github.com/polymer-project/mdv/issues/58
       self.xtag.attributes[name] = value == null ? '' : '$value';
     };
   }

   self.unbind(name);

   self._attributeBindings[name] =
       new PathObserver(model, path).bindSync(changed);
 }

 @Experimental
 void unbind(String name) {
   _unbindElement(this, name);
 }

 static _unbindElement(Element self, String name) {
   if (self._unbindTemplate(name)) return;
   if (self._attributeBindings != null) {
     var binding = self._attributeBindings.remove(name);
     if (binding != null) binding.cancel();
   }
 }

 @Experimental
 void unbindAll() {
   _unbindAllElement(this);
 }

 static void _unbindAllElement(Element self) {
   self._unbindAllTemplate();

   if (self._attributeBindings != null) {
     for (var binding in self._attributeBindings.values) {
       binding.cancel();
     }
     self._attributeBindings = null;
   }
 }

 // TODO(jmesserly): unlike the JS polyfill, we can't mixin
 // HTMLTemplateElement at runtime into things that are semantically template
 // elements. So instead we implement it here with a runtime check.
 // If the bind succeeds, we return true, otherwise we return false and let
 // the normal Element.bind logic kick in.
 bool _bindTemplate(String name, model, String path) {
   if (isTemplate) {
     switch (name) {
       case 'bind':
       case 'repeat':
       case 'if':
         _ensureTemplate();
         if (_templateIterator == null) {
           _templateIterator = new _TemplateIterator(this);
         }
         _templateIterator.inputs.bind(name, model, path);
         return true;
     }
   }
   return false;
 }

 bool _unbindTemplate(String name) {
   if (isTemplate) {
     switch (name) {
       case 'bind':
       case 'repeat':
       case 'if':
         _ensureTemplate();
         if (_templateIterator != null) {
           _templateIterator.inputs.unbind(name);
         }
         return true;
     }
   }
   return false;
 }

 void _unbindAllTemplate() {
   if (isTemplate) {
     unbind('bind');
     unbind('repeat');
     unbind('if');
   }
 }

 /**
  * Gets the template this node refers to.
  * This is only supported if [isTemplate] is true.
  */
 @Experimental
 Element get ref {
   _ensureTemplate();

   Element ref = null;
   var refId = attributes['ref'];
   if (refId != null) {
     ref = document.getElementById(refId);
   }

   return ref != null ? ref : _templateInstanceRef;
 }

 /**
  * Gets the content of this template.
  * This is only supported if [isTemplate] is true.
  */
 @Experimental
 DocumentFragment get content {
   _ensureTemplate();
   return _templateContent;
 }

 /**
  * Creates an instance of the template.
  * This is only supported if [isTemplate] is true.
  */
 @Experimental
 DocumentFragment createInstance() {
   _ensureTemplate();

   var template = ref;
   if (template == null) template = this;

   var instance = _Bindings._createDeepCloneAndDecorateTemplates(
       template.content, attributes['syntax']);

   if (TemplateElement._instanceCreated != null) {
     TemplateElement._instanceCreated.add(instance);
   }
   return instance;
 }

 /**
  * The data model which is inherited through the tree.
  * This is only supported if [isTemplate] is true.
  *
  * Setting this will destructive propagate the value to all descendant nodes,
  * and reinstantiate all of the nodes expanded by this template.
  *
  * Currently this does not support propagation through Shadow DOMs.
  */
 @Experimental
 get model => _model;

 @Experimental
 void set model(value) {
   _ensureTemplate();

   var syntax = TemplateElement.syntax[attributes['syntax']];
   _model = value;
   _Bindings._addBindings(this, model, syntax);
 }

 // TODO(jmesserly): const set would be better
 static const _TABLE_TAGS = const {
   'caption': null,
   'col': null,
   'colgroup': null,
   'tbody': null,
   'td': null,
   'tfoot': null,
   'th': null,
   'thead': null,
   'tr': null,
 };

 bool get _isAttributeTemplate => attributes.containsKey('template') &&
     (localName == 'option' || _TABLE_TAGS.containsKey(localName));

 /**
  * Returns true if this node is a template.
  *
  * A node is a template if [tagName] is TEMPLATE, or the node has the
  * 'template' attribute and this tag supports attribute form for backwards
  * compatibility with existing HTML parsers. The nodes that can use attribute
  * form are table elments (THEAD, TBODY, TFOOT, TH, TR, TD, CAPTION, COLGROUP
  * and COL) and OPTION.
  */
 // TODO(jmesserly): this is not a public MDV API, but it seems like a useful
 // place to document which tags our polyfill considers to be templates.
 // Otherwise I'd be repeating it in several other places.
 // See if we can replace this with a TemplateMixin.
 @Experimental
 bool get isTemplate => tagName == 'TEMPLATE' || _isAttributeTemplate;

 void _ensureTemplate() {
   if (!isTemplate) {
     throw new UnsupportedError('$this is not a template.');
   }
   TemplateElement.decorate(this);
 }


 @DomName('Element.abortEvent')
 @DocsEditable
 static const EventStreamProvider<Event> abortEvent = const EventStreamProvider<Event>('abort');

 @DomName('Element.beforecopyEvent')
 @DocsEditable
 static const EventStreamProvider<Event> beforeCopyEvent = const EventStreamProvider<Event>('beforecopy');

 @DomName('Element.beforecutEvent')
 @DocsEditable
 static const EventStreamProvider<Event> beforeCutEvent = const EventStreamProvider<Event>('beforecut');

 @DomName('Element.beforepasteEvent')
 @DocsEditable
 static const EventStreamProvider<Event> beforePasteEvent = const EventStreamProvider<Event>('beforepaste');

 @DomName('Element.blurEvent')
 @DocsEditable
 static const EventStreamProvider<Event> blurEvent = const EventStreamProvider<Event>('blur');

 @DomName('Element.changeEvent')
 @DocsEditable
 static const EventStreamProvider<Event> changeEvent = const EventStreamProvider<Event>('change');

 @DomName('Element.clickEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> clickEvent = const EventStreamProvider<MouseEvent>('click');

 @DomName('Element.contextmenuEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> contextMenuEvent = const EventStreamProvider<MouseEvent>('contextmenu');

 @DomName('Element.copyEvent')
 @DocsEditable
 static const EventStreamProvider<Event> copyEvent = const EventStreamProvider<Event>('copy');

 @DomName('Element.cutEvent')
 @DocsEditable
 static const EventStreamProvider<Event> cutEvent = const EventStreamProvider<Event>('cut');

 @DomName('Element.dblclickEvent')
 @DocsEditable
 static const EventStreamProvider<Event> doubleClickEvent = const EventStreamProvider<Event>('dblclick');

 @DomName('Element.dragEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> dragEvent = const EventStreamProvider<MouseEvent>('drag');

 @DomName('Element.dragendEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> dragEndEvent = const EventStreamProvider<MouseEvent>('dragend');

 @DomName('Element.dragenterEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> dragEnterEvent = const EventStreamProvider<MouseEvent>('dragenter');

 @DomName('Element.dragleaveEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> dragLeaveEvent = const EventStreamProvider<MouseEvent>('dragleave');

 @DomName('Element.dragoverEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> dragOverEvent = const EventStreamProvider<MouseEvent>('dragover');

 @DomName('Element.dragstartEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> dragStartEvent = const EventStreamProvider<MouseEvent>('dragstart');

 @DomName('Element.dropEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> dropEvent = const EventStreamProvider<MouseEvent>('drop');

 @DomName('Element.errorEvent')
 @DocsEditable
 static const EventStreamProvider<Event> errorEvent = const EventStreamProvider<Event>('error');

 @DomName('Element.focusEvent')
 @DocsEditable
 static const EventStreamProvider<Event> focusEvent = const EventStreamProvider<Event>('focus');

 @DomName('Element.inputEvent')
 @DocsEditable
 static const EventStreamProvider<Event> inputEvent = const EventStreamProvider<Event>('input');

 @DomName('Element.invalidEvent')
 @DocsEditable
 static const EventStreamProvider<Event> invalidEvent = const EventStreamProvider<Event>('invalid');

 @DomName('Element.keydownEvent')
 @DocsEditable
 static const EventStreamProvider<KeyboardEvent> keyDownEvent = const EventStreamProvider<KeyboardEvent>('keydown');

 @DomName('Element.keypressEvent')
 @DocsEditable
 static const EventStreamProvider<KeyboardEvent> keyPressEvent = const EventStreamProvider<KeyboardEvent>('keypress');

 @DomName('Element.keyupEvent')
 @DocsEditable
 static const EventStreamProvider<KeyboardEvent> keyUpEvent = const EventStreamProvider<KeyboardEvent>('keyup');

 @DomName('Element.loadEvent')
 @DocsEditable
 static const EventStreamProvider<Event> loadEvent = const EventStreamProvider<Event>('load');

 @DomName('Element.mousedownEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> mouseDownEvent = const EventStreamProvider<MouseEvent>('mousedown');

 @DomName('Element.mousemoveEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> mouseMoveEvent = const EventStreamProvider<MouseEvent>('mousemove');

 @DomName('Element.mouseoutEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> mouseOutEvent = const EventStreamProvider<MouseEvent>('mouseout');

 @DomName('Element.mouseoverEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> mouseOverEvent = const EventStreamProvider<MouseEvent>('mouseover');

 @DomName('Element.mouseupEvent')
 @DocsEditable
 static const EventStreamProvider<MouseEvent> mouseUpEvent = const EventStreamProvider<MouseEvent>('mouseup');

 @DomName('Element.pasteEvent')
 @DocsEditable
 static const EventStreamProvider<Event> pasteEvent = const EventStreamProvider<Event>('paste');

 @DomName('Element.resetEvent')
 @DocsEditable
 static const EventStreamProvider<Event> resetEvent = const EventStreamProvider<Event>('reset');

 @DomName('Element.scrollEvent')
 @DocsEditable
 static const EventStreamProvider<Event> scrollEvent = const EventStreamProvider<Event>('scroll');

 @DomName('Element.searchEvent')
 @DocsEditable
 // http://www.w3.org/TR/html-markup/input.search.html
 @Experimental
 static const EventStreamProvider<Event> searchEvent = const EventStreamProvider<Event>('search');

 @DomName('Element.selectEvent')
 @DocsEditable
 static const EventStreamProvider<Event> selectEvent = const EventStreamProvider<Event>('select');

 @DomName('Element.selectstartEvent')
 @DocsEditable
 @Experimental // nonstandard
 static const EventStreamProvider<Event> selectStartEvent = const EventStreamProvider<Event>('selectstart');

 @DomName('Element.submitEvent')
 @DocsEditable
 static const EventStreamProvider<Event> submitEvent = const EventStreamProvider<Event>('submit');

 @DomName('Element.touchcancelEvent')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 static const EventStreamProvider<TouchEvent> touchCancelEvent = const EventStreamProvider<TouchEvent>('touchcancel');

 @DomName('Element.touchendEvent')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 static const EventStreamProvider<TouchEvent> touchEndEvent = const EventStreamProvider<TouchEvent>('touchend');

 @DomName('Element.touchenterEvent')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 static const EventStreamProvider<TouchEvent> touchEnterEvent = const EventStreamProvider<TouchEvent>('touchenter');

 @DomName('Element.touchleaveEvent')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 static const EventStreamProvider<TouchEvent> touchLeaveEvent = const EventStreamProvider<TouchEvent>('touchleave');

 @DomName('Element.touchmoveEvent')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 static const EventStreamProvider<TouchEvent> touchMoveEvent = const EventStreamProvider<TouchEvent>('touchmove');

 @DomName('Element.touchstartEvent')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 static const EventStreamProvider<TouchEvent> touchStartEvent = const EventStreamProvider<TouchEvent>('touchstart');

 @DomName('Element.webkitfullscreenchangeEvent')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
 static const EventStreamProvider<Event> fullscreenChangeEvent = const EventStreamProvider<Event>('webkitfullscreenchange');

 @DomName('Element.webkitfullscreenerrorEvent')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
 static const EventStreamProvider<Event> fullscreenErrorEvent = const EventStreamProvider<Event>('webkitfullscreenerror');

 @DomName('Element.contentEditable')
 @DocsEditable
 String contentEditable;

 @DomName('Element.dir')
 @DocsEditable
 String dir;

 @DomName('Element.draggable')
 @DocsEditable
 bool draggable;

 @DomName('Element.hidden')
 @DocsEditable
 bool hidden;

 @DomName('Element.id')
 @DocsEditable
 String id;

 @JSName('innerHTML')
 @DomName('Element.innerHTML')
 @DocsEditable
 String innerHtml;

 @DomName('Element.isContentEditable')
 @DocsEditable
 final bool isContentEditable;

 @DomName('Element.lang')
 @DocsEditable
 String lang;

 @JSName('outerHTML')
 @DomName('Element.outerHTML')
 @DocsEditable
 final String outerHtml;

 @DomName('Element.spellcheck')
 @DocsEditable
 // http://blog.whatwg.org/the-road-to-html-5-spellchecking
 @Experimental // nonstandard
 bool spellcheck;

 @DomName('Element.tabIndex')
 @DocsEditable
 int tabIndex;

 @DomName('Element.title')
 @DocsEditable
 String title;

 @DomName('Element.translate')
 @DocsEditable
 // http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-translate-attribute
 @Experimental
 bool translate;

 @JSName('webkitdropzone')
 @DomName('Element.webkitdropzone')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute
 String dropzone;

 @DomName('Element.click')
 @DocsEditable
 void click() native;

 @DomName('Element.getInputContext')
 @DocsEditable
 // http://www.w3.org/TR/ime-api/#the-getinputcontext-method
 @Experimental
 InputMethodContext getInputContext() native;

 @DomName('Element.ALLOW_KEYBOARD_INPUT')
 @DocsEditable
 // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#dom-element-requestfullscreen
 @deprecated // deprecated
 static const int ALLOW_KEYBOARD_INPUT = 1;

 @JSName('attributes')
 @DomName('Element.attributes')
 @DocsEditable
 final _NamedNodeMap $dom_attributes;

 @JSName('childElementCount')
 @DomName('Element.childElementCount')
 @DocsEditable
 final int $dom_childElementCount;

 @JSName('children')
 @DomName('Element.children')
 @DocsEditable
 final HtmlCollection $dom_children;

 @JSName('className')
 @DomName('Element.className')
 @DocsEditable
 String $dom_className;

 @DomName('Element.clientHeight')
 @DocsEditable
 final int clientHeight;

 @DomName('Element.clientLeft')
 @DocsEditable
 final int clientLeft;

 @DomName('Element.clientTop')
 @DocsEditable
 final int clientTop;

 @DomName('Element.clientWidth')
 @DocsEditable
 final int clientWidth;

 @JSName('firstElementChild')
 @DomName('Element.firstElementChild')
 @DocsEditable
 final Element $dom_firstElementChild;

 @JSName('lastElementChild')
 @DomName('Element.lastElementChild')
 @DocsEditable
 final Element $dom_lastElementChild;

 @DomName('Element.nextElementSibling')
 @DocsEditable
 final Element nextElementSibling;

 @DomName('Element.offsetHeight')
 @DocsEditable
 final int offsetHeight;

 @DomName('Element.offsetLeft')
 @DocsEditable
 final int offsetLeft;

 @DomName('Element.offsetParent')
 @DocsEditable
 final Element offsetParent;

 @DomName('Element.offsetTop')
 @DocsEditable
 final int offsetTop;

 @DomName('Element.offsetWidth')
 @DocsEditable
 final int offsetWidth;

 @DomName('Element.previousElementSibling')
 @DocsEditable
 final Element previousElementSibling;

 @DomName('Element.scrollHeight')
 @DocsEditable
 final int scrollHeight;

 @DomName('Element.scrollLeft')
 @DocsEditable
 int scrollLeft;

 @DomName('Element.scrollTop')
 @DocsEditable
 int scrollTop;

 @DomName('Element.scrollWidth')
 @DocsEditable
 final int scrollWidth;

 @DomName('Element.style')
 @DocsEditable
 final CssStyleDeclaration style;

 @DomName('Element.tagName')
 @DocsEditable
 final String tagName;

 @JSName('webkitPseudo')
 @DomName('Element.webkitPseudo')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 @Experimental // nonstandard
 String pseudo;

 @JSName('webkitRegionOverset')
 @DomName('Element.webkitRegionOverset')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // http://dev.w3.org/csswg/css-regions/#dom-region-regionoverset
 final String regionOverset;

 @JSName('webkitShadowRoot')
 @DomName('Element.webkitShadowRoot')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#api-shadow-aware-create-shadow-root
 final ShadowRoot shadowRoot;

 @DomName('Element.blur')
 @DocsEditable
 void blur() native;

 @DomName('Element.focus')
 @DocsEditable
 void focus() native;

 @JSName('getAttribute')
 @DomName('Element.getAttribute')
 @DocsEditable
 String $dom_getAttribute(String name) native;

 @JSName('getAttributeNS')
 @DomName('Element.getAttributeNS')
 @DocsEditable
 String $dom_getAttributeNS(String namespaceURI, String localName) native;

 @DomName('Element.getBoundingClientRect')
 @DocsEditable
 Rect getBoundingClientRect() native;

 @DomName('Element.getClientRects')
 @DocsEditable
 @Returns('_ClientRectList')
 @Creates('_ClientRectList')
 List<Rect> getClientRects() native;

 @DomName('Element.getElementsByClassName')
 @DocsEditable
 @Returns('NodeList')
 @Creates('NodeList')
 List<Node> getElementsByClassName(String name) native;

 @JSName('getElementsByTagName')
 @DomName('Element.getElementsByTagName')
 @DocsEditable
 @Returns('NodeList')
 @Creates('NodeList')
 List<Node> $dom_getElementsByTagName(String name) native;

 @JSName('hasAttribute')
 @DomName('Element.hasAttribute')
 @DocsEditable
 bool $dom_hasAttribute(String name) native;

 @JSName('hasAttributeNS')
 @DomName('Element.hasAttributeNS')
 @DocsEditable
 bool $dom_hasAttributeNS(String namespaceURI, String localName) native;

 @JSName('querySelector')
 /**
* Finds the first descendant element of this element that matches the
* specified group of selectors.
*
* [selectors] should be a string using CSS selector syntax.
*
*     // Gets the first descendant with the class 'classname'
*     var element = element.query('.className');
*     // Gets the element with id 'id'
*     var element = element.query('#id');
*     // Gets the first descendant [ImageElement]
*     var img = element.query('img');
*
* See also:
*
* * [CSS Selectors](http://docs.webplatform.org/wiki/css/selectors)
*/
 @DomName('Element.querySelector')
 @DocsEditable
 Element query(String selectors) native;

 @JSName('querySelectorAll')
 @DomName('Element.querySelectorAll')
 @DocsEditable
 @Returns('NodeList')
 @Creates('NodeList')
 List<Node> $dom_querySelectorAll(String selectors) native;

 @JSName('removeAttribute')
 @DomName('Element.removeAttribute')
 @DocsEditable
 void $dom_removeAttribute(String name) native;

 @JSName('removeAttributeNS')
 @DomName('Element.removeAttributeNS')
 @DocsEditable
 void $dom_removeAttributeNS(String namespaceURI, String localName) native;

 @DomName('Element.scrollByLines')
 @DocsEditable
 void scrollByLines(int lines) native;

 @DomName('Element.scrollByPages')
 @DocsEditable
 void scrollByPages(int pages) native;

 @JSName('scrollIntoView')
 @DomName('Element.scrollIntoView')
 @DocsEditable
 void $dom_scrollIntoView([bool alignWithTop]) native;

 @JSName('scrollIntoViewIfNeeded')
 @DomName('Element.scrollIntoViewIfNeeded')
 @DocsEditable
 // http://docs.webplatform.org/wiki/dom/methods/scrollIntoViewIfNeeded
 @Experimental // non-standard
 void $dom_scrollIntoViewIfNeeded([bool centerIfNeeded]) native;

 @JSName('setAttribute')
 @DomName('Element.setAttribute')
 @DocsEditable
 void $dom_setAttribute(String name, String value) native;

 @JSName('setAttributeNS')
 @DomName('Element.setAttributeNS')
 @DocsEditable
 void $dom_setAttributeNS(String namespaceURI, String qualifiedName, String value) native;

 @JSName('webkitCreateShadowRoot')
 @DomName('Element.webkitCreateShadowRoot')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME, '25')
 @Experimental
 // https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#api-shadow-aware-create-shadow-root
 ShadowRoot createShadowRoot() native;

 @JSName('webkitGetRegionFlowRanges')
 @DomName('Element.webkitGetRegionFlowRanges')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // http://dev.w3.org/csswg/css-regions/#dom-region-getregionflowranges
 List<Range> getRegionFlowRanges() native;

 @JSName('webkitRequestFullScreen')
 @DomName('Element.webkitRequestFullScreen')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#dom-element-requestfullscreen
 @deprecated // deprecated
 void requestFullScreen(int flags) native;

 @JSName('webkitRequestFullscreen')
 @DomName('Element.webkitRequestFullscreen')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#dom-element-requestfullscreen
 void requestFullscreen() native;

 @JSName('webkitRequestPointerLock')
 @DomName('Element.webkitRequestPointerLock')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.SAFARI)
 @Experimental
 // https://dvcs.w3.org/hg/pointerlock/raw-file/default/index.html#widl-Element-requestPointerLock-void
 void requestPointerLock() native;

 @DomName('Element.onabort')
 @DocsEditable
 Stream<Event> get onAbort => abortEvent.forTarget(this);

 @DomName('Element.onbeforecopy')
 @DocsEditable
 Stream<Event> get onBeforeCopy => beforeCopyEvent.forTarget(this);

 @DomName('Element.onbeforecut')
 @DocsEditable
 Stream<Event> get onBeforeCut => beforeCutEvent.forTarget(this);

 @DomName('Element.onbeforepaste')
 @DocsEditable
 Stream<Event> get onBeforePaste => beforePasteEvent.forTarget(this);

 @DomName('Element.onblur')
 @DocsEditable
 Stream<Event> get onBlur => blurEvent.forTarget(this);

 @DomName('Element.onchange')
 @DocsEditable
 Stream<Event> get onChange => changeEvent.forTarget(this);

 @DomName('Element.onclick')
 @DocsEditable
 Stream<MouseEvent> get onClick => clickEvent.forTarget(this);

 @DomName('Element.oncontextmenu')
 @DocsEditable
 Stream<MouseEvent> get onContextMenu => contextMenuEvent.forTarget(this);

 @DomName('Element.oncopy')
 @DocsEditable
 Stream<Event> get onCopy => copyEvent.forTarget(this);

 @DomName('Element.oncut')
 @DocsEditable
 Stream<Event> get onCut => cutEvent.forTarget(this);

 @DomName('Element.ondblclick')
 @DocsEditable
 Stream<Event> get onDoubleClick => doubleClickEvent.forTarget(this);

 @DomName('Element.ondrag')
 @DocsEditable
 Stream<MouseEvent> get onDrag => dragEvent.forTarget(this);

 @DomName('Element.ondragend')
 @DocsEditable
 Stream<MouseEvent> get onDragEnd => dragEndEvent.forTarget(this);

 @DomName('Element.ondragenter')
 @DocsEditable
 Stream<MouseEvent> get onDragEnter => dragEnterEvent.forTarget(this);

 @DomName('Element.ondragleave')
 @DocsEditable
 Stream<MouseEvent> get onDragLeave => dragLeaveEvent.forTarget(this);

 @DomName('Element.ondragover')
 @DocsEditable
 Stream<MouseEvent> get onDragOver => dragOverEvent.forTarget(this);

 @DomName('Element.ondragstart')
 @DocsEditable
 Stream<MouseEvent> get onDragStart => dragStartEvent.forTarget(this);

 @DomName('Element.ondrop')
 @DocsEditable
 Stream<MouseEvent> get onDrop => dropEvent.forTarget(this);

 @DomName('Element.onerror')
 @DocsEditable
 Stream<Event> get onError => errorEvent.forTarget(this);

 @DomName('Element.onfocus')
 @DocsEditable
 Stream<Event> get onFocus => focusEvent.forTarget(this);

 @DomName('Element.oninput')
 @DocsEditable
 Stream<Event> get onInput => inputEvent.forTarget(this);

 @DomName('Element.oninvalid')
 @DocsEditable
 Stream<Event> get onInvalid => invalidEvent.forTarget(this);

 @DomName('Element.onkeydown')
 @DocsEditable
 Stream<KeyboardEvent> get onKeyDown => keyDownEvent.forTarget(this);

 @DomName('Element.onkeypress')
 @DocsEditable
 Stream<KeyboardEvent> get onKeyPress => keyPressEvent.forTarget(this);

 @DomName('Element.onkeyup')
 @DocsEditable
 Stream<KeyboardEvent> get onKeyUp => keyUpEvent.forTarget(this);

 @DomName('Element.onload')
 @DocsEditable
 Stream<Event> get onLoad => loadEvent.forTarget(this);

 @DomName('Element.onmousedown')
 @DocsEditable
 Stream<MouseEvent> get onMouseDown => mouseDownEvent.forTarget(this);

 @DomName('Element.onmousemove')
 @DocsEditable
 Stream<MouseEvent> get onMouseMove => mouseMoveEvent.forTarget(this);

 @DomName('Element.onmouseout')
 @DocsEditable
 Stream<MouseEvent> get onMouseOut => mouseOutEvent.forTarget(this);

 @DomName('Element.onmouseover')
 @DocsEditable
 Stream<MouseEvent> get onMouseOver => mouseOverEvent.forTarget(this);

 @DomName('Element.onmouseup')
 @DocsEditable
 Stream<MouseEvent> get onMouseUp => mouseUpEvent.forTarget(this);

 @DomName('Element.onmousewheel')
 @DocsEditable
 // http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
 @Experimental // non-standard
 Stream<WheelEvent> get onMouseWheel => mouseWheelEvent.forTarget(this);

 @DomName('Element.onpaste')
 @DocsEditable
 Stream<Event> get onPaste => pasteEvent.forTarget(this);

 @DomName('Element.onreset')
 @DocsEditable
 Stream<Event> get onReset => resetEvent.forTarget(this);

 @DomName('Element.onscroll')
 @DocsEditable
 Stream<Event> get onScroll => scrollEvent.forTarget(this);

 @DomName('Element.onsearch')
 @DocsEditable
 // http://www.w3.org/TR/html-markup/input.search.html
 @Experimental
 Stream<Event> get onSearch => searchEvent.forTarget(this);

 @DomName('Element.onselect')
 @DocsEditable
 Stream<Event> get onSelect => selectEvent.forTarget(this);

 @DomName('Element.onselectstart')
 @DocsEditable
 @Experimental // nonstandard
 Stream<Event> get onSelectStart => selectStartEvent.forTarget(this);

 @DomName('Element.onsubmit')
 @DocsEditable
 Stream<Event> get onSubmit => submitEvent.forTarget(this);

 @DomName('Element.ontouchcancel')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 Stream<TouchEvent> get onTouchCancel => touchCancelEvent.forTarget(this);

 @DomName('Element.ontouchend')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 Stream<TouchEvent> get onTouchEnd => touchEndEvent.forTarget(this);

 @DomName('Element.ontouchenter')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 Stream<TouchEvent> get onTouchEnter => touchEnterEvent.forTarget(this);

 @DomName('Element.ontouchleave')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 Stream<TouchEvent> get onTouchLeave => touchLeaveEvent.forTarget(this);

 @DomName('Element.ontouchmove')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 Stream<TouchEvent> get onTouchMove => touchMoveEvent.forTarget(this);

 @DomName('Element.ontouchstart')
 @DocsEditable
 // http://www.w3.org/TR/touch-events/, http://www.chromestatus.com/features
 @Experimental
 Stream<TouchEvent> get onTouchStart => touchStartEvent.forTarget(this);

 @DomName('Element.ontransitionend')
 @DocsEditable
 @SupportedBrowser(SupportedBrowser.CHROME)
 @SupportedBrowser(SupportedBrowser.FIREFOX)
 @SupportedBrowser(SupportedBrowser.IE, '10')
 @SupportedBrowser(SupportedBrowser.SAFARI)
 Stream<TransitionEvent> get onTransitionEnd => transitionEndEvent.forTarget(this);

 @DomName('Element.onwebkitfullscreenchange')
 @DocsEditable
 // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
 @Experimental
 Stream<Event> get onFullscreenChange => fullscreenChangeEvent.forTarget(this);

 @DomName('Element.onwebkitfullscreenerror')
 @DocsEditable
 // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
 @Experimental
 Stream<Event> get onFullscreenError => fullscreenErrorEvent.forTarget(this);

}