diff --git a/externs/closure-types.js b/externs/closure-types.js
index 1693309012..2690b54e2c 100644
--- a/externs/closure-types.js
+++ b/externs/closure-types.js
@@ -1,7 +1,4 @@
 /**
- * @fileoverview Closure types for Polymer mixins
- * @externs
- *
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
  * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@@ -1346,13 +1343,10 @@ Polymer_ElementMixin.finalize = function(){};
 */
 Polymer_ElementMixin._processStyleText = function(is, template, baseURI){};
 /**
-* @param {!PolymerElement} proto Element class prototype to add accessors
-  and effects to
-* @param {!HTMLTemplateElement} template Template to process and bind
 * @param {string} is Tag name (or type extension name) for this element
 * @param {string=} ext For type extensions, the tag name that was extended
 */
-Polymer_ElementMixin._finalizeTemplate = function(proto, template, is, ext){};
+Polymer_ElementMixin._finalizeTemplate = function(is, ext){};
 /**
 * @interface
 */
@@ -1371,6 +1365,146 @@ Polymer_GestureEventListeners.prototype._addEventListenerToNode = function(node,
 Polymer_GestureEventListeners.prototype._removeEventListenerFromNode = function(node, eventName, handler){};
 /**
 * @interface
+* @extends {Polymer_PropertyAccessors}
+*/
+function Polymer_DirMixin(){}
+/** @type {boolean} */
+Polymer_DirMixin.prototype.__autoDirOptOut;
+
+/**
+* @param {string} name Name of attribute that changed
+* @param {?string} old Old attribute value
+* @param {?string} value New attribute value
+*/
+Polymer_DirMixin.prototype.attributeChangedCallback = function(name, old, value){};
+/**
+* @return {undefined}
+*/
+Polymer_DirMixin.prototype._initializeProperties = function(){};
+/**
+* @param {Object} props Bag of property values that were overwritten
+  when creating property accessors.
+*/
+Polymer_DirMixin.prototype._initializeProtoProperties = function(props){};
+/**
+* @param {Object} props Bag of property values that were overwritten
+  when creating property accessors.
+*/
+Polymer_DirMixin.prototype._initializeInstanceProperties = function(props){};
+/**
+* @param {string} attribute Name of attribute to ensure is set.
+* @param {string} value of the attribute.
+*/
+Polymer_DirMixin.prototype._ensureAttribute = function(attribute, value){};
+/**
+* @param {string} attribute Name of attribute to deserialize.
+* @param {?string} value of the attribute.
+* @param {*=} type type to deserialize to.
+*/
+Polymer_DirMixin.prototype._attributeToProperty = function(attribute, value, type){};
+/**
+* @param {string} property Property name to reflect.
+* @param {string=} attribute Attribute name to reflect.
+* @param {*=} value Property value to refect.
+*/
+Polymer_DirMixin.prototype._propertyToAttribute = function(property, attribute, value){};
+/**
+* @param {Element} node Element to set attribute to.
+* @param {*} value Value to serialize.
+* @param {string} attribute Attribute name to serialize to.
+*/
+Polymer_DirMixin.prototype._valueToNodeAttribute = function(node, value, attribute){};
+/**
+* @param {*} value Property value to serialize.
+* @return {(string|undefined)}
+*/
+Polymer_DirMixin.prototype._serializeValue = function(value){};
+/**
+* @param {?string} value Attribute value to deserialize.
+* @param {*=} type Type to deserialize the string to.
+* @return {*}
+*/
+Polymer_DirMixin.prototype._deserializeValue = function(value, type){};
+/**
+* @param {string} property Name of the property
+* @param {boolean=} readOnly When true, no setter is created; the
+  protected `_setProperty` function must be used to set the property
+*/
+Polymer_DirMixin.prototype._createPropertyAccessor = function(property, readOnly){};
+/**
+* @param {string} property Property name
+* @return {boolean}
+*/
+Polymer_DirMixin.prototype._hasAccessor = function(property){};
+/**
+* @param {string} property Name of the property
+* @param {*} value Value to set
+*/
+Polymer_DirMixin.prototype._setProperty = function(property, value){};
+/**
+* @param {string} property Name of the property
+* @param {*} value Value to set
+* @return {boolean}
+*/
+Polymer_DirMixin.prototype._setPendingProperty = function(property, value){};
+/**
+* @param {string} prop Property name
+* @return {boolean}
+*/
+Polymer_DirMixin.prototype._isPropertyPending = function(prop){};
+/**
+* @return {undefined}
+*/
+Polymer_DirMixin.prototype._invalidateProperties = function(){};
+/**
+* @return {undefined}
+*/
+Polymer_DirMixin.prototype._enableProperties = function(){};
+/**
+* @return {undefined}
+*/
+Polymer_DirMixin.prototype._flushProperties = function(){};
+/**
+* @return {undefined}
+*/
+Polymer_DirMixin.prototype.ready = function(){};
+/**
+* @param {!Object} currentProps Bag of all current accessor values
+* @param {!Object} changedProps Bag of properties changed since the last
+  call to `_propertiesChanged`
+* @param {!Object} oldProps Bag of previous values for each property
+  in `changedProps`
+*/
+Polymer_DirMixin.prototype._propertiesChanged = function(currentProps, changedProps, oldProps){};
+/**
+* @param {string} property Property name
+* @param {*} value New property value
+* @param {*} old Previous property value
+* @return {boolean}
+*/
+Polymer_DirMixin.prototype._shouldPropertyChange = function(property, value, old){};
+/**
+* @return {undefined}
+*/
+Polymer_DirMixin.prototype.connectedCallback = function(){};
+/**
+* @return {undefined}
+*/
+Polymer_DirMixin.prototype.disconnectedCallback = function(){};
+/**
+*/
+Polymer_DirMixin.createPropertiesForAttributes = function(){};
+/**
+* @override
+*/
+Polymer_DirMixin._processStyleText = function(is, template, baseURI){};
+/**
+* @param {string} text CSS text to replace DIR
+* @return {string}
+*/
+Polymer_DirMixin._replaceDirInCssText = function(text){};
+/**
+* @interface
 * @extends {Polymer_ElementMixin}
 * @extends {Polymer_GestureEventListeners}
 */
@@ -2196,13 +2330,10 @@ Polymer_LegacyElementMixin.finalize = function(){};
 */
 Polymer_LegacyElementMixin._processStyleText = function(is, template, baseURI){};
 /**
-* @param {!PolymerElement} proto Element class prototype to add accessors
-  and effects to
-* @param {!HTMLTemplateElement} template Template to process and bind
 * @param {string} is Tag name (or type extension name) for this element
 * @param {string=} ext For type extensions, the tag name that was extended
 */
-Polymer_LegacyElementMixin._finalizeTemplate = function(proto, template, is, ext){};
+Polymer_LegacyElementMixin._finalizeTemplate = function(is, ext){};
 /**
 * @interface
 */
@@ -2797,538 +2928,7 @@ Polymer_ArraySelectorMixin.finalize = function(){};
 */
 Polymer_ArraySelectorMixin._processStyleText = function(is, template, baseURI){};
 /**
-* @param {!PolymerElement} proto Element class prototype to add accessors
-  and effects to
-* @param {!HTMLTemplateElement} template Template to process and bind
-* @param {string} is Tag name (or type extension name) for this element
-* @param {string=} ext For type extensions, the tag name that was extended
-*/
-Polymer_ArraySelectorMixin._finalizeTemplate = function(proto, template, is, ext){};
-/**
-* @interface
-* @extends {Polymer_ElementMixin}
-*/
-function Polymer_DirMixin(){}
-/**
-* @override
-* @param {!HTMLTemplateElement} template Template to stamp
-* @return {!StampedTemplate}
-*/
-Polymer_DirMixin.prototype._stampTemplate = function(template){};
-/**
-* @param {Node} node Node to add listener on
-* @param {string} eventName Name of event
-* @param {string} methodName Name of method
-* @param {*=} context Context the method will be called on (defaults
-  to `node`)
-* @return {Function}
-*/
-Polymer_DirMixin.prototype._addMethodEventListenerToNode = function(node, eventName, methodName, context){};
-/**
-* @param {Node} node Node to add event listener to
-* @param {string} eventName Name of event
-* @param {Function} handler Listener function to add
-*/
-Polymer_DirMixin.prototype._addEventListenerToNode = function(node, eventName, handler){};
-/**
-* @param {Node} node Node to remove event listener from
-* @param {string} eventName Name of event
-* @param {Function} handler Listener function to remove
-*/
-Polymer_DirMixin.prototype._removeEventListenerFromNode = function(node, eventName, handler){};
-/**
-* @override
-* @param {string} name Name of attribute.
-* @param {?string} old Old value of attribute.
-* @param {?string} value Current value of attribute.
-*/
-Polymer_DirMixin.prototype.attributeChangedCallback = function(name, old, value){};
-/**
-* @override
-*/
-Polymer_DirMixin.prototype._initializeProperties = function(){};
-/**
-* @override
-* @param {Object} props Properties to initialize on the prototype
-*/
-Polymer_DirMixin.prototype._initializeProtoProperties = function(props){};
-/**
-* @override
-* @param {Object} props Properties to initialize on the instance
-*/
-Polymer_DirMixin.prototype._initializeInstanceProperties = function(props){};
-/**
-* @param {string} attribute Name of attribute to ensure is set.
-* @param {string} value of the attribute.
-*/
-Polymer_DirMixin.prototype._ensureAttribute = function(attribute, value){};
-/**
-* @param {string} attribute Name of attribute to deserialize.
-* @param {?string} value of the attribute.
-* @param {*=} type type to deserialize to.
-*/
-Polymer_DirMixin.prototype._attributeToProperty = function(attribute, value, type){};
-/**
-* @param {string} property Property name to reflect.
-* @param {string=} attribute Attribute name to reflect.
-* @param {*=} value Property value to refect.
-*/
-Polymer_DirMixin.prototype._propertyToAttribute = function(property, attribute, value){};
-/**
-* @param {Element} node Element to set attribute to.
-* @param {*} value Value to serialize.
-* @param {string} attribute Attribute name to serialize to.
-*/
-Polymer_DirMixin.prototype._valueToNodeAttribute = function(node, value, attribute){};
-/**
-* @param {*} value Property value to serialize.
-* @return {(string|undefined)}
-*/
-Polymer_DirMixin.prototype._serializeValue = function(value){};
-/**
-* @param {?string} value Attribute value to deserialize.
-* @param {*=} type Type to deserialize the string to.
-* @return {*}
-*/
-Polymer_DirMixin.prototype._deserializeValue = function(value, type){};
-/**
-* @param {string} property Name of the property
-* @param {boolean=} readOnly When true, no setter is created; the
-  protected `_setProperty` function must be used to set the property
-*/
-Polymer_DirMixin.prototype._createPropertyAccessor = function(property, readOnly){};
-/**
-* @param {string} property Property name
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._hasAccessor = function(property){};
-/**
-* @override
-*/
-Polymer_DirMixin.prototype._setProperty = function(property, value){};
-/**
-* @override
-* @param {string} property Name of the property
-* @param {*} value Value to set
-* @param {boolean=} shouldNotify True if property should fire notification
-  event (applies only for `notify: true` properties)
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._setPendingProperty = function(property, value, shouldNotify){};
-/**
-* @param {string} prop Property name
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._isPropertyPending = function(prop){};
-/**
-* @override
-*/
-Polymer_DirMixin.prototype._invalidateProperties = function(){};
-/**
-* @return {undefined}
-*/
-Polymer_DirMixin.prototype._enableProperties = function(){};
-/**
-* @return {undefined}
-*/
-Polymer_DirMixin.prototype._flushProperties = function(){};
-/**
-* @return {undefined}
-*/
-Polymer_DirMixin.prototype.ready = function(){};
-/**
-* @override
-*/
-Polymer_DirMixin.prototype._propertiesChanged = function(currentProps, changedProps, oldProps){};
-/**
-* @param {string} property Property name
-* @param {*} value New property value
-* @param {*} old Previous property value
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._shouldPropertyChange = function(property, value, old){};
-/**
-* @param {string} property Property that should trigger the effect
-* @param {string} type Effect type, from this.PROPERTY_EFFECT_TYPES
-* @param {Object=} effect Effect metadata object
-*/
-Polymer_DirMixin.prototype._addPropertyEffect = function(property, type, effect){};
-/**
-* @param {string} property Property the effect was associated with
-* @param {string} type Effect type, from this.PROPERTY_EFFECT_TYPES
-* @param {Object=} effect Effect metadata object to remove
-*/
-Polymer_DirMixin.prototype._removePropertyEffect = function(property, type, effect){};
-/**
-* @param {string} property Property name
-* @param {string=} type Effect type, from this.PROPERTY_EFFECT_TYPES
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._hasPropertyEffect = function(property, type){};
-/**
-* @param {string} property Property name
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._hasReadOnlyEffect = function(property){};
-/**
-* @param {string} property Property name
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._hasNotifyEffect = function(property){};
-/**
-* @param {string} property Property name
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._hasReflectEffect = function(property){};
-/**
-* @param {string} property Property name
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._hasComputedEffect = function(property){};
-/**
-* @param {(string|!Array.<(number|string)>)} path Path to set
-* @param {*} value Value to set
-* @param {boolean=} shouldNotify Set to true if this change should
- cause a property notification event dispatch
-* @param {boolean=} isPathNotification If the path being set is a path
-  notification of an already changed value, as opposed to a request
-  to set and notify the change.  In the latter `false` case, a dirty
-  check is performed and then the value is set to the path before
-  enqueuing the pending property change.
-* @return {boolean}
-*/
-Polymer_DirMixin.prototype._setPendingPropertyOrPath = function(path, value, shouldNotify, isPathNotification){};
-/**
-* @param {Node} node The node to set a property on
-* @param {string} prop The property to set
-* @param {*} value The value to set
-*/
-Polymer_DirMixin.prototype._setUnmanagedPropertyToNode = function(node, prop, value){};
-/**
-* @param {Object} client PropertyEffects client to enqueue
-*/
-Polymer_DirMixin.prototype._enqueueClient = function(client){};
-/**
-* @return {undefined}
-*/
-Polymer_DirMixin.prototype._flushClients = function(){};
-/**
-* @override
-*/
-Polymer_DirMixin.prototype._readyClients = function(){};
-/**
-* @param {Object} props Bag of one or more key-value pairs whose key is
-  a property and value is the new value to set for that property.
-* @param {boolean=} setReadOnly When true, any private values set in
-  `props` will be set. By default, `setProperties` will not set
-  `readOnly: true` root properties.
-*/
-Polymer_DirMixin.prototype.setProperties = function(props, setReadOnly){};
-/**
-* @param {Object} changedProps Bag of changed properties
-* @param {Object} oldProps Bag of previous values for changed properties
-* @param {boolean} hasPaths True with `props` contains one or more paths
-*/
-Polymer_DirMixin.prototype._propagatePropertyChanges = function(changedProps, oldProps, hasPaths){};
-/**
-* @param {(string|!Array.<(string|number)>)} to Target path to link.
-* @param {(string|!Array.<(string|number)>)} from Source path to link.
-*/
-Polymer_DirMixin.prototype.linkPaths = function(to, from){};
-/**
-* @param {(string|!Array.<(string|number)>)} path Target path to unlink.
-*/
-Polymer_DirMixin.prototype.unlinkPaths = function(path){};
-/**
-* @param {string} path Path that should be notified.
-* @param {Array} splices Array of splice records indicating ordered
-  changes that occurred to the array. Each record should have the
-  following fields:
-   * index: index at which the change occurred
-   * removed: array of items that were removed from this index
-   * addedCount: number of new items added at this index
-   * object: a reference to the array in question
-   * type: the string literal 'splice'
-
-  Note that splice records _must_ be normalized such that they are
-  reported in index order (raw results from `Object.observe` are not
-  ordered and must be normalized/merged before notifying).
-*/
-Polymer_DirMixin.prototype.notifySplices = function(path, splices){};
-/**
-* @param {(string|!Array.<(string|number)>)} path Path to the value
-  to read.  The path may be specified as a string (e.g. `foo.bar.baz`)
-  or an array of path parts (e.g. `['foo.bar', 'baz']`).  Note that
-  bracketed expressions are not supported; string-based path parts
-  *must* be separated by dots.  Note that when dereferencing array
-  indices, the index may be used as a dotted part directly
-  (e.g. `users.12.name` or `['users', 12, 'name']`).
-* @param {Object=} root Root object from which the path is evaluated.
-* @return {*}
-*/
-Polymer_DirMixin.prototype.get = function(path, root){};
-/**
-* @param {(string|!Array.<(string|number)>)} path Path to the value
-  to write.  The path may be specified as a string (e.g. `'foo.bar.baz'`)
-  or an array of path parts (e.g. `['foo.bar', 'baz']`).  Note that
-  bracketed expressions are not supported; string-based path parts
-  *must* be separated by dots.  Note that when dereferencing array
-  indices, the index may be used as a dotted part directly
-  (e.g. `'users.12.name'` or `['users', 12, 'name']`).
-* @param {*} value Value to set at the specified path.
-* @param {Object=} root Root object from which the path is evaluated.
-  When specified, no notification will occur.
-*/
-Polymer_DirMixin.prototype.set = function(path, value, root){};
-/**
-* @param {(string|!Array.<(string|number)>)} path Path to array.
-* @param {...*} items 
-* @return {number}
-*/
-Polymer_DirMixin.prototype.push = function(path, items){};
-/**
-* @param {(string|!Array.<(string|number)>)} path Path to array.
-* @return {*}
-*/
-Polymer_DirMixin.prototype.pop = function(path){};
-/**
-* @param {(string|!Array.<(string|number)>)} path Path to array.
-* @param {number} start Index from which to start removing/inserting.
-* @param {number} deleteCount Number of items to remove.
-* @param {...*} items 
-* @return {Array}
-*/
-Polymer_DirMixin.prototype.splice = function(path, start, deleteCount, items){};
-/**
-* @param {(string|!Array.<(string|number)>)} path Path to array.
-* @return {*}
-*/
-Polymer_DirMixin.prototype.shift = function(path){};
-/**
-* @param {(string|!Array.<(string|number)>)} path Path to array.
-* @param {...*} items 
-* @return {number}
-*/
-Polymer_DirMixin.prototype.unshift = function(path, items){};
-/**
-* @param {string} path Path that should be notified.
-* @param {*=} value Value at the path (optional).
-*/
-Polymer_DirMixin.prototype.notifyPath = function(path, value){};
-/**
-* @param {string} property Property name
-* @param {boolean=} protectedSetter Creates a custom protected setter
-  when `true`.
-*/
-Polymer_DirMixin.prototype._createReadOnlyProperty = function(property, protectedSetter){};
-/**
-* @param {string} property Property name
-* @param {string} methodName Name of observer method to call
-* @param {boolean=} dynamicFn Whether the method name should be included as
-  a dependency to the effect.
-*/
-Polymer_DirMixin.prototype._createPropertyObserver = function(property, methodName, dynamicFn){};
-/**
-* @param {string} expression Method expression
-* @param {(boolean|Object)=} dynamicFn Boolean or object map indicating
-  whether method names should be included as a dependency to the effect.
-*/
-Polymer_DirMixin.prototype._createMethodObserver = function(expression, dynamicFn){};
-/**
-* @param {string} property Property name
-*/
-Polymer_DirMixin.prototype._createNotifyingProperty = function(property){};
-/**
-* @param {string} property Property name
-*/
-Polymer_DirMixin.prototype._createReflectedProperty = function(property){};
-/**
-* @param {string} property Name of computed property to set
-* @param {string} expression Method expression
-* @param {(boolean|Object)=} dynamicFn Boolean or object map indicating
-  whether method names should be included as a dependency to the effect.
-*/
-Polymer_DirMixin.prototype._createComputedProperty = function(property, expression, dynamicFn){};
-/**
-* @param {HTMLTemplateElement} template Template containing binding
-  bindings
-* @param {boolean=} instanceBinding When false (default), performs
-  "prototypical" binding of the template and overwrites any previously
-  bound template for the class. When true (as passed from
-  `_stampTemplate`), the template info is instanced and linked into
-  the list of bound templates.
-* @return {!TemplateInfo}
-*/
-Polymer_DirMixin.prototype._bindTemplate = function(template, instanceBinding){};
-/**
-* @param {!StampedTemplate} dom DocumentFragment previously returned
-  from `_stampTemplate` associated with the nodes to be removed
-*/
-Polymer_DirMixin.prototype._removeBoundDom = function(dom){};
-/**
-* @return {undefined}
-*/
-Polymer_DirMixin.prototype.connectedCallback = function(){};
-/**
-* @return {undefined}
-*/
-Polymer_DirMixin.prototype.disconnectedCallback = function(){};
-/**
-* @param {StampedTemplate} dom to attach to the element.
-* @return {ShadowRoot}
-*/
-Polymer_DirMixin.prototype._attachDom = function(dom){};
-/**
-* @param {Object=} properties Bag of custom property key/values to
-  apply to this element.
-*/
-Polymer_DirMixin.prototype.updateStyles = function(properties){};
-/**
-* @param {string} url URL to resolve.
-* @param {string=} base Optional base URL to resolve against, defaults
-to the element's `importPath`
-* @return {string}
-*/
-Polymer_DirMixin.prototype.resolveUrl = function(url, base){};
-/**
-* @param {!HTMLTemplateElement} template Template to parse
-* @param {TemplateInfo=} outerTemplateInfo Template metadata from the outer
-  template, for parsing nested templates
-* @return {!TemplateInfo}
-*/
-Polymer_DirMixin._parseTemplate = function(template, outerTemplateInfo){};
-/**
-* @override
-*/
-Polymer_DirMixin._parseTemplateContent = function(template, templateInfo, nodeInfo){};
-/**
-* @override
-* @param {Node} node Node to parse
-* @param {TemplateInfo} templateInfo Template metadata for current template
-* @param {NodeInfo} nodeInfo Node metadata for current template node
-* @return {boolean}
-*/
-Polymer_DirMixin._parseTemplateNode = function(node, templateInfo, nodeInfo){};
-/**
-* @param {Node} root Root node whose `childNodes` will be parsed
-* @param {!TemplateInfo} templateInfo Template metadata for current template
-* @param {!NodeInfo} nodeInfo Node metadata for current template.
-*/
-Polymer_DirMixin._parseTemplateChildNodes = function(root, templateInfo, nodeInfo){};
-/**
-* @override
-* @param {Node} node Node to parse
-* @param {TemplateInfo} templateInfo Template metadata for current template
-* @param {NodeInfo} nodeInfo Node metadata for current template node
-* @return {boolean}
-*/
-Polymer_DirMixin._parseTemplateNestedTemplate = function(node, templateInfo, nodeInfo){};
-/**
-* @param {Element} node Node to parse
-* @param {TemplateInfo} templateInfo Template metadata for current template
-* @param {NodeInfo} nodeInfo Node metadata for current template.
-* @return {boolean}
-*/
-Polymer_DirMixin._parseTemplateNodeAttributes = function(node, templateInfo, nodeInfo){};
-/**
-* @override
-* @param {Element} node Node to parse
-* @param {TemplateInfo} templateInfo Template metadata for current template
-* @param {NodeInfo} nodeInfo Node metadata for current template node
-* @param {string} name Attribute name
-* @param {string} value Attribute value
-* @return {boolean}
-*/
-Polymer_DirMixin._parseTemplateNodeAttribute = function(node, templateInfo, nodeInfo, name, value){};
-/**
-* @param {HTMLTemplateElement} template Template to retrieve `content` for
-* @return {DocumentFragment}
-*/
-Polymer_DirMixin._contentForTemplate = function(template){};
-/**
-*/
-Polymer_DirMixin.createPropertiesForAttributes = function(){};
-/**
-* @param {string} property Property that should trigger the effect
-* @param {string} type Effect type, from this.PROPERTY_EFFECT_TYPES
-* @param {Object=} effect Effect metadata object
-*/
-Polymer_DirMixin.addPropertyEffect = function(property, type, effect){};
-/**
-* @param {string} property Property name
-* @param {string} methodName Name of observer method to call
-* @param {boolean=} dynamicFn Whether the method name should be included as
-  a dependency to the effect.
-*/
-Polymer_DirMixin.createPropertyObserver = function(property, methodName, dynamicFn){};
-/**
-* @param {string} expression Method expression
-* @param {(boolean|Object)=} dynamicFn Boolean or object map indicating
-  whether method names should be included as a dependency to the effect.
-*/
-Polymer_DirMixin.createMethodObserver = function(expression, dynamicFn){};
-/**
-* @param {string} property Property name
-*/
-Polymer_DirMixin.createNotifyingProperty = function(property){};
-/**
-* @param {string} property Property name
-* @param {boolean=} protectedSetter Creates a custom protected setter
-  when `true`.
-*/
-Polymer_DirMixin.createReadOnlyProperty = function(property, protectedSetter){};
-/**
-* @param {string} property Property name
-*/
-Polymer_DirMixin.createReflectedProperty = function(property){};
-/**
-* @param {string} property Name of computed property to set
-* @param {string} expression Method expression
-* @param {(boolean|Object)=} dynamicFn Boolean or object map indicating whether
-  method names should be included as a dependency to the effect.
-*/
-Polymer_DirMixin.createComputedProperty = function(property, expression, dynamicFn){};
-/**
-* @param {HTMLTemplateElement} template Template containing binding
-  bindings
-* @return {Object}
-*/
-Polymer_DirMixin.bindTemplate = function(template){};
-/**
-* @param {Object} templateInfo Template metadata to add effect to
-* @param {string} prop Property that should trigger the effect
-* @param {Object=} effect Effect metadata object
-*/
-Polymer_DirMixin._addTemplatePropertyEffect = function(templateInfo, prop, effect){};
-/**
-* @param {string} text Text to parse from attribute or textContent
-* @param {Object} templateInfo Current template metadata
-* @return {Array.<!BindingPart>}
-*/
-Polymer_DirMixin._parseBindings = function(text, templateInfo){};
-/**
-* @param {this} inst Element that should be used as scope for
-  binding dependencies
-* @param {BindingPart} part Binding part metadata
-* @param {string} path Property/path that triggered this effect
-* @param {Object} props Bag of current property changes
-* @param {Object} oldProps Bag of previous values for changed properties
-* @param {boolean} hasPaths True with `props` contains one or more paths
-* @return {*}
-*/
-Polymer_DirMixin._evaluateBinding = function(inst, part, path, props, oldProps, hasPaths){};
-/**
-*/
-Polymer_DirMixin.finalize = function(){};
-/**
-* @override
-*/
-Polymer_DirMixin._processStyleText = function(is, template, baseURI){};
-/**
-* @param {!PolymerElement} proto Element class prototype to add accessors
-  and effects to
-* @param {!HTMLTemplateElement} template Template to process and bind
 * @param {string} is Tag name (or type extension name) for this element
 * @param {string=} ext For type extensions, the tag name that was extended
 */
-Polymer_DirMixin._finalizeTemplate = function(proto, template, is, ext){};
\ No newline at end of file
+Polymer_ArraySelectorMixin._finalizeTemplate = function(is, ext){};
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index aa6d6b1f1f..7d53afb248 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -144,7 +144,7 @@ gulp.task('closure', ['clean'], () => {
   if (CLOSURE_LINT_ONLY) {
     closurePluginOptions = {
       logger: closureLintLogger
-    }
+    };
   }
 
   const closureStream = closure({
diff --git a/lib/legacy/legacy-element-mixin.html b/lib/legacy/legacy-element-mixin.html
index 4c64e86f1f..349a0b22f2 100644
--- a/lib/legacy/legacy-element-mixin.html
+++ b/lib/legacy/legacy-element-mixin.html
@@ -11,6 +11,7 @@
 <link rel="import" href="../../../shadycss/apply-shim.html">
 <link rel="import" href="../mixins/element-mixin.html">
 <link rel="import" href="../mixins/gesture-event-listeners.html">
+<link rel="import" href="../mixins/dir-mixin.html">
 <link rel="import" href="../utils/mixin.html">
 <link rel="import" href="../utils/import-href.html">
 <link rel="import" href="../utils/render-status.html">
@@ -46,8 +47,9 @@
      * @extends {base}
      * @implements {Polymer_ElementMixin}
      * @implements {Polymer_GestureEventListeners}
+     * @implements {Polymer_DirMixin}
      */
-    const legacyElementBase = Polymer.GestureEventListeners(Polymer.ElementMixin(base));
+    const legacyElementBase = Polymer.DirMixin(Polymer.GestureEventListeners(Polymer.ElementMixin(base)));
 
     /**
      * Map of simple names to touch action names
diff --git a/lib/mixins/dir-mixin.html b/lib/mixins/dir-mixin.html
index 317bd0f0b4..33ad6300fc 100644
--- a/lib/mixins/dir-mixin.html
+++ b/lib/mixins/dir-mixin.html
@@ -9,7 +9,7 @@
 -->
 <link rel="import" href="../utils/style-gather.html">
 <link rel="import" href="../utils/resolve-url.html">
-<link rel="import" href="element-mixin.html">
+<link rel="import" href="property-accessors.html">
 
 <script>
   (function() {
@@ -26,19 +26,27 @@
      */
     const DIR_INSTANCES = [];
 
-    let observed = false;
+    /** @type {MutationObserver} */
+    let OBSERVER = null;
+
+    let DOCUMENT_DIR = document.documentElement.getAttribute('dir');
+
+    let takeRecords = function(){};
 
     /**
      * @param {!Polymer_DirMixin} instance Instance to set RTL status on
      */
     function setRTL(instance) {
-      if (!instance.__origRTLStatus) {
+      if (!instance.__autoDirOptOut) {
         const el = /** @type {!HTMLElement} */(instance);
-        if (document.documentElement.getAttribute('dir') === 'rtl') {
-          el.setAttribute('dir', 'rtl');
-        } else {
-          el.removeAttribute('dir');
-        }
+        el.setAttribute('dir', DOCUMENT_DIR);
+      }
+    }
+
+    function updateDirection() {
+      DOCUMENT_DIR = document.documentElement.getAttribute('dir');
+      for (let i = 0; i < DIR_INSTANCES.length; i++) {
+        setRTL(DIR_INSTANCES[i]);
       }
     }
 
@@ -46,36 +54,40 @@
      * Element class mixin that allows elements to use the `:dir` CSS Selector to have
      * text direction specific styling.
      *
-     * With this mixin, any stylesheet provided in the template will be transform `:dir` into
+     * With this mixin, any stylesheet provided in the template will transform `:dir` into
      * `:host([dir])` and sync direction with the page via the element's `dir` attribute.
      *
      * Elements can opt out of the global page text direction by setting the `dir` attribute
-     * directly in `ready()`.
+     * directly in `ready()` or in HTML.
      *
      * Caveats:
-     * - Automatic left-to-right or right-to-left styling is sync'd with the `<html>` element
      * - Applications must set `<html dir="ltr">` or `<html dir="rtl">` to sync direction
+     * - Automatic left-to-right or right-to-left styling is sync'd with the `<html>` element only.
+     * - Changing `dir` at runtime is supported.
      * - Opting out of the global direction styling is permanent
      *
      * @mixinFunction
      * @polymer
-     * @appliesMixin Polymer.ElementMixin
+     * @appliesMixin Polymer.PropertyAccessors
      * @memberof Polymer
      */
     Polymer.DirMixin = Polymer.dedupingMixin((base) => {
 
-      if (!observed) {
-        new MutationObserver(() => {
-          DIR_INSTANCES.forEach(i => setRTL(i));
-        }).observe(document.documentElement, {attributes: true, attributeFilter: ['dir']});
+      if (!OBSERVER) {
+        OBSERVER = new MutationObserver(updateDirection);
+        OBSERVER.observe(document.documentElement, {attributes: true, attributeFilter: ['dir']});
+        takeRecords = function() {
+          OBSERVER.takeRecords();
+          updateDirection();
+        };
       }
 
       /**
        * @constructor
        * @extends {base}
-       * @implements {Polymer_ElementMixin}
+       * @implements {Polymer_PropertyAccessors}
        */
-      const elementBase = Polymer.ElementMixin(base);
+      const elementBase = Polymer.PropertyAccessors(base);
 
       /**
        * @polymer
@@ -90,15 +102,30 @@
          */
         static _processStyleText(is, template, baseURI) {
           let cssText = super._processStyleText(is, template, baseURI);
-          cssText = cssText.replace(HOST_DIR, HOST_DIR_REPLACMENT);
-          cssText = cssText.replace(EL_DIR, EL_DIR_REPLACMENT);
+          cssText = this._replaceDirInCssText(cssText);
           return cssText;
         }
 
+        /**
+         * Replace `:dir` in the given CSS text
+         *
+         * @param {string} text CSS text to replace DIR
+         * @return {string} Modified CSS
+         */
+        static _replaceDirInCssText(text) {
+          let replacedText = text;
+          replacedText = replacedText.replace(HOST_DIR, HOST_DIR_REPLACMENT);
+          replacedText = replacedText.replace(EL_DIR, EL_DIR_REPLACMENT);
+          if (text !== replacedText) {
+            this.__activateDir = true;
+          }
+          return replacedText;
+        }
+
         constructor() {
           super();
           /** @type {boolean} */
-          this.__origRTLStatus = false;
+          this.__autoDirOptOut = false;
         }
 
         /**
@@ -106,24 +133,38 @@
          */
         ready() {
           super.ready();
-          this.__origRTLStatus = /** @type {!HTMLElement} */(this).hasAttribute('dir');
+          this.__autoDirOptOut = /** @type {!HTMLElement} */(this).hasAttribute('dir');
         }
 
+        /** @suppress {missingProperties} Closure's understanding of prototypes is bad */
         connectedCallback() {
-          super.connectedCallback();
-          DIR_INSTANCES.push(this);
-          setRTL(this);
+          if (elementBase.prototype.connectedCallback) {
+            /** @type {!Polymer_ElementMixin} */(elementBase).prototype.connectedCallback.call(this);
+          }
+          if (this.constructor.__activateDir) {
+            takeRecords();
+            DIR_INSTANCES.push(this);
+            setRTL(this);
+          }
         }
 
+        /** @suppress {missingProperties} Closure's understanding of prototypes is bad */
         disconnectedCallback() {
-          super.disconnectedCallback();
-          const idx = DIR_INSTANCES.indexOf(this);
-          if (idx > -1) {
-            DIR_INSTANCES.splice(idx, 1);
+          if (elementBase.prototype.disconnectedCallback) {
+            /** @type {!Polymer_ElementMixin} */(elementBase).prototype.disconnectedCallback.call(this);
+          }
+          if (this.constructor.__activateDir) {
+            takeRecords();
+            const idx = DIR_INSTANCES.indexOf(this);
+            if (idx > -1) {
+              DIR_INSTANCES.splice(idx, 1);
+            }
           }
         }
       }
 
+      Dir.__activateDir = false;
+
       return Dir;
     });
   })();
diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
index ed41df6095..2ed3e29b0d 100644
--- a/lib/mixins/element-mixin.html
+++ b/lib/mixins/element-mixin.html
@@ -547,8 +547,7 @@
         const importPath = this.constructor.importPath;
         // note: finalize template when we have access to `localName` to
         // avoid dependence on `is` for polyfilling styling.
-        this.constructor._finalizeTemplate(/** @type {!PolymerElement} */(this.__proto__), this._template,
-          /**@type {!HTMLElement}*/(this).localName);
+        this.constructor._finalizeTemplate(/** @type {!HTMLElement} */(this).localName);
         super._initializeProperties();
         // set path defaults
         this.rootPath = Polymer.rootPath;
@@ -597,14 +596,13 @@
       * The element name `is` and extends `ext` must be specified for ShadyCSS
       * style scoping.
       *
-      * @param {!PolymerElement} proto Element class prototype to add accessors
-      *   and effects to
-      * @param {!HTMLTemplateElement} template Template to process and bind
       * @param {string} is Tag name (or type extension name) for this element
       * @param {string=} ext For type extensions, the tag name that was extended
       * @protected
       */
-      static _finalizeTemplate(proto, template, is, ext) {
+      static _finalizeTemplate(is, ext) {
+        /** @const {HTMLTemplateElement} */
+        const template = this.prototype._template;
         if (template && !template.__polymerFinalized) {
           template.__polymerFinalized = true;
           const importPath = this.importPath;
@@ -619,7 +617,7 @@
           if (window.ShadyCSS) {
             window.ShadyCSS.prepareTemplate(template, is, ext);
           }
-          proto._bindTemplate(template);
+          this.prototype._bindTemplate(template);
         }
       }
 
diff --git a/test/unit/dir.html b/test/unit/dir.html
index f528567424..26f847f206 100644
--- a/test/unit/dir.html
+++ b/test/unit/dir.html
@@ -108,10 +108,7 @@
     </template>
     <script>
       addEventListener('WebComponentsReady', () => {
-        class XDirLegacy extends Polymer.DirMixin(Polymer.LegacyElementMixin(HTMLElement)) {
-          static get is() {return 'x-dir-legacy';}
-        }
-        customElements.define(XDirLegacy.is, XDirLegacy);
+        Polymer({is: 'x-dir-legacy'});
       });
     </script>
   </dom-module>