您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Allow stylus to target elements in shadow-root
当前为
// ==UserScript== // @name Style shadowRoot // @namespace https://github.com/Procyon-b // @version 0.1 // @description Allow stylus to target elements in shadow-root // @author Achernar // @match http://NOTHING/ // @run-at document-start // @grant none // ==/UserScript== (function() { "use strict"; var id=Date.now() //console.info('%c shadow CSS ', 'background: lightblue', {document}, {'body':document ? document.body:'-'}, {dE:document ? document.documentElement : '-'}) // patch attachShadow() var AS=HTMLElement.prototype.attachShadow; //console.info('%c shadow CSS ', 'background: #6699FF', id,{AS},location.href); HTMLElement.prototype.attachShadow=function(m){/*[native */ var e=this; //console.info('%c shadow CSS ', 'background: #6699FF', id,{e, m}) e.sr=AS.call(e,m); shadows.push(e.sr); inject(e.sr); shadowMod(e.sr); return e.sr; } // END patch var sheets={}, order=[], shadows=[], sCSS={}, injCSS='', oldInjCSS=''; // catch stylus injections const obs=new MutationObserver(function(muts){ for (let mut of muts) { //console.info('%c shadow CSS ', 'background: #6699FF', {mut}); for (let n of mut.addedNodes) { if ( (n.tagName == 'STYLE') && (n.className == 'stylus') && n.id.startsWith('stylus-') ) { addCSS(n); } } for (let n of mut.removedNodes) { if ( (n.tagName == 'STYLE') && (n.className == 'stylus') && n.id.startsWith('stylus-') ) { remCSS(n); } } } }); // END catch function init() { if (!document.documentElement) { setTimeout(init, 0); return; } obs.observe(document.documentElement, {attributes: false, subtree: false, childList: true }); // check for stylesheets document.documentElement.querySelectorAll('style[id^="stylus-"].stylus').forEach( (e) => addCSS(e,2) ); } init(); // get only shadow-specific css function parseSheet(s) { var R=s.sheet.cssRules, sels, sel, shCSS=''; for (let i=0; i < R.length; i++) { sel=R[i].selectorText; //console.info('%c shadow CSS ', 'background: #6699FF', sel); if (!sel.includes(':host')) continue; //console.info('%c shadow CSS ', 'background: #6699FF', {sels, f:sels.filter(function(v){ return v.includes(':host') })} ); sels=sel.split(',').filter(function(v){ return v.includes(':host') }).join(','); shCSS+=sels.trim()+ R[i].cssText.substr(sel.length)+'\n'; } if (shCSS) shCSS='/*'+s.id+'*/\n'+shCSS; //console.info('%c shadow CSS ', 'background: lightgreen', shCSS) return shCSS; } // inject in this shadow function inject(e) { if (injCSS == '') { if (e._inj_) { e._inj_.remove(); delete e._inj_; } return; } if (!e._inj_ || !e._inj_.parentNode ) { let s=e._inj_=document.createElement('style'); s.className='sh-stylus'; e.appendChild(s); } e._inj_.textContent=injCSS; } // inject style function injectAll() { for (let i=0; i < shadows.length; i++) inject(shadows[i]); } // create & inject style in shadows function injUpd() { oldInjCSS=injCSS; injCSS=''; for (let i=0; i < order.length; i++) injCSS+=sCSS[order[i]]; if (injCSS !== oldInjCSS) injectAll(); } // get stylus stylesheet order function getStylusOrder() { order=[]; for (let i=0; i < document.styleSheets.length; i++) { let s=document.styleSheets[i].ownerNode; if (s.className == 'stylus') order.push(s.id); } } // handle new stylesheet function addCSS(n, k=1) { if (n.id in sheets) return; sheets[n.id]=n; if (n.__k__) ;//console.info('%c shadow CSS ', 'background: #6699FF', 'already known', n.id, n.__k__, k); else { n.__k__=k; // monitor modification const obs=new MutationObserver(function(muts){ if (muts[0].addedNodes.length) { // === reparse stylesheet and reinject it sCSS[muts[0].target.id]=parseSheet(muts[0].target); injUpd(); } }); obs.observe(n, {attributes: false, subtree: false, childList: true }); } sCSS[n.id]=parseSheet(n); getStylusOrder(); injUpd(); } // handle stylesheet removal function remCSS(n) { // is it only moved? if (n.parentNode == null) delete sheets[n.id]; getStylusOrder(); injUpd(); } // monitor shadow modification function shadowMod(e) { const obs=new MutationObserver(function(muts){ if (e._inj_ && (!e._inj_.parentNode || e._inj_.nextElementSibling) ) e.appendChild(e._inj_); }); obs.observe(e, {attributes: false, subtree: false, childList: true }); } })();