Make Stylus styles also be applied to Shadow DOM elements.
// ==UserScript==
// @name Stylus Shadow DOM Support
// @namespace https://greasyfork.org/en/users/85671-jcunews
// @version 1.0.3
// @license AGPLv3
// @author jcunews
// @description Make Stylus styles also be applied to Shadow DOM elements.
// @match *://*/*
// @include *:*
// @inject-into page
// @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 = [];
if (!(eas = Element.prototype.attachShadow)) return;
Element.prototype.attachShadow = function(opt) {
if (opt) {
opt.mode = "open"
} else opt = {mode: "open"};
!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});
})();