Inject Stylus into shadowRoots

inject styles of stylus-addon in shadowRoot

Ask a question, post a review, or report the script.

Wrap lines

// ==UserScript==
// @name                Inject Stylus into shadowRoots
// @name:pt-BR          Injetar Stylus em shadowRoots
// @namespace           https://greasyfork.dpdns.org/users/821661
// @version             1.1
// @description         inject styles of stylus-addon in shadowRoot
// @description:pt-BR   injeta estilos do stylus-addon em shadowRoot
// @author              hdyzen
// @run-at              document-start
// @match               https://*/*
// @grant               none
// @license             GPL-3.0-only
// ==/UserScript==

const sheet = new CSSStyleSheet();
const originalShadowRootDescriptor = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, "adoptedStyleSheets");
const originalAttachShadow = Element.prototype.attachShadow;

function syncStyles() {
	const css = [...document.querySelectorAll("html > style.stylus")].map((s) => s.textContent).join("\n");
	sheet.replaceSync(css);
}

Element.prototype.attachShadow = function (init) {
	const shadowRoot = originalAttachShadow.call(this, init);

	shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];

	return shadowRoot;
};

Object.defineProperty(ShadowRoot.prototype, "adoptedStyleSheets", {
	get() {
		return originalShadowRootDescriptor.get.call(this);
	},
	set(newSheets) {
		const sheets = [...newSheets];

		if (!sheets.includes(sheet)) {
			sheets.push(sheet);
		}

		originalShadowRootDescriptor.set.call(this, sheets);
	},
	configurable: true,
	enumerable: true,
});

new MutationObserver(syncStyles).observe(document.documentElement, {
	childList: true,
	subtree: true,
	characterData: true,
});

Greasy Fork镜像

Inject Stylus into shadowRoots

赞助商

广告