README.md

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.

Styled sites:

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.

Requirements

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

How it works

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;
  }
}