WebUI: Update action-link element to use Shadow DOM v1.

Bug: 837381
Change-Id: I5421657d43646c768def7a5ccf235b9eb483e2e2
Reviewed-on: https://chromium-review.googlesource.com/c/1336548Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608224}

ui/webui/resources/js/action_link.js

@@ -27,19 +27,8 @@
 //
 // NOTE: <action-link> and document.createElement('action-link') don't work.
 
-/**
- * See crbug.com/837381
- * @suppress {deprecated}
- *
- * @constructor
- * @extends {HTMLAnchorElement}
- */
-var ActionLink = document.registerElement('action-link', {
-  prototype: {
-    __proto__: HTMLAnchorElement.prototype,
-
-    /** @this {ActionLink} */
-    createdCallback: function() {
+class ActionLink extends HTMLAnchorElement {
+  connectedCallback() {
     // Action links can start disabled (e.g. <a is="action-link" disabled>).
     this.tabIndex = this.disabled ? -1 : 0;
 
@@ -81,36 +70,35 @@ var ActionLink = document.registerElement('action-link', {
     this.addEventListener('blur', function() {
       this.classList.remove('no-outline');
     });
-    },
+  }
 
-    /** @type {boolean} */
+  /** @param {boolean} disabled */
   set disabled(disabled) {
     if (disabled)
       HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', '');
     else
       HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled');
     this.tabIndex = disabled ? -1 : 0;
-    },
+  }
+
   get disabled() {
     return this.hasAttribute('disabled');
-    },
+  }
 
   /** @override */
-    setAttribute: function(attr, val) {
+  setAttribute(attr, val) {
     if (attr.toLowerCase() == 'disabled')
       this.disabled = true;
     else
       HTMLAnchorElement.prototype.setAttribute.apply(this, arguments);
-    },
+  }
 
   /** @override */
-    removeAttribute: function(attr) {
+  removeAttribute(attr) {
     if (attr.toLowerCase() == 'disabled')
       this.disabled = false;
     else
       HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments);
-    },
-  },
-
-  extends: 'a',
-});
+  }
+}
+customElements.define('action-link', ActionLink, {extends: 'a'});