Fix style scope issues in dynamically named slotted items

vaadin · May 24, 2018 · ff7230f · ff7230f
1 parent 2aa9780
commit ff7230f
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 1 deletion.
diff --git a/src/vaadin-split-layout.html b/src/vaadin-split-layout.html
@@ -65,6 +65,10 @@
       <div part="handle"></div>
     </div>
     <slot id="secondary" name="secondary"></slot>
+
+    <div hidden>
+      <slot></slot>
+    </div>
   </template>
 
   <script>

diff --git a/test/observer-component.html b/test/observer-component.html
@@ -0,0 +1,37 @@
+<link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../polymer/lib/utils/flattened-nodes-observer.html">
+
+<dom-module id="observer-component">
+  <template>
+    <style>
+      .bluetext {
+        color: rgb(0, 0, 255);
+      }
+    </style>
+  </template>
+</dom-module>
+
+<script>
+  class ObserverComponent extends Polymer.Element {
+
+    static get is() {
+      return 'observer-component';
+    }
+
+    ready() {
+      super.ready();
+      this._observer = new Polymer.FlattenedNodesObserver(this, info => {
+        this._blueText = document.createElement('div');
+        this._blueText.classList.add('bluetext');
+        this._blueText.innerHTML = 'blue';
+        this.shadowRoot.appendChild(this._blueText);
+      });
+    }
+
+    getTextColor() {
+      return getComputedStyle(this._blueText).color;
+    }
+  }
+
+  customElements.define(ObserverComponent.is, ObserverComponent);
+</script>
diff --git a/test/style-scope.html b/test/style-scope.html
@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>vaadin-split-layout test</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../../web-component-tester/browser.js"></script>
+    <link rel="import" href="./observer-component.html">
+    <link rel="import" href="../vaadin-split-layout.html">
+  </head>
+  <body>
+
+    <vaadin-split-layout>
+      <observer-component>
+        <div></div>
+      </observer-component>
+      <div>Bar</div>
+      <div id="invisible">Baz</div>
+    </vaadin-split-layout>
+
+    <script>
+      describe('style scope', () => {
+        it('should have the right color', () => {
+          const observerComponent = document.querySelector('observer-component');
+          expect(observerComponent.getTextColor()).to.equal('rgb(0, 0, 255)');
+        });
+
+        it('should not display the third element', () => {
+          const invisible = document.querySelector('#invisible');
+          expect(invisible.clientHeight).to.equal(0);
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -1,3 +1,4 @@
 window.VaadinSplitLayoutSuites = [
-  'vaadin-split-layout_test.html'
+  'vaadin-split-layout_test.html',
+  'style-scope.html',
 ];