Add [hidden] rule to cr-elements :root stylesheet

ui/webui/resources/cr_elements/shared_vars_css.html

Index: ui/webui/resources/cr_elements/shared_vars_css.html
diff --git a/ui/webui/resources/cr_elements/shared_vars_css.html b/ui/webui/resources/cr_elements/shared_vars_css.html
index dceff2a6f51ecad120ccdfab787e658b72069049..6a08b57a3acd284181efbd655d37377e34e2cefd 100644
--- a/ui/webui/resources/cr_elements/shared_vars_css.html
+++ b/ui/webui/resources/cr_elements/shared_vars_css.html
@@ -9,4 +9,12 @@
     --cr-focused-item-color: var(--google-grey-300);
     --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
   }
+
+  /* Because everyone assumes [hidden] overrides {display: foo}.
+   * TODO(michaelpg): Rename to shared_global_css.html and import only from
+   * entry points (md_foo.html and tests). Eventually find alternative solution
+   * to this deprecated /deep/ selector (crbug.com/498405). */
+  :root /deep/ [hidden] {
+    display: none !important;
+  }
 </style>