Explicitly set display none on dom-* elements (#4821)

TimvdLippe · web-flow · commit 65859b1cd7d9 · 2017-09-01T17:44:35.000-07:00
diff --git a/lib/elements/dom-bind.html b/lib/elements/dom-bind.html
@@ -67,6 +67,7 @@
       }
 
       connectedCallback() {
+        this.style.display = 'none';
         this.render();
       }
 
diff --git a/lib/elements/dom-if.html b/lib/elements/dom-if.html
@@ -128,6 +128,7 @@
 
     connectedCallback() {
       super.connectedCallback();
+      this.style.display = 'none';
       if (this.if) {
         this.__debounceRender();
       }
diff --git a/lib/elements/dom-repeat.html b/lib/elements/dom-repeat.html
@@ -302,6 +302,7 @@
 
     connectedCallback() {
       super.connectedCallback();
+      this.style.display = 'none';
       // only perform attachment if the element was previously detached.
       if (this.__isDetached) {
         this.__isDetached = false;
diff --git a/test/smoke/dom-if.html b/test/smoke/dom-if.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+<head>
+  <link rel="import" href="../../polymer.html">
+</head>
+<body>
+
+
+  <dom-module id="my-element">
+    
+    <template>
+      <style>
+        :host {
+          display: block;
+        }
+        .parent {
+          border: 1px solid red;
+          justify-content: space-between;
+          width: 300px;
+          display: flex;
+        }
+        .child {
+          border: 1px solid green;
+          width: 100px;
+        }
+      </style>
+      <div class='parent'>
+        <div class='child'>Child1</div>        
+        <template is='dom-if' if='1'>
+          <div class='child'>Child2</div>
+        </template>
+      </div>
+    </template>
+
+   
+    <!-- Uncomment for class syntax -->
+    <script>
+      class MyElement extends Polymer.Element {
+        static get is() { return 'my-element'; }
+        static get properties() {
+          return {
+            prop: {
+              type: String
+            }
+          }
+        }
+        constructor() {
+          super();
+          this.prop = 'my-element'
+        }
+      }
+      customElements.define(MyElement.is, MyElement);
+      
+    </script>
+    
+  </dom-module>
+
+  <my-element></my-element>
+  
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,7 @@`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`connectedCallback() {`
	`70`	`+ this.style.display = 'none';`
`70`	`71`	`this.render();`
`71`	`72`	`}`
`72`	`73`
Original file line number	Diff line number	Diff line change
`@@ -128,6 +128,7 @@`
`128`	`128`
`129`	`129`	`connectedCallback() {`
`130`	`130`	`super.connectedCallback();`
	`131`	`+ this.style.display = 'none';`
`131`	`132`	`if (this.if) {`
`132`	`133`	`this.__debounceRender();`
`133`	`134`	`}`