Stylus Shadow DOM Support

Greasy Fork is available in English.

Stylus Shadow DOM Support

Make Stylus styles also be applied to Shadow DOM elements.

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

换行

// ==UserScript==
// @name         Stylus Shadow DOM Support
// @namespace    http://greasyfork.icu/en/users/85671-jcunews
// @version      1.0.1
// @license      AGPLv3
// @author       jcunews
// @description  Make Stylus styles also be applied to Shadow DOM elements.
// @match        *://*/*
// @match        *:*
// @grant        none
// @run-at       document-start
// ==/UserScript==

((updDelay, ass, eas, at) => {
  function chkNode(e) {
    return (e.tagName === "STYLE") && /^stylus-/.test(e.id)
  }
  function applyStylus(ss) {
    ss = document.querySelectorAll('html>style[id^="stylus-"]');
    ass.forEach(e => {
      if (!e.shadowRoot) return;
      Array.from(e.shadowRoot.children).forEach(el => chkNode(el) && el.remove());
      ss.forEach(el => e.shadowRoot.append(el.cloneNode(true)))
    })
  }
  updDelay = 500;
  ass = [];
  eas = Element.prototype.attachShadow;
  Element.prototype.attachShadow = function() {
    !ass.includes(this) && ass.push(this);
    clearTimeout(at);
    at = setTimeout(applyStylus, updDelay);
    return eas.apply(this, arguments)
  };
  at = 0;
  if (!document.documentElement) return;
  (new MutationObserver(function(recs, b) {
    recs.forEach(rec => {
      rec.addedNodes.forEach(e => {
        if (!chkNode(e)) return;
        (e.obs = new MutationObserver(function(recs, b) {
          clearTimeout(at);
          at = setTimeout(applyStylus, updDelay);
        })).observe(e, {characterData: true, subtree: true});
        b = true
      });
      rec.removedNodes.forEach(e => {
        if (!e.obs) return
        e.obs.disconnect();
        b = true
      });
    });
    if (b) {
      clearTimeout(at);
      at = setTimeout(applyStylus, updDelay);
    }
  })).observe(document.documentElement, {childList: true});
})();