Add a helper for getting shadowRoots by element name, e.g. this.shado…

…wRoots['x-foo']; fixes Polymer/polymer#310
googlearchive · Feb 12, 2014 · 573f4c5 · 573f4c5
1 parent 74c3d71
commit 573f4c5
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/src/instance/base.js b/src/instance/base.js
@@ -27,6 +27,8 @@
     // system entry point, do not override
     prepareElement: function() {
       this._elementPrepared = true;
+      // install shadowRoots storage
+      this.shadowRoots = {};
       // install property observers
       this.observeProperties();
       // install boilerplate attributes
@@ -103,7 +105,8 @@
     parseDeclaration: function(elementElement) {
       var template = this.fetchTemplate(elementElement);
       if (template) {
-        this.shadowFromTemplate(template);
+        var root = this.shadowFromTemplate(template);
+        this.shadowRoots[elementElement.name] = root;        
       }
     },
     // return a shadow-root template (if desired), override for custom behavior
@@ -113,8 +116,6 @@
     // utility function that creates a shadow root from a <template>
     shadowFromTemplate: function(template) {
       if (template) {
-        // cache elder shadow root (if any)
-        var elderRoot = this.shadowRoot;
         // make a shadow root
         var root = this.createShadowRoot();
         // migrate flag(s)

diff --git a/test/html/shadowroots.html b/test/html/shadowroots.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+  <head>
+    <title>shadowRoots test</title>
+    <script src="../../../platform/platform.js"></script>
+    <link rel="import" href="../../polymer.html">
+    <script src="../../../tools/test/htmltest.js"></script>
+    <script src="../../../tools/test/chai/chai.js"></script>
+  </head>
+  <body>
+
+    <x-zot>I am x-foo.</x-zot>
+
+    <polymer-element name="x-foo" noscript>
+
+      <template>
+        <div id="foo"></div>
+      </template>
+
+    </polymer-element>
+
+    <polymer-element name="x-bar" extends="x-foo" noscript>
+
+      <template>
+        <div id="bar"></div>
+      </template>
+
+    </polymer-element>
+
+    <polymer-element name="x-zot" extends="x-bar">
+      <template>
+        <div id="zot"></div>
+      </template>
+      <script>
+        Polymer('x-zot', {
+          ready: function() {
+            chai.assert.equal(this.shadowRoots['x-foo'].querySelector('#foo'),
+                this.$.foo);
+            chai.assert.equal(this.shadowRoots['x-bar'].querySelector('#bar'),
+                this.$.bar);
+            chai.assert.equal(this.shadowRoots['x-zot'].querySelector('#zot'),
+                this.$.zot);
+            done();
+          }
+        });
+      </script>
+    </polymer-element>
+  </body>
+</html>
diff --git a/test/js/marshall.js b/test/js/marshall.js
@@ -23,4 +23,8 @@ suite('marshall', function() {
     assert.equal(foo.$.bar.textContent, 'barContent');
     assert.equal(foo.$.zot.textContent, 'zotContent');
   });
-});
+});
+
+htmlSuite('shadowRoots', function() {
+  htmlTest('html/shadowroots.html');
+});