Apply styles to ShadowDOM

[tsuliwaensis]

• Browser: Chrome 76.0.3809.46 (Official Build) beta (64-bit)
• Operating System: macOS
• Stylus Version: 1.5.3
• Screenshot:
• Style: * { background-color: pink !important; }

This was filed under #215, which was for Firefox and a comment was made that it works in Chrome, but I am not seeing it.

[narcolepticinsomniac]

I don't think the two issues are really related. Embedded tweets are displayed within the shadow DOM, and are therefore mostly off-limits to the end user. In fact, they're specifically referenced in this shadow DOM explanation. Used to be you could use the pseudo-selector ::shadow or the /deep/ combinator, but they were deprecated and removed from Chromium around a couple years ago, I believe.

Those methods of interacting with shadow DOM elements, were replaced by :host and :host-context, which aren't available to the end user in terms of utilizing them in styles or scripts AFAIK. They enabled the capability in devtools, to allow them to be styled via extensions, so I've experimented a bit, but I'm fairly certain that's the only aspect of Chromium which allows for manipulating the shadow DOM at all.

I think the real reason the new spec is a shadow of its former self (pun intended), is because the powers that be want it that way. Chris said in that article "It's a totally understandable need for control". I don't agree that the need for control is understandable, but I understand why they want it. Personally, I think using the shadow DOM for stuff like this is anal, and anti-user, but currently there's no workaround I'm aware of.

[tophf]

@narcolepticinsomniac I wrote a demo extension (link) to restyle shadows via Constructable Stylesheets API (Chrome-only) so arguably it can be implemented in Stylus.

[narcolepticinsomniac]

Constructable Stylesheets API

That's a neat trick.

arguably it can be implemented in Stylus

If Chromium 73+ has a workaround for styling the shadow DOM, I don't see why we wouldn't take advantage of it. Are you inclined to hook it up?

[tophf]

I can help certainly if needed but I thought @eight04 who is actively maintaining the code would be a better match.

[narcolepticinsomniac]

Makes sense. Let's see what he thinks.

[tophf]

While not strictly necessary to write a working theme, it might be nice to design a way of targeting specific shadowed elements, which should simplify styling and [theoretically] increase performance. For example we could abuse an AT-rule:

@-webkit-shadow (:not(gr-main-header):not(gr-endpoint-decorator)) {
  a:visited {
    color: #e094f3;
  }
}

Since Stylus uses a custom parserlib anyway, it could extend the syntax easily. See the simplified implementation in shadow-targeting branch.

[eight04]

The API looks promising. I think we can implement a custructable-style-injector.js which can be dropped in immediately.

Perhaps we can reopen this issue first?

Currently, I'm working on a sync controller: https://github.com/eight04/db-to-cloud

[marcinsmialek]

It would be great to have it working, both on Chromium and Firefox, as DOM shadowing gets more common.

[narcolepticinsomniac]

Maybe not ideal, but this script appears to work pretty decently.

[Athari]

@narcolepticinsomniac The script works perfectly, thanks. It's configured to run on every website though. I'm not familiar with observing, but it sounds like something that may affect performance, so it's probably a good idea to configure the script to run only on websites one needs.

[farblos]

Maybe not ideal, but this script appears to work pretty decently.

@narcolepticinsomniac Confirmed (and if only to bump this enhancement request). However, "Live Update" does not seem to work: One has to reload the page to get any style updates from the Stylus editor.

[joppekroon]

Although the Greasemonkey/Tampermonkey script works, I don't think it is a viable solution.

• There would need to be a way to detect when the script is running, so fallback styling can be applied if it isn't. For example, resetting the background of the custom element to white so the black text remains readable in an otherwise 'dark mode' page.
• There is no way to inform users of a custom style that they should install Greasemonkey/Tampermonkey and this script, if they are already using the custom style.
• Asking users to install Greasemonkey/Tampermonkey may not fly with some security officers.

I hope some solution can be found that would run within stylus itself!

[tophf]

Now that adoptedStyleSheets allows push and other array methods, intercepting it will be bad for performance because these array methods are used everywhere. Well, that's if we want to intercept with 100% reliability, but we can simply add the spoofed methods as own properties on adoptedStyleSheets, which should work in 99.9% of cases, arguably.

[decembre]

To style the WayBackMachine to remove their Subscribe top banner,

• on Chrome because i don't see it with Waterfox Classic - : WE DID NOT WAGE THIS BATTLE JUST AROUND A WEBSITE'

Note: If you try to use Ublock Origin to delete it, it's seems not possible too.

For that, i tested the before mentioned userscript, without luck: Stylus Shadow DOM Support

Maybe it seems due the shadow DOM is "(closed)"...

But i found an other one userscript which do the job perfectly: ShadowRoot Hook

As mentioned for the previous userscript, the Live Edit of Stylus don't work when you work on shadow DOM: you need to refresh the page to see the change. But for a simple change, that's doable.

Related post (with screenshots): Styling Wayback Machine's header (aka toolbar) #962

Because this script is different, maybe something like that can be implemented in Stylus?

The other solution "adoptedStyleSheets" seems possible too, but i don't understand how to use it with Stylus: I do a search around: adoptedStyleSheets at DuckDuckGo

I found, but not tested yet, which should do the job: XRayStyler

It's possible to have it include in Stylus ?

[jabcreations]

The "answers" provided are akin to someone saying, "Waldo can be found in Waldo books." Like seriously? Could someone post actual Shadow DOM HTML and CSS so we have a way to test and verify how it actually works? 🙄︀

[joppekroon]

Is there any progress on this idea?

[myfonj]

Blurbed this issue into https://github.com/w3c/webcomponents-cg/discussions/92#discussioncomment-9238212