Add <a is="action-link">, a web component extension of <a> for in-page actions.

ui/webui/resources/js/action_link.js

+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Action links are elements that are used to perform an in-page navigation or
+// action (e.g. showing a dialog).
+//
+// They look like normal anchor (<a>) tags as their text color is blue. However,
+// they're subtly different as they're not initially underlined (giving users a
+// clue that underlined links navigate while action links don't).
+//
+// Action links look very similar to normal links when hovered (hand cursor,
+// underlined). This gives the user an idea that clicking this link will do
+// something similar to navigation but in the same page.
+//
+// They can be created in JavaScript like this:
+//
+//   var link = document.createElement('a', 'action-link');  // Note second arg.
+//
+// or with a constructor like this:
+//
+//   var link = new ActionLink();
+//
+// They can be used easily from HTML as well, like so:
+//
+//   <a is="action-link">Click me!</a>
+//
+// Using the <action-link> tag or document.createElement('action-link') is not
+// currently supported and is not the preferred way of extending tags.
+
+/**
+ * @constructor
+ * @extends {HTMLAnchorElement}
+ */
+var ActionLink = document.registerElement('action-link', {
+  prototype: {
+    __proto__: HTMLAnchorElement.prototype,
+
+    createdCallback: function() {
+      if (this.tagName == 'action-link')
+        throw 'Use <a is="action-link"> instead of <action-link>';
+
+      // Links aren't tabble unless there's an [href] attribute set. Setting
+      // this adds undesirable "Open link in new tab..." context menu handlers
+      // so just manually add to tab order instead.
+      this.tabIndex = 0;
+
+      this.addEventListener('click', function(e) {
+        e.preventDefault();
+      });
+
+      this.addEventListener('keydown', function(e) {
+        if (e.keyIdentifier == 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+          this.click();
+        }
+      });
+    },
+  },
+  extends: 'a',
+});