Fix :dir selectors with nested custom elements

Fixes #4966
Polymer · Dec 4, 2017 · 3b76e86 · 3b76e86
1 parent 1fbb504
commit 3b76e86
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/lib/mixins/dir-mixin.html b/lib/mixins/dir-mixin.html
@@ -16,7 +16,7 @@
     const HOST_DIR = /:host\(:dir\((ltr|rtl)\)\)/g;
     const HOST_DIR_REPLACMENT = ':host([dir="$1"])';
 
-    const EL_DIR = /([\s\w#\.\[\]\*]*):dir\((ltr|rtl)\)/g;
+    const EL_DIR = /([\s\w-#\.\[\]\*]*):dir\((ltr|rtl)\)/g;
     const EL_DIR_REPLACMENT = ':host([dir="$2"]) $1';
 
     /**

diff --git a/test/unit/dir.html b/test/unit/dir.html
@@ -131,6 +131,54 @@
     </template>
   </test-fixture>
 
+  <script>
+    addEventListener('WebComponentsReady', () => {
+      class OtherElement extends Polymer.Element {}
+      customElements.define('other-element', OtherElement);
+    });
+  </script>
+
+  <dom-module id="x-complicated">
+    <template>
+      <style>
+        #direct:dir(rtl) {
+          border: 10px solid black;
+        }
+        :dir(rtl) #indirect {
+          border: 9px solid black;
+        }
+        other-element:dir(rtl) {
+          border: 8px solid black;
+        }
+        #container:dir(rtl) ::slotted(*) {
+          border: 7px solid black;
+        }
+      </style>
+      <div id="direct"></div>
+      <div id="indirect"></div>
+      <other-element id="other"></other-element>
+      <div id="container">
+        <slot></slot>
+      </div>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', () => {
+        class XComplicated extends Polymer.DirMixin(Polymer.Element) {
+          static get is() {return 'x-complicated'}
+        }
+        customElements.define(XComplicated.is, XComplicated);
+      })
+    </script>
+  </dom-module>
+
+  <test-fixture id="complicated">
+    <template>
+      <x-complicated>
+        <div></div>
+      </x-complicated>
+    </template>
+  </test-fixture>
+
   <script>
     function assertComputed(node, expected, property = 'border-top-width') {
       let actual = getComputedStyle(node).getPropertyValue(property).trim();
@@ -195,6 +243,14 @@
         let el = fixture('legacy');
         assertComputed(el, '2px');
       });
+
+      test('complicated setup', function() {
+        let el = fixture('complicated');
+        assertComputed(el.$.direct, '10px');
+        assertComputed(el.$.indirect, '9px');
+        assertComputed(el.$.other, '8px');
+        assertComputed(el.firstElementChild, '7px');
+      });
     });
   </script>
 </body>