diff --git a/lib/mixins/dir-mixin.html b/lib/mixins/dir-mixin.html
index a044e9f73e..8773d83faa 100644
--- a/lib/mixins/dir-mixin.html
+++ b/lib/mixins/dir-mixin.html
@@ -44,12 +44,19 @@
     }
 
     function updateDirection() {
+      getRTL();
       DOCUMENT_DIR = document.documentElement.getAttribute('dir');
       for (let i = 0; i < DIR_INSTANCES.length; i++) {
         setRTL(DIR_INSTANCES[i]);
       }
     }
 
+    function takeRecords() {
+      if (observer && observer.takeRecords().length) {
+        updateDirection();
+      }
+    }
+
     /**
      * Element class mixin that allows elements to use the `:dir` CSS Selector to have
      * text direction specific styling.
@@ -133,22 +140,22 @@
           this.__autoDirOptOut = /** @type {!HTMLElement} */(this).hasAttribute('dir');
         }
 
-        /** @suppress {missingProperties} Closure's understanding of prototypes is bad */
+        /** @suppress {missingProperties} If it exists on elementBase, it can be super'd */
         connectedCallback() {
           if (elementBase.prototype.connectedCallback) {
-            /** @type {!Polymer_ElementMixin} */(elementBase).prototype.connectedCallback.call(this);
+            super.connectedCallback();
           }
           if (this.constructor.__activateDir) {
+            takeRecords();
             DIR_INSTANCES.push(this);
-            getRTL();
             setRTL(this);
           }
         }
 
-        /** @suppress {missingProperties} Closure's understanding of prototypes is bad */
+        /** @suppress {missingProperties} If it exists on elementBase, it can be super'd */
         disconnectedCallback() {
           if (elementBase.prototype.disconnectedCallback) {
-            /** @type {!Polymer_ElementMixin} */(elementBase).prototype.disconnectedCallback.call(this);
+            super.disconnectedCallback();
           }
           if (this.constructor.__activateDir) {
             const idx = DIR_INSTANCES.indexOf(this);