diff --git a/javascript/atoms/dom.js b/javascript/atoms/dom.js
index 3ded007b95fed..0f1f1fe304308 100644
--- a/javascript/atoms/dom.js
+++ b/javascript/atoms/dom.js
@@ -565,45 +565,40 @@ bot.dom.isShown_ = function(elem, ignoreOpacity, parentsDisplayedFn) {
  * @return {boolean} Whether or not the element is visible.
  */
 bot.dom.isShown = function(elem, opt_ignoreOpacity) {
-  var displayed;
-
-  if (bot.dom.IS_SHADOW_DOM_ENABLED) {
-    // Any element with a display style equal to 'none' or that has an ancestor
-    // with display style equal to 'none' is not shown.
-    displayed = function(e) {
-      if (bot.dom.getEffectiveStyle(e, 'display') == 'none') {
+  /**
+   * Determines whether an element or its parents have `display: none` set
+   * @param {!Node} e the element
+   * @return {boolean}
+   */
+  function displayed(e) {
+    if (bot.dom.isElement(e)) {
+      var elem = /** @type {!Element} */ (e);
+      if (bot.dom.getEffectiveStyle(elem, 'display') == 'none') {
         return false;
       }
-      var parent;
-      do {
-        parent = bot.dom.getParentNodeInComposedDom(e);
-        if (parent instanceof ShadowRoot) {
-          if (parent.host.shadowRoot != parent) {
-            // There is a younger shadow root, which will take precedence over
-            // the shadow this element is in, thus this element won't be
-            // displayed.
-            return false;
-          } else {
-            parent = parent.host;
-          }
-        } else if (parent && (parent.nodeType == goog.dom.NodeType.DOCUMENT ||
-            parent.nodeType == goog.dom.NodeType.DOCUMENT_FRAGMENT)) {
-          parent = null;
-        }
-      } while (elem && elem.nodeType != goog.dom.NodeType.ELEMENT);
-      return !parent || displayed(parent);
-    };
-  } else {
-    // Any element with a display style equal to 'none' or that has an ancestor
-    // with display style equal to 'none' is not shown.
-    displayed =  function(e) {
-      if (bot.dom.getEffectiveStyle(e, 'display') == 'none') {
+    }
+
+    var parent = bot.dom.getParentNodeInComposedDom(e);
+
+    if (bot.dom.IS_SHADOW_DOM_ENABLED && (parent instanceof ShadowRoot)) {
+      if (parent.host.shadowRoot !== parent) {
+        // There is a younger shadow root, which will take precedence over
+        // the shadow this element is in, thus this element won't be
+        // displayed.
         return false;
+      } else {
+        parent = parent.host;
       }
-      var parent = bot.dom.getParentElement(e);
-      return !parent || displayed(parent);
-    };
+    }
+
+    if (parent && (parent.nodeType == goog.dom.NodeType.DOCUMENT ||
+        parent.nodeType == goog.dom.NodeType.DOCUMENT_FRAGMENT)) {
+      return true;
+    }
+
+    return parent && displayed(parent);
   }
+
   return bot.dom.isShown_(elem, !!opt_ignoreOpacity, displayed);
 };
 
@@ -1260,12 +1255,22 @@ bot.dom.getOpacityNonIE_ = function(elem) {
  */
 bot.dom.getParentNodeInComposedDom = function(node) {
   var /**@type {Node}*/ parent = node.parentNode;
+
+  // Shadow DOM v1
+  if (parent.shadowRoot && node.assignedSlot !== undefined) {
+    // Can be null on purpose, meaning it has no parent as
+    // it hasn't yet been slotted
+    return node.assignedSlot ? node.assignedSlot.parentNode : null;
+  }
+
+  // Shadow DOM V0 (deprecated)
   if (node.getDestinationInsertionPoints) {
     var destinations = node.getDestinationInsertionPoints();
     if (destinations.length > 0) {
-      parent = destinations[destinations.length - 1];
+      return destinations[destinations.length - 1];
     }
   }
+
   return parent;
 };
 
@@ -1289,16 +1294,22 @@ bot.dom.appendVisibleTextLinesFromNodeInComposedDom_ = function(
   } else if (bot.dom.isElement(node)) {
     var castElem = /** @type {!Element} */ (node);
 
-    if (bot.dom.isElement(node, 'CONTENT')) {
+    if (bot.dom.isElement(node, 'CONTENT') || bot.dom.isElement(node, 'SLOT')) {
       var parentNode = node;
       while (parentNode.parentNode) {
         parentNode = parentNode.parentNode;
       }
       if (parentNode instanceof ShadowRoot) {
-        // If the element is <content> and we're inside a shadow DOM then just 
+        // If the element is <content> and we're inside a shadow DOM then just
         // append the contents of the nodes that have been distributed into it.
         var contentElem = /** @type {!Object} */ (node);
-        goog.array.forEach(contentElem.getDistributedNodes(), function(node) {
+        var shadowChildren;
+        if (bot.dom.isElement(node, 'CONTENT')) {
+          shadowChildren = contentElem.getDistributedNodes();
+        } else {
+          shadowChildren = contentElem.assignedNodes();
+        }
+        goog.array.forEach(shadowChildren, function(node) {
           bot.dom.appendVisibleTextLinesFromNodeInComposedDom_(
               node, lines, shown, whitespace, textTransform);
         });
@@ -1353,8 +1364,10 @@ bot.dom.isNodeDistributedIntoShadowDom = function(node) {
     elemOrText = /** @type {!Text} */ (node);
   }
   return elemOrText != null &&
-      elemOrText.getDestinationInsertionPoints &&
-      elemOrText.getDestinationInsertionPoints().length > 0;
+      (elemOrText.assignedSlot != null ||
+        (elemOrText.getDestinationInsertionPoints &&
+        elemOrText.getDestinationInsertionPoints().length > 0)
+      );
 };
 
 
diff --git a/javascript/atoms/test/html5/shadow_dom_test.html b/javascript/atoms/test/html5/shadow_dom_test.html
index f489a9e77d011..e5c39c40c9c73 100644
--- a/javascript/atoms/test/html5/shadow_dom_test.html
+++ b/javascript/atoms/test/html5/shadow_dom_test.html
@@ -8,191 +8,206 @@
   </script>
 </head>
 <body>
-<H1>Page for Shadow DOM chromedriver tests</H1>
-The page has a shadow root that in turn contains two shadow roots. So we can
-check behaviour with both nested roots and younger/older sibling roots. The
-various sections are highlighted with colored borders to make it more obvious
-where each element comes from.
-<div id="outerDiv">
-  <div id="innerDiv" style="border-style:solid;border-color:yellow">
-    Base-level Stuff
-  </div>
-</div>
-<div id="divWithNoShadowDOM">
-<content>
-  Text inside a content tag outside any shadow DOM. Should be displayed
-</content>
-</div>
-
-<template id="parentTemplate">
-<div id="parentDiv">
-  <div style="border-style:solid;border-color:green">
-    <H3 id="parentHeading">Parent</H3>
-    <H4>Parent Contents</H4>
-    <content></content>
-  </div>
-  <div style="border-style:solid;border-color:green" class="stuffForYoungChild">
-    Stuff for for the younger child.
+  <h1>Page for Shadow DOM tests</h1>
+
+  <div id="is-shown">Foo</div>
+  <div id="is-shown-in-shadow"></div>
+  <div id="is-shown-directly-in-shadow"></div>
+  <div id="is-shown-in-slot"><div>Foo</div></div>
+
+  <div id="get-parent"><div></div></div>
+  <div id="get-parent-slot"><div></div></div>
+
+  <div id="get-text">Foo</div>
+  <div id="get-text-shadow"></div>
+  <div id="get-text-slot">Foo</div>
+  <div id="get-text-slots">
+    <div slot="a">Foo</div>
+    <div slot="b">Bar</div>
+    <div slot="c">Baz</div>
   </div>
-</div>
-</template>
-<template id="olderChildTemplate">
-<div id="olderChildDiv">
-    <div style="border-style:solid;border-color:red">
-        <H3 id="olderHeading">Older Child</H3>
-        As the older child of a nested shadow root, this is the most likely
-        to go wrong bit of the page.
-        <H4>Older Child Contents</H4>
-        <content>
-          Text inside the older child content tag. Should be replaced
-        </content>
-    </div>
-</div>
-</template>
-<template id="youngerChildTemplate">
-<div id="youngerChildDiv">
-    <div style="border-style:solid;border-color:blue">
-        <H3>Younger Child</H3>
-        <div style="border-style:dotted;border-color:blue">
-            <H4>Younger Child Contents</H4>
-            <content id="youngChildContent" select=".stuffForYoungChild">
-              Text inside the younger content tag. Should be replaced
-            </content>
-        </div>
-        <div style="border-style:dashed;border-color:blue">
-            <H4>Younger Child Shadow</H4>
-            <shadow id="youngChildShadow"></shadow>
-        </div>
-    </div>
-</div>
-</template>
-<template id="neverShownTemplate">
-<div id="neverShownDiv">
-This should never be shown. The ShadowDOM is older than the parent shadowDOM, 
-and parent doesn't have a &lt;shadow&gt; element. 
-</div>
-</template>
-<script type="text/javascript" >
-if (bot.dom.IS_SHADOW_DOM_ENABLED) {
-  var neverShownShadowRoot = document.querySelector('#innerDiv').createShadowRoot();
-  neverShownShadowRoot.appendChild(document.querySelector('#neverShownTemplate'
-      ).content.cloneNode(true));
-  var parentShadowRoot = document.querySelector('#innerDiv').createShadowRoot();
-  parentShadowRoot.appendChild(document.querySelector('#parentTemplate'
-      ).content.cloneNode(true));
-  var olderShadowRoot = parentShadowRoot.querySelector("#parentDiv"
-      ).createShadowRoot();
-  olderShadowRoot.appendChild(document.querySelector('#olderChildTemplate'
-      ).content.cloneNode(true));
-  var youngerShadowRoot = parentShadowRoot.querySelector("#parentDiv"
-      ).createShadowRoot();
-  youngerShadowRoot.appendChild(document.querySelector('#youngerChildTemplate'
-      ).content.cloneNode(true));
-}
-</script>
-
-
-<script type="text/javascript" >
-
-function testGetParentNodeInComposedDom() {
-  if (bot.dom.IS_SHADOW_DOM_ENABLED) {
-    var youngChildContent = document.querySelector("* /deep/ #youngChildContent");
-    var stuffForYoungChild = /** @type {!Element} */ (document.querySelector(
-      "* /deep/ .stuffForYoungChild"));
-    var youngChildShadow = document.querySelector("* /deep/ #youngChildShadow");
-    var oldChildDiv = /** @type {!Element} */ (document.querySelector(
-      "* /deep/ #olderChildDiv"));
-    var innerDiv = /** @type {!Element} */ (document.querySelector(
-      "#innerDiv"));
-    var outerDiv = document.querySelector("#outerDiv");
-  
-    // According to the logical DOM parentDiv is the parent of 
-    // stuffForYoungChild, but according to the composed DOM, 
-    // youngChildDiv is the parent.
-    // Check that content elements work.
-    assertEquals(youngChildContent,
-        bot.dom.getParentNodeInComposedDom(stuffForYoungChild));
-    // Check that shadow elements work.
-    assertEquals(youngChildShadow,
-        bot.dom.getParentNodeInComposedDom(oldChildDiv));
-    // Check that non shadow DOM elements work as expected
-    assertEquals(outerDiv,
-        bot.dom.getParentNodeInComposedDom(innerDiv));
-  }
-}
-
-
-function testGetVisibleTextInComposedDom() {
-  if (bot.dom.IS_SHADOW_DOM_ENABLED) {
-    var parentDiv = /** @type {!Element} */ (document.querySelector(
-      "* /deep/ #parentDiv"));
-    var youngerChildDiv = /** @type {!Element} */ (document.querySelector(
-      "* /deep/ #youngerChildDiv"));
-    var olderChildDiv = /** @type {!Element} */ (document.querySelector(
-      "* /deep/ #olderChildDiv"));
-    var divWithNoShadowDOM = /** @type {!Element} */ (document.querySelector(
-      "#divWithNoShadowDOM"));
-    var expectedOlderChildContents = "Older Child\n" +
-        "As the older child of a nested shadow root, this is the most " +
-        "likely to go wrong bit of the page.\n" +
-        "Older Child Contents\n" +
-        "Parent\n" +
-        "Parent Contents\n" +
-        "Base-level Stuff";
-  
-    var expectedYoungerChildContents = "Younger Child\n" +
-        "Younger Child Contents\n" +
-        "Stuff for for the younger child.\n" +
-        "Younger Child Shadow\n" +
-        expectedOlderChildContents;
-  
-    var expectedParentContents = expectedYoungerChildContents;
-  
-    var expectedOutsideShadowDomContents = "Text inside a content tag " + 
-        "outside any shadow DOM. Should be displayed";
-  
-    var expectedPageContents = "Page for Shadow DOM chromedriver tests\n" + 
-        "The page has a shadow root that in turn contains two shadow roots. " +
-        "So we can check behaviour with both nested roots and younger/" +
-        "older sibling roots. The various sections are highlighted with " +
-        "colored borders to make it more obvious where each element comes " +
-        "from.\n" +
-        expectedParentContents + "\n" + expectedOutsideShadowDomContents;
-
-    assertEquals(expectedOlderChildContents, 
-        bot.dom.getVisibleText(olderChildDiv));
-    assertEquals(expectedYoungerChildContents, 
-        bot.dom.getVisibleText(youngerChildDiv));
-    assertEquals(expectedParentContents, bot.dom.getVisibleText(parentDiv));
-    assertEquals(expectedOutsideShadowDomContents, bot.dom.getVisibleText(divWithNoShadowDOM));
-    assertEquals(expectedPageContents, 
-      bot.dom.getVisibleText(/** @type {!Element} */ (document.body)));
-  }
-}
-
-function testIsShownInComposedDom() {
-  if (bot.dom.IS_SHADOW_DOM_ENABLED) {
-    var parentHeading = /** @type {!Element} */ (document.querySelector(
-      "* /deep/ #parentHeading"));
-    var oldChildDiv = document.querySelector("* /deep/ #olderChildDiv");
-    var neverShownDiv = /** @type {!Element} */ (document.querySelector(
-      "* /deep/ #neverShownDiv"));
-  
-    // neverShown is in an older shadow DOM, and thus isn't displayed
-    assertFalse(bot.dom.isShown(neverShownDiv));
-  
-    assert(bot.dom.isShown(parentHeading));
-    var oldChildDivDisplay = oldChildDiv.style.display;
-    try {
-      oldChildDiv.style.display = "None";
-      // In the Logical DOM, parentHeading is displayed. But in the Composed
-      // DOM it's been pulled within oldChildDiv, and thus is no longer visible.
-      assertFalse(bot.dom.isShown(parentHeading));
-    } finally {
-      oldChildDiv.style.display = oldChildDivDisplay;
+
+  <script>
+    var elementIsShownInShadow;
+    var elementIsShown;
+    var elementIsShownDirectlyInShadow;
+    var elementIsShownInSlot;
+
+    var elementGetParent;
+    var elementGetParentSlot;
+
+    var elementGetText;
+    var elementGetTextShadow;
+    var elementGetTextSlot;
+    var elementGetTextSlots;
+
+    if (bot.dom.IS_SHADOW_DOM_ENABLED) {
+      elementIsShownInShadow =
+        document.querySelector('#is-shown-in-shadow');
+      elementIsShownInShadow.attachShadow({ mode: 'open' });
+      elementIsShownInShadow.shadowRoot.innerHTML =
+        '<div><div class="test">Foo</div></div>';
+
+      elementIsShownDirectlyInShadow =
+        document.querySelector('#is-shown-directly-in-shadow');
+      elementIsShownDirectlyInShadow.attachShadow({ mode: 'open' });
+      elementIsShownDirectlyInShadow.shadowRoot.innerHTML =
+        '<div>Foo</div>';
+
+      elementIsShown = document.querySelector('#is-shown');
+
+      elementIsShownInSlot =
+        document.querySelector('#is-shown-in-slot');
+      elementIsShownInSlot.attachShadow({ mode: 'open' });
+      elementIsShownInSlot.shadowRoot.innerHTML =
+        '<slot></slot>';
+
+      elementGetParent =
+        document.querySelector('#get-parent');
+
+      elementGetParentSlot =
+        document.querySelector('#get-parent-slot');
+      elementGetParentSlot.attachShadow({ mode: 'open' });
+      elementGetParentSlot.shadowRoot.innerHTML =
+        '<div><slot></slot></div>';
+
+      elementGetText =
+        document.querySelector('#get-text');
+
+      elementGetTextShadow =
+        document.querySelector('#get-text-shadow');
+      elementGetTextShadow.attachShadow({ mode: 'open' });
+      elementGetTextShadow.shadowRoot.innerHTML = 'foo';
+
+      elementGetTextSlot =
+        document.querySelector('#get-text-slot');
+      elementGetTextSlot.attachShadow({ mode: 'open' });
+      elementGetTextSlot.shadowRoot.innerHTML =
+        '<span>a</span><slot></slot><span>b</span>';
+
+      elementGetTextSlots =
+        document.querySelector('#get-text-slots');
+      elementGetTextSlots.attachShadow({ mode: 'open' });
+      elementGetTextSlots.shadowRoot.innerHTML =
+        '<slot name="a">Default</slot><slot name="b">Default</slot>';
+    }
+
+    function testIsShown() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      assert(bot.dom.isShown(elementIsShown));
+
+      elementIsShown.style.display = 'none';
+
+      assertFalse(bot.dom.isShown(elementIsShown));
+    }
+
+    function testIsShownInShadow() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      var el = elementIsShownInShadow
+        .shadowRoot
+        .querySelector('.test');
+
+      assert(bot.dom.isShown(el));
+
+      elementIsShownInShadow.style.display = 'none';
+
+      assertFalse(bot.dom.isShown(el));
+    }
+
+    function testIsShownDirectlyInShadow() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      var el = elementIsShownDirectlyInShadow
+        .shadowRoot
+        .querySelector('div');
+
+      assert(bot.dom.isShown(el));
+
+      elementIsShownDirectlyInShadow.style.display = 'none';
+
+      assertFalse(bot.dom.isShown(el));
+    }
+
+    function testIsShownInSlot() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      var el = elementIsShownInSlot.children[0];
+
+      assert(bot.dom.isShown(el));
+
+      elementIsShownInSlot.style.display = 'none';
+
+      assertFalse(bot.dom.isShown(el));
+
+      elementIsShownInSlot.style.display = '';
+      // Remove the slot, so our child is no longer slotted
+      elementIsShownInSlot.shadowRoot.innerHTML = '';
+
+      assertFalse(bot.dom.isShown(el));
+    }
+
+    function testGetParentNodeInComposedDom() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      var el = elementGetParent.children[0];
+
+      assertEquals(elementGetParent, bot.dom.getParentNodeInComposedDom(el));
+
+      el = elementGetParentSlot.children[0];
+
+      assertEquals(
+        elementGetParentSlot.shadowRoot.querySelector('div'),
+        bot.dom.getParentNodeInComposedDom(el)
+      );
+
+      elementGetParentSlot.shadowRoot.innerHTML = '';
+
+      assertEquals(null, bot.dom.getParentNodeInComposedDom(el));
+    }
+
+    function testGetVisibleText() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      assertEquals('Foo', bot.dom.getVisibleText(elementGetText));
+    }
+
+    function testGetVisibleTextInShadow() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      assertEquals('foo', bot.dom.getVisibleText(elementGetTextShadow));
+    }
+
+    function testGetVisibleTextInSlot() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      assertEquals('aFoob', bot.dom.getVisibleText(elementGetTextSlot));
     }
-  }
-}
-</script>
+
+    function testGetVisibleTextInSlots() {
+      if (!bot.dom.IS_SHADOW_DOM_ENABLED) {
+        return;
+      }
+
+      assertEquals('Foo\nBar', bot.dom.getVisibleText(elementGetTextSlots));
+    }
+  </script>
 </body>
 </html>