Style component doc breadcrumbs with class

Styling it with just `ul` meant it applied to any `ul`s on the page (as
it's not in a shadow root) and it broke some examples. Added a class
instead.

Change-Id: I428b0db2aeeae507c9254e49cc3643b809aee5a5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2626305
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>

front_end/component_docs/create_breadcrumbs.ts

@@ -10,7 +10,7 @@ export function init(): void {
   LitHtml.render(LitHtml.html`
 
   <style>
-    ul {
+    .docs-breadcrumbs {
       display: flex;
       list-style: none;
       position: absolute;
@@ -20,18 +20,18 @@ export function init(): void {
       padding: 0;
     }
 
-    li a {
+    .docs-breadcrumbs li a {
       display: block;
       padding: 10px;
       font-size: 16px;
     }
 
-    span {
+    .docs-breadcrumbs span {
       font-size: 20px;
-
+    }
   </style>
 
-  <ul>
+  <ul class="docs-breadcrumbs">
     <li><a href="/">Index</a></li>
     <li><a href=".">All component examples</a></li>
   </ul>`, container);