tophf / xraystyler Goto Github PK

Applies custom CSS to pages built with ShadowDOM (usually based on Polymer and other Web Components frameworks) that cannot be styled anymore in modern Chrome as it removed Shadow-piercing support from stylesheets.

bugs.chromium.org	www.chromestatus.com

And chromium-review.googlesource.com where it simply changes :link and :visited colors, and hides some authoring-only stuff to facilitate casual browsing, requires you to choose the dark theme in site's prefs.

1. use Chrome 120 or newer
2. open chrome://extensions
3. enable Developer mode switch in the top right corner

The extension's adds a page script in the MAIN world that intercepts the built-in attachShadow and adoptedStyleSheets (see Constructable Stylesheets: seamless reusable styles), the latter helps propagate the preparsed custom user CSS to every shadow root without re-evaluating it. In browsers without this API we would incur a performance penalty for creating a copy of stylesheet element that needs re-parsing inside each shadow (and there could be hundreds on a page), which is why such an extension didn't exist in the past.

The individual shadow roots are targeted using @shadow AT-rule:

@shadow * {
  a:visited {
    color: #a88cff;
  }
}
@shadow mr-dropdown.project-selector,
        mr-dropdown[icon="settings"],
        mr-dropdown[\.icon="arrow_drop_down"],
        #searchq ~ mr-dropdown,
        mr-search-bar {
  i.material-icons:not(#\0) {
    color: #6eadd4 !important;
  }
}