Stylus: 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.