Make Stylus styles also be applied to Shadow DOM elements.
< Σχολιασμός για τον κώδικα Stylus Shadow DOM Support
Sorry, but I can't simply apply a fix without actually knowing what problem it is for. Please provide the site URL for analysis and testing.
Right you are, the more because I'm still rather a beginner at JavaScript. I was just hoping that with my diagnosis and that patch you could figure out what the problem would be, because the original site really is out of reach.
Anyway, I think I have reproduced the issue (and another one) in something like a standalone test case. All of these test cases are based on the MDN example from https://github.com/mdn/web-components-examples/tree/main/word-count-web-component. For all of them you need a stylus user style like this:
/* ==UserStyle==
@name jschmidt.srht.site/shadowroot-element
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document url-prefix("https://jschmidt.srht.site/") {
span { background-color: red; }
}
Plus you need version 1.0.5 of your user script.
Then check:
https://jschmidt.srht.site/shadowroot-element
On this one your user script should work. Meaning: The span below the shadow root gets a red background.
https://jschmidt.srht.site/shadowroot-htmlelement
On this one your user script should not work. Meaning: The span below the shadow root does not get a red background. I hope that this is exactly the issue I experience on the original site. At least the symptom is identical and my fix from above works around the issue.
While writing up these test cases, I also came across the following, where your user script does not work, not sure how that is related:
https://jschmidt.srht.site/shadowroot-element-nodelay
This seems to be some timing issue, since here the call to attachShadow
from the page script seems to be executed before your user script has the chance to intercept the call.
Thanks!
BTW, if you want me to test any possible fixes on that original site, you could just give me patches based on version 1.0.5 ...
You're right. It's a timing issue. I've updated the script for that.
Let me know if it introduces a problem with a Cloudflare Captcha. I've already tested it with some sites which I know, make use of Cloudflare Captcha aggresively. But there may be some variants of Cloudflare Captcha which are not yet covered by this script.
Now that was quick, thanks a lot!
Version 1.0.6 fixes both failing test cases reported above plus my original issue on that internal support site.
Only I'm afraid I cannot do anything w.r.t. Cloudflare Captchas. I remember vaguely having seen these, but I couldn't say where to test these, TBH.
Thanks for this user script ...
... which recently stopped working on that one site (behind a support login wall) where I actually require it.
It turned out that that site tweaks
HTMLElement.prototype.attachShadow
, which somehow rendered your tweaking ofElement.prototype.attachShadow
ineffective, so that variableass
would not get updated, and the style sheet not injected in shadow DOMs.I fixed that for me rather crudely like this:
but I'm not sure whether this is the right fix.