☰

Stylus Shadow DOM Support

Make Stylus styles also be applied to Shadow DOM elements.

当前为 2024-08-31 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Stylus Shadow DOM Support
  3. // @namespace    https://greasyfork.org/en/users/85671-jcunews
  4. // @version      1.0.5
  5. // @license      AGPLv3
  6. // @author       jcunews
  7. // @description  Make Stylus styles also be applied to Shadow DOM elements.
  8. // @match        *://*/*
  9. // @include      *:*
  10. // @inject-into  page
  11. // @grant        none
  12. // @run-at       document-end
  13. // ==/UserScript==
  14.  
  15. ((updDelay, ass, eas, at) => {
  16.   function chkNode(e) {
  17.     return (e.tagName === "STYLE") && /^stylus-/.test(e.id)
  18.   }
  19.   function applyStylus(ss) {
  20.     ss = document.querySelectorAll('html>style[id^="stylus-"]');
  21.     ass.forEach(e => {
  22.       if (!e.shadowRoot) return;
  23.       Array.from(e.shadowRoot.children).forEach(el => chkNode(el) && el.remove());
  24.       ss.forEach(el => e.shadowRoot.append(el.cloneNode(true)))
  25.     })
  26.   }
  27.   if (window._cf_chl_opt) return;
  28.   updDelay = 500;
  29.   ass = [];
  30.   if (!(eas = Element.prototype.attachShadow)) return;
  31.   Element.prototype.attachShadow = function(opt) {
  32.     if (!document.querySelector('script[src^="https://challenges.cloudflare.com/"]')) {
  33.       if (opt) {
  34.         opt.mode = "open"
  35.       } else opt = {mode: "open"};
  36.     }
  37.     !ass.includes(this) && ass.push(this);
  38.     clearTimeout(at);
  39.     at = setTimeout(applyStylus, updDelay);
  40.     return eas.apply(this, arguments)
  41.   };
  42.   at = 0;
  43.   if (!document.documentElement) return;
  44.   (new MutationObserver(function(recs, b) {
  45.     recs.forEach(rec => {
  46.       rec.addedNodes.forEach(e => {
  47.         if (!chkNode(e)) return;
  48.         (e.obs = new MutationObserver(function(recs, b) {
  49.           clearTimeout(at);
  50.           at = setTimeout(applyStylus, updDelay);
  51.         })).observe(e, {characterData: true, subtree: true});
  52.         b = true
  53.       });
  54.       rec.removedNodes.forEach(e => {
  55.         if (!e.obs) return
  56.         e.obs.disconnect();
  57.         b = true
  58.       });
  59.     });
  60.     if (b) {
  61.       clearTimeout(at);
  62.       at = setTimeout(applyStylus, updDelay);
  63.     }
  64.   })).observe(document.documentElement, {childList: true});
  65. })();