[breadcrumb] Use <span> attribute [caret] instead of a class .caret

Class is cool but attributes are too: when they are concise as here so
reader does not have to read so much, and fewer bytes on the wire.

Bug: 1035691
Change-Id: I77ed2fdc0e51526719a57f4fc1b168a986320ac1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2097680Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749060}

ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js

@@ -21,7 +21,7 @@ const breadCrumbTemplate = `
       white-space: nowrap;
     }
 
-    span.caret {
+    span[caret] {
       -webkit-mask-image: url(../../images/files/ui/arrow_right.svg);
       -webkit-mask-position: center;
       -webkit-mask-repeat: no-repeat;
@@ -32,7 +32,7 @@ const breadCrumbTemplate = `
       width: 20px;
     }
 
-    :host-context(html[dir='rtl']) span.caret {
+    :host-context(html[dir='rtl']) span[caret] {
       transform: scaleX(-1);
     }
 
@@ -141,16 +141,16 @@ const breadCrumbTemplate = `
   </style>
 
   <button id='first'></button>
-  <span class='caret' hidden></span>
+  <span caret hidden></span>
   <button elider aria-haspopup='menu' aria-expanded='false'
       aria-label='$i18n{LOCATION_BREADCRUMB_ELIDER_BUTTON_LABEL}'>
     <span elider></span>
   </button>
-  <span class='caret' hidden></span>
+  <span caret hidden></span>
   <button id='second'></button>
-  <span class='caret' hidden></span>
+  <span caret hidden></span>
   <button id='third'></button>
-  <span class='caret' hidden></span>
+  <span caret hidden></span>
   <button id='fourth'></button>
   <cr-action-menu id='elider-menu'></cr-menu-item>
 `;
@@ -239,7 +239,7 @@ class BreadCrumb extends HTMLElement {
 
     function setButton(i, text) {
       const previousSibling = buttons[i].previousElementSibling;
-      if (previousSibling.classList.contains('caret')) {
+      if (previousSibling.hasAttribute('caret')) {
         previousSibling.hidden = !text;
       }