☰

Stylus Shadow DOM Support

Make Stylus styles also be applied to Shadow DOM elements.

当前为 2021-03-26 提交的版本，查看 最新版本。

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