make :host styles work.

Polymer · Apr 10, 2014 · 5b62412 · 5b62412
1 parent 5d68242
commit 5b62412
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/elements/x-design-host/x-design-host.html b/elements/x-design-host/x-design-host.html
@@ -20,16 +20,25 @@
     },
 
     dumpTag: function(serializer, indent, tab) {
+      // convert to :host
+      if (this.__styleRule) {
+        var selectorText = this.__styleRule.selectorText;
+        this.__styleRule.selectorText = ':host';
+      }
       var indented = indent + tab, attrs = '';
       var attrs = this.dumpAttributes();
-      return indent + '<polymer-element' + attrs + '>\n\n' + 
+      var html = indent + '<polymer-element' + attrs + '>\n\n' + 
           indented + '<template>\n' +
           serializer.dumpChildren(this,indented + tab) +
           indented + '</template>\n\n' +
           indented + '<sc' + 'ript>\n\n' +
           indented + tab + this.dumpScript(indented + tab, tab) +
           indented + '</sc' + 'ript>\n\n' +
           indent + '</polymer-element>';
+      if (selectorText) {
+        this.__styleRule.selectorText = selectorText;
+      }
+      return html;
     },
 
     dumpAttributes: function() {
@@ -76,6 +85,12 @@
       // absorb template
       var template = this.polymerElement.querySelector('template');
       if (template) {
+        // absorb styles, convert :host style
+        var style = template.content.querySelector('style');
+        if (style) {
+          style.textContent = style.textContent.replace(/\:host/g, 
+              '#' + this.id);
+        }
         // make imports go...
         this.loadElementImports(template.content, function() {
           // TODO(sorvell): note, event handlers will work if we use a 

diff --git a/elements/x-designable/x-designable.html b/elements/x-designable/x-designable.html
@@ -30,8 +30,12 @@
 
     ready: function() {
       this.meta = document.createElement('x-meta');
+    },
+
+    attached: function() {
       this.makeDesignHost();
-      this.appendChild(this.designHost);
+      this.styleDesignHost();
+      this.selected = this.designHost;
     },
 
     // communication
@@ -289,7 +293,6 @@
         //
         this.drag(dragInfo);
         this.selected = elt;
-        //Platform.flush();
       }
     },
 
@@ -390,15 +393,32 @@
       this.innerHTML = '';
       this.makeDesignHost();
       this.designHost.loadHtml(html, function() {
-        this.appendChild(this.designHost);
         this.notify();
         this.selected = this.designHost;
       }.bind(this));
     },
 
     makeDesignHost: function() {
+      this.styleElement = null;
       this.designHost = document.createElement('x-design-host');
+      this.applyUniqueId(this.designHost);
       this.designHost.meta = this.meta;
+      this.appendChild(this.designHost);
+    },
+
+    styleDesignHost: function() {
+      var s = this.ruleForElement(this.designHost).style;
+      if (!s.position) {
+        s.position = 'absolute';
+      }
+      var size = '100%';
+      if (!s.width) {
+        s.width = size;
+      }
+      if (!s.height) {
+        s.height = size;
+      }
+      s.boxSizing = 'border-box';
     },
 
     setupStyleElement: function() {