Port sky-scrollable to Dart

sky/framework/sky-element.sky

Index: sky/framework/sky-element.sky
diff --git a/sky/framework/sky-element.sky b/sky/framework/sky-element.sky
index 8b04f79a5048e9db4bf0f0b5abfcd32df0616953..2e80eb2be1c90b2ab59936ecc1076e185e193008 100644
--- a/sky/framework/sky-element.sky
+++ b/sky/framework/sky-element.sky
@@ -47,8 +47,7 @@ abstract class SkyElement extends Element {
       var registration = _registery[tagName];
       if (registration.template != null) {
         ShadowRoot shadow = ensureShadowRoot();
-        var tree = registration.template.content.cloneNode(deep:true);
-        shadow.appendChild(tree);
+        shadow.appendChild(_cloneDeep(registration.template.content));

[abarth-chromium, 2015/02/21 09:15:49]

Custom elements don't quite work properly with the implicit "adoptNode" call
that existed here previously.  The problem is that the template has a separate
element registry (to avoid inflating custom elements in templates) and when we
adopt the cloned elements, we keep their identity (by mutating their document
field).  That means we end up with elements in the main document that weren't
created with the main document's element registry.

What I've done here is to clone the template manually and create new elements in
the main document, which lets us use the correct element registry.

[abarth-chromium, 2015/02/21 09:15:49]

Custom elements don't quite work properly with the implicit "adoptNode" call
that existed here previously.  The problem is that the template has a separate
element registry (to avoid inflating custom elements in templates) and when we
adopt the cloned elements, we keep their identity (by mutating their document
field).  That means we end up with elements in the main document that weren't
created with the main document's element registry.

What I've done here is to clone the template manually and create new elements in
the main document, which lets us use the correct element registry.

[esprehn, 2015/02/21 09:57:13]

We should use importNode, which clones you into the right document.

         shadowRootReady();
       }
     }
@@ -62,6 +61,25 @@ abstract class SkyElement extends Element {
   attributeChangedCallback(name, oldValue, newValue) {
     attributeChanged(name, oldValue, newValue);
   }
+
+  Node _clone(Node node) {
+    if (node is Element) {
+      Element result = document.createElement(node.tagName);
+      result.setAttributes(node.getAttributes());
+      return result;
+    }
+    return node.cloneNode(deep: false);
+  }
+
+  Node _cloneDeep(Node node) {
+    Node result = _clone(node);
+    if (node is ParentNode) {
+      ParentNode parent = node as ParentNode;
+      for (Node child = parent.firstChild; child != null; child = child.nextSibling)
+        result.appendChild(_cloneDeep(child));
+    }
+    return result;
+  }

[esprehn, 2015/02/21 09:57:13]

This is duplicating what importNode already does.

 }
 
 void register(Element script, Type type) {