Greasy Fork

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 of Element.prototype.attachShadow ineffective, so that variable ass would not get updated, and the style sheet not injected in shadow DOMs.

I fixed that for me rather crudely like this:

--- stylus-shadow-dom-support.user.js.orig      2024-09-17 18:36:26.842339651 +0200
+++ stylus-shadow-dom-support.user.js   2024-09-17 18:35:50.434348845 +0200
@@ -14,7 +14,7 @@
 // @updateURL https://update.greasyfork.org/scripts/424030/Stylus%20Shadow%20DOM%20Support.meta.js
 // ==/UserScript==

-((updDelay, ass, eas, at) => {
+((updDelay, ass, eas, heas, at) => {
   function chkNode(e) {
     return (e.tagName === "STYLE") && /^stylus-/.test(e.id)
   }
@@ -41,6 +41,21 @@
     at = setTimeout(applyStylus, updDelay);
     return eas.apply(this, arguments)
   };
+  if (!(heas = HTMLElement.prototype.attachShadow)) return;
+  HTMLElement.prototype.attachShadow = function(opt) {
+    if (!document.querySelector('script[src^="https://challenges.cloudflare.com/"]')) {
+      if (opt) {
+        opt.mode = "open"
+      } else opt = {mode: "open"};
+    }
+    !ass.includes(this) && ass.push(this);
+    clearTimeout(at);
+    at = setTimeout(applyStylus, updDelay);
+    return heas.apply(this, arguments)
+  };
   at = 0;
   if (!document.documentElement) return;
   (new MutationObserver(function(recs, b) {

but I'm not sure whether this is the right fix.

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.