Port sky-scrollable to Dart

sky/framework/sky-element.sky

 <!--
 // Copyright 2015 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.
 -->
 <script>
 import "dart:mirrors";
 import "dart:sky";
 
 class _Registration {
@@ skipping 29 matching lines @@
     // Invoke attributeChanged callback when element is first created too.
     for (Attr attribute in getAttributes())
       attributeChangedCallback(attribute.name, null, attribute.value);
   }
 
   attachedCallback() {
     if (shadowRoot == null) {
       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();
       }
     }
     attached();
   }
 
   detachedCallback() {
     detached();
   }
 
   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) {
   Element definition = script.parentNode;
 
   if (definition.tagName != 'sky-element')
     throw new UnsupportedError('register() calls must be inside a <sky-element>.');
 
   ClassMirror mirror = reflectClass(type);
   if (!mirror.isSubclassOf(reflectClass(SkyElement)))
     throw new UnsupportedError('@Tagname can only be used on descendants of SkyElement');
 
   String tagName = _getTagName(type);
   Element template = definition.querySelector('template');
 
   document.registerElement(tagName, type);
   _registery[tagName] = new _Registration(template);
 }
 </script>