Add "created-watcher" to the web_components package. This was adapted from

pkg/web_components/lib/created_watcher.js

+// Copyright (c) 2014, 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.
+
+// Updates document.registerElement so Dart can see when Javascript custom
+// elements are created, and wrap them to provide a Dart friendly API.
+(function (doc) {
+  var originalRegisterElement = doc.registerElement;

[Siggi Cherem (dart-lang), 2014/06/06 22:31:47]

this changed from document to doc

+  if (!originalRegisterElement) {
+    throw new Error('document.registerElement is not present.');
+  }
+
+  function registerElement(name, options) {
+    var newOptions = Object.create(options);

[justinfagnani, 2014/06/06 23:33:05]

Why setup a prototype and copy ownProperties? I would expect one or the other.

[Siggi Cherem (dart-lang), 2014/06/09 17:10:27]

very good questions. I had many discussions here with Pete and John about how to
go about it. One option was to extend the prototype chain, but that could have a
visible impact in JS.

Following John's suggestion, I decided to change this to work by redefining the
property in-place.

+    for (var attr in options) {
+      if (options.hasOwnProperty(attr)) {
+        newOptions[attr] = options[attr];
+      }
+    }
+
+    var originalCreated = newOptions.prototype.createdCallback;
+    newOptions.prototype.createdCallback = function() {
+      originalCreated.call(this);
+
+      var key = getTagKey(this.tagName, this.getAttribute('is'));
+      var watchers = createdWatchers[key];
+      if (!watchers) {
+        return;
+      }
+      for (var i = 0, w; (w = watchers[i]); i++) {
+        invokeWatcher(this, w);
+      }
+    };
+
+    return originalRegisterElement.call(doc, name, newOptions);
+  }
+
+  function invokeWatcher(node, watcher) {
+    if (watcher.createdCallback) {
+      watcher.createdCallback.call(node);
+    }
+  }
+
+  // Unique key for the tagName & extends combo
+  function getTagKey(tagName, isTag) {
+    if (isTag) {
+      // '.' is a reserved character for XML names, so safe to use.

[justinfagnani, 2014/06/06 23:33:05]

I think this will be simpler if you just use isTag if present and not use the
dot-notation. There's no need to encode the "super" element that I can see.

[Siggi Cherem (dart-lang), 2014/06/09 17:10:28]

Good idea. Done.

+      return tagName.toUpperCase() + '.' + isTag.toUpperCase();
+    }
+    return tagName.toUpperCase();
+  }
+
+  var createdWatchers = {};

[justinfagnani, 2014/06/06 23:33:05]

what's our style here, var declarations in the middle of a module-like-thing?

[Siggi Cherem (dart-lang), 2014/06/09 17:10:27]

I moved it up because it is used above, but I honestly don't have an answer re:
style.

+
+
+  function registerElementCreatedWatcher(name, options) {
+    if (!options) return;
+
+    var tagName = options.extends || name;
+    var key = getTagKey(tagName, options.extends ? name : undefined);

[Siggi Cherem (dart-lang), 2014/06/06 22:31:47]

this changed from:
  getTagKey(name, options.extends)

(the order was swapped when extending tags).

[justinfagnani, 2014/06/06 23:33:05]

Same as the comment above, except just always use tagName.

On 2014/06/06 22:31:47, Siggi Cherem (dart-lang) wrote:

[Siggi Cherem (dart-lang), 2014/06/09 17:10:27]

Done.

+    if (key in createdWatchers) {
+      createdWatchers[key].push(options);
+    } else {
+      createdWatchers[key] = [options];
+    }
+  }
+
+  doc.registerElementCreatedWatcher = registerElementCreatedWatcher;
+  doc.registerElement = registerElement;
+})(document);