{"id":15357388,"url":"https://github.com/tophf/xraystyler","last_synced_at":"2025-04-15T06:43:42.162Z","repository":{"id":64797557,"uuid":"209762303","full_name":"tophf/XRayStyler","owner":"tophf","description":"Applies custom CSS to some sites built with ShadowDOM","archived":false,"fork":false,"pushed_at":"2024-07-18T10:52:22.000Z","size":45,"stargazers_count":16,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"shadow-targeting","last_synced_at":"2025-04-15T06:43:30.158Z","etag":null,"topics":["chrome-extension","shadowdom","stylesheets"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tophf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-20T10:09:50.000Z","updated_at":"2025-01-05T01:58:28.000Z","dependencies_parsed_at":"2024-07-21T13:03:52.395Z","dependency_job_id":null,"html_url":"https://github.com/tophf/XRayStyler","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tophf%2FXRayStyler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tophf%2FXRayStyler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tophf%2FXRayStyler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tophf%2FXRayStyler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tophf","download_url":"https://codeload.github.com/tophf/XRayStyler/tar.gz/refs/heads/shadow-targeting","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249023729,"owners_count":21199958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","shadowdom","stylesheets"],"created_at":"2024-10-01T12:34:49.929Z","updated_at":"2025-04-15T06:43:42.118Z","avatar_url":"https://github.com/tophf.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"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](https://www.chromestatus.com/features#deep).\n\n### Styled sites:\n\n**[bugs.chromium.org](https://bugs.chromium.org)** | **[www.chromestatus.com](https://www.chromestatus.com)**\n---|---\n[![crbug screenshot](https://i.imgur.com/B9XoAImm.png)](https://i.imgur.com/B9XoAIm.png) | [![crstatus screenshot](https://i.imgur.com/FH3iG1Um.png)](https://i.imgur.com/FH3iG1U.png)\n\nAnd **[chromium-review.googlesource.com](https://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.\n\n### Requirements\n\n1. use Chrome 120 or newer\n2. open `chrome://extensions`\n3. enable `Developer mode` switch in the top right corner\n\n### How it works\n\nThe extension's adds a page script in the MAIN world that intercepts the built-in `attachShadow` and `adoptedStyleSheets` (see [Constructable Stylesheets: seamless reusable styles](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)), 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.\n\nThe individual shadow roots are targeted using `@shadow` AT-rule:\n\n```css\n@shadow * {\n  a:visited {\n    color: #a88cff;\n  }\n}\n@shadow mr-dropdown.project-selector,\n        mr-dropdown[icon=\"settings\"],\n        mr-dropdown[\\.icon=\"arrow_drop_down\"],\n        #searchq ~ mr-dropdown,\n        mr-search-bar {\n  i.material-icons:not(#\\0) {\n    color: #6eadd4 !important;\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftophf%2Fxraystyler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftophf%2Fxraystyler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftophf%2Fxraystyler/lists"}