From cbf06681387bad2930a887e3c7f849f9069ca447 Mon Sep 17 00:00:00 2001 From: Tolan Blundell Date: Wed, 27 Jan 2016 15:59:40 +0100 Subject: [PATCH 1/3] Allow creation of components with no shadow dom by setting 'noshadowroot' attribute on the template. --- minimalComponent.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/minimalComponent.js b/minimalComponent.js index ef84290..35a4372 100644 --- a/minimalComponent.js +++ b/minimalComponent.js @@ -51,7 +51,11 @@ window.MinimalComponent = { } // Instantiate template. - this.root = this.createShadowRoot(); + if (this.template.getAttribute("noshadowroot") !== null) { + this.root = this; + } else { + this.root = this.createShadowRoot(); + } var clone = document.importNode(this.template.content, true); this.root.appendChild(clone); From 8175c421373727d2c272de0bb7066f406bd3b876 Mon Sep 17 00:00:00 2001 From: Tolan Blundell Date: Wed, 27 Jan 2016 16:02:07 +0100 Subject: [PATCH 2/3] Use _takeAttributesToModel() instead of _marshalAttributes() as the latter breaks if another component on the page use using full fat Polymer. --- minimalComponent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/minimalComponent.js b/minimalComponent.js index 35a4372..dddc6b9 100644 --- a/minimalComponent.js +++ b/minimalComponent.js @@ -65,7 +65,7 @@ window.MinimalComponent = { // Initialize property values from attributes. // This invokes an undocumented method internal to Polymer. - this._marshalAttributes(); + this._takeAttributesToModel(this); } }; From cd5fe0dfc33a61717c51c2b00e8dc589fad382ce Mon Sep 17 00:00:00 2001 From: Tolan Blundell Date: Wed, 27 Jan 2016 16:04:00 +0100 Subject: [PATCH 3/3] Add a small helper shortcut to this.root.querySelector, mainly for use with non-shadow rooted components. --- minimalComponent.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/minimalComponent.js b/minimalComponent.js index dddc6b9..5d26a1b 100644 --- a/minimalComponent.js +++ b/minimalComponent.js @@ -66,6 +66,11 @@ window.MinimalComponent = { // Initialize property values from attributes. // This invokes an undocumented method internal to Polymer. this._takeAttributesToModel(this); + + // Shortcut for this.root.querySelector(). + // Mainly useful when not using a shadow root, + // where the this.$ syntax shouldn't really be used + this.qs = this.root.querySelector.bind(this.root); } };