鍓嶈█鑷粠寰產pp浠ユ潵锛屽井鍓嶇妗嗘灦鏄紑婧愮殑锛屽緢澶氬皬浼欎即寰堟劅鍏磋叮锛岄棶鎴戞€庝箞瀹炵幇鐨勶紝鍏跺疄杩欎笉鏄嚑鍙ヨ瘽璇寸殑閫氫織鏄撴噦銆備负浜嗘妸鍘熺悊璁叉竻妤氾紝鎴戝皢浠庨浂寮€濮嬪疄鐜颁竴涓畝鍗曠殑寰墠绔鏋躲€傚叾鏍稿績鍔熻兘鍖呮嫭锛氭覆鏌撱€丣S娌欑銆佹牱寮忛殧绂汇€佹暟鎹€氫俊銆傜敱浜庡唴瀹瑰お澶氾紝灏嗘寜鐓у姛鑳藉垎涓哄洓绡囪繘琛岃瑙ｃ€傝繖鏄绯诲垪鐨勭涓夌瘒鏂囩珷锛氭牱寮忛殧绂汇€傞€氳繃杩欎簺鏂囩珷锛屾偍鍙互浜嗚В寰墠绔鏋剁殑鍏蜂綋鍘熺悊鍜屽疄鐜版柟娉曪紝瀵规偍浣跨敤寰墠绔鏋舵垨鑷繁缂栧啓寰墠绔鏋舵湁寰堝ぇ鐨勫府鍔┿€傚鏋滄湰鏂囧鎮ㄦ湁甯姪锛岃鐐硅禐鍜岃瘎璁恒€傜浉鍏虫帹鑽愬井搴旂敤浠撳簱鍦板潃simple-寰簲鐢ㄤ粨搴撳湴鍧€浠庨浂寮€濮嬪啓涓€涓井鍓嶇妗嗘灦-娓叉煋鏂囩珷浠庨浂寮€濮嬪啓涓€涓井鍓嶇妗嗘灦-娌欑洅鏂囩珷浠庨浂寮€濮嬪啓涓€涓井鍓嶇妗嗘灦-椋庢牸闅旂鏂囩珷鏉ヨ嚜鍐欎竴涓井鍓嶇妗嗘灦浠庨浂寮€濮?鏁版嵁閫氫俊绡囧井搴旂敤鍏ラ棬鍓嶄袱绡囨垜浠畬鎴愪簡寰墠绔殑娓叉煋鍜孞S娌欑鍔熻兘锛岃繘鑰屽疄鐜颁簡寰墠绔殑鏍峰紡闅旂銆傞棶棰樼ず渚嬭鎴戜滑棣栧厛鍒涘缓涓€涓棶棰樻潵楠岃瘉鏄惁瀛樺湪鏍峰紡鍐茬獊銆備娇鐢╠iv鍏冪礌鍒嗗埆鍦ㄥ熀纭€搴旂敤鍜屽瓙搴旂敤涓婃彃鍏ヤ竴娈垫枃瀛椼€備袱涓猟iv鍏冪礌浣跨敤鐩稿悓鐨勭被鍚峵ext-color锛屽垎鍒湪绫讳腑璁剧疆鏂囨湰棰滆壊銆傚熀纭€搴旂敤绋嬪簭鏄孩鑹茬殑锛屽瓙搴旂敤绋嬪簭鏄摑鑹茬殑銆傜敱浜庡瓙搴旂敤绋嶅悗鎵ц锛屽叾鏍峰紡浼氳鐩栧熀纭€搴旂敤锛屼粠鑰屼骇鐢熸牱寮忓啿绐併€傛牱寮忛殧绂诲疄鐜板師鐞嗚瀹炵幇鏍峰紡闅旂锛屽繀椤讳慨鏀瑰簲鐢ㄧ殑CSS锛屽洜涓哄熀纭€搴旂敤鏃犳硶鎺у埗锛屾垜浠彧鑳戒慨鏀瑰瓙搴旂敤銆傚厛鐪嬪瓙搴旂敤娓叉煋鍚庣殑鍏冪礌缁撴瀯锛氬瓙搴旂敤鐨勬墍鏈夊厓绱犻兘鎻掑叆鍒板井搴旂敤鏍囩涓紝寰簲鐢ㄦ爣绛炬湁鍞竴鐨刵ame鍊硷紝鎵€浠ラ€氳繃娣诲姞灞炴€ч€夋嫨鍣ㄥ墠缂€micro-app[name=xxx]鍙互浣縞ss鏍峰紡鍦ㄦ寚瀹氱殑寰簲鐢ㄤ腑鐢熸晥銆備緥濡傦細.test{height:100px;}鍔犱笂鍓嶇紑鍚庡彉鎴愶細micro-app[name=xxx]銆?鍦ㄦ覆鏌撻儴鍒嗭紝鎴戜滑灏唋ink鏍囩寮曞叆鐨勮繙绋媍ss鏂囦欢杞寲涓簊tyle鏍囩锛屾墍浠ュ瓙app涓彧瀛樺湪style鏍囩銆傚疄鐜版牱寮忛殧绂荤殑鏂规硶鏄湪style鏍囩鐨勬瘡鏉SS瑙勫垯鍓嶅姞涓妋icro-app[name=xxx]鍓嶇紑锛岃繖鏍锋墍鏈夌殑CSS瑙勫垯鍙兘褰卞搷鎸囧畾鍏冪礌鐨勫唴閮ㄣ€傞€氳繃style.textContent鑾峰彇鏍峰紡鍐呭鏄渶绠€鍗曠殑锛屼絾鏄痶extContent鑾峰彇鐨勬槸鎵€鏈塩ss鍐呭鐨勫瓧绗︿覆锛屾棤娉曢拡瀵逛釜鍒鍒欒繘琛屽鐞嗭紝鎵€浠ユ垜浠笉寰椾笉浣跨敤鍙︿竴绉嶆柟寮忥細CSSRules銆傚綋涓€涓牱寮忓厓绱犺鎻掑叆鍒版枃妗ｄ腑鏃讹紝娴忚鍣ㄤ細鑷姩涓鸿鏍峰紡鍏冪礌鍒涘缓涓€涓狢SSStyleSheet鏍峰紡琛ㄣ€侰SS鏍峰紡琛ㄥ寘鍚竴缁勮〃绀鸿鍒欑殑CSSRule瀵硅薄銆傛瘡涓狢SS瑙勫垯閮藉彲浠ラ€氳繃鍏跺叧鑱旂殑瀵硅薄杩涜鎿嶄綔銆傝繖浜涜鍒欏寘鍚湪CSSRuleList涓紝鍙互閫氳繃鏍峰紡琛ㄧ殑cssRules灞炴€ц幏鍙栥€傚舰寮忓鍥撅細鎵€浠ssRules鏄敱鍗曚釜CSS瑙勫垯缁勬垚鐨勫垪琛ㄣ€傛垜浠彧闇€瑕侀亶鍘嗚鍒欏垪琛紝鍦ㄦ瘡鏉¤鍒欑殑閫夋嫨鍣ㄤ腑娣诲姞鍓嶇紑micro-app[name=xxx]锛屽氨鍙互灏嗗綋鍓嶆牱寮弒tyle鐨勫奖鍝嶉檺鍒跺湪寰簲鐢ㄥ厓绱犲唴閮ㄣ€備唬鐮佸疄鐜板垱寤轰竴涓猻copedcss.js鏂囦欢锛岄噷闈細鏀剧疆鏍峰紡闅旂鐨勬牳蹇冧唬鐮併€備笂闈㈡垜浠彁鍒版牱寮忓厓绱犳彃鍏ユ枃妗ｅ悗浼氬垱寤轰竴涓猚ss鏍峰紡琛紝浣嗘槸鍦ㄥ仛鏍峰紡闅旂鐨勬椂鍊欐湁浜涙牱寮忓厓绱狅紙姣斿鍔ㄦ€佸垱寤虹殑鏍峰紡锛夎繕娌℃湁鎻掑叆鍒版枃妗ｄ腑锛屾牱寮忚〃宸茬粡灏氭湭鐢熸垚銆傛墍浠ユ垜浠渶瑕佸垱寤轰竴涓ā鏉挎牱寮忓厓绱狅紝鐢ㄤ簬澶勭悊杩欑鐗规畩鎯呭喌銆傛ā鏉挎牱寮忎粎浣滀负鏍煎紡鍖栧伐鍏蜂娇鐢紝涓嶄細褰卞搷椤甸潰銆傝繕鏈変竴绉嶆儏鍐甸渶瑕佺壒娈婂鐞嗭細鏍峰紡鍏冪礌琚彃鍏ュ埌鏂囨。涓紝鐒跺悗娣诲姞鏍峰紡鍐呭銆傝繖绉嶆儏鍐靛湪寮€鍙戠幆澧冧腑寰堝父瑙侊紝閫氳繃style-loader鎻掍欢鍒涘缓鐨剆tyle鍏冪礌銆傝繖绉嶆儏鍐典笅锛屽彲浠ヤ娇鐢∕utationObserver鏉ョ洃鍚瑂tyle鍏冪礌鐨勫彉鍖栵紝鐒跺悗鍦╯tyle鎻掑叆鏂扮殑style鏃惰繘琛岄殧绂诲鐞嗐€傚叿浣撳疄鐜板涓嬶細///src/scopedcss.jslettemplateStyle//templatesytle/***styleisolation*@param{HTMLStyleElement}styleElementstyleelement*@param{string}appNameapplicationname*/exportdefaultfunctionscopedCSS(styleElement,appName){//prefixconstprefix=`micro-app[name=${appName}]`//鍦ㄥ垵濮嬪寲鏈熼棿鍒涘缓妯℃澘鏍囩if(!templateStyle){templateStyle=document.createElement('style')document銆傝韩浣撱€俛ppendChild(templateStyle)//灏嗘牱寮忚〃璁剧疆涓烘棤鏁堬紝闃叉搴旂敤鍙楀埌褰卞搷=styleElement.textContent//鏍煎紡鍖栬鍒欏苟灏嗘牸寮忓寲鍚庣殑瑙勫垯璧嬪€肩粰鏍峰紡鍏冪礌styleElement.textContent=scopedRule(Array.from(templateStyle.sheet?.cssRules??[]),prefix)//娓呴櫎妯℃澘鏍峰紡鍐呭templateStyle.textContent=''}else{//鐩戝惉鍔ㄦ€佹坊鍔犲唴瀹圭殑鏍峰紡鍏冪礌constobserver=newMutationObserver(function(){//鏂紑鐩戝惉鍣╫bserver.disconnect()//鏍煎紡鍖栬鍒欏苟灏嗘牸寮忓寲鍚庣殑瑙勫垯璧嬪€肩粰鏍峰紡鍏冪礌styleElement.textContent=scopedRule(Array.from(styleElement.sheet?.cssRules??[]),prefix)})//鐩戝惉style鍏冪礌鍐呭鏄惁鍙樺寲observer.observe(styleElement,{childList:true})}}scopedRule鏂规硶涓昏鎵цCSSRule.typeCSSRule.type鏈夊嚑鍗佺绫诲瀷銆傛垜浠彧澶勭悊涓夌绫诲瀷锛歋TYLE_RULE銆丮EDIA_RULE鍜孲UPPORTS_RULE銆傚畠浠悇鑷搴旂殑绫诲瀷鍊间负锛?銆?銆?2锛屽叾浠栫被鍨嬩笉鍋氬鐞?//src/scopedcss.js/***渚濇澶勭悊姣忎釜cssRule*@paramrulescssRule*@paramprefixprefix*/functionscopedRule(rules,prefix){letresult=''//閬嶅巻瑙勫垯锛屽鐞嗘瘡涓鍒檉or(construleofrules){switch(rule.type){case1://STYLE_RULEresult+=scopedStyleRule(rule,prefix)breakcase4://MEDIA_RULEresult+=scopedPackRule(rule,prefix,'media')breakcase12://SUPPORTS_RULE缁撴灉+=scopedPackRule(rule,prefix,'supports')breakdefault:result+=rule.cssTextbreak}}returnresult}鍦╯copedPackRule鏂规硶涓紝瀵筸edia鍜宻upports杩欎袱绉嶇被鍨嬭繘琛屼簡杩涗竴姝ュ鐞嗭紝鍥犱负瀹冧滑鍖呭惈瀛愯鍒欙紝鎴戜滑闇€瑕侀€掑綊澶勭悊瀹冧滑鐨勫瓙瑙勫垯銆備緥濡傦細@mediascreenand(max-width:300px){.test{background-color:lightblue;}}闇€瑕佽浆鎹负锛欯mediascreenand(max-width:300px){micro-app[name=xxx]銆倀est{background-color:lightblue;鐨勫鐞嗘柟娉晑}涔熷緢绠€鍗曪細鑾峰彇瀹冧滑鐨勫瓙瑙勫垯鍒楄〃锛岄€掑綊鎵цscopedRule鏂规硶銆?//src/scopedcss.js//澶勭悊濯掍綋骞舵敮鎸乫unctionscopedPackRule(rule,prefix,packName){//閫掑綊鎵цscopedRule锛屽鐞嗗獟浣撳苟鏀寔鍐呴儴瑙勫垯constresult=scopedRule(Array.from(rule.cssRules),prefix)return`@${packName}${rule.conditionText}{${result}}`}鏈€鍚庡疄鐜皊copedStyleRule鏂规硶锛屼慨鏀瑰叿浣撶殑CSS瑙勫垯銆備慨鏀硅鍒欑殑鏂瑰紡涓昏鏄€氳繃姝ｅ垯鍖归厤锛屾煡璇㈡瘡鏉¤鍒欑殑閫夋嫨鍣紝鍦ㄩ€夋嫨鍓嶅姞涓婂墠缂€銆?//src/scopedcss.js/***淇敼CSS瑙勫垯锛屾坊鍔犲墠缂€*@param{CSSRule}rulecssrules*@param{string}prefixprefixes*/functionscopedStyleRule(rule,prefix){//鑾峰彇CSS瑙勫垯瀵硅薄閫夋嫨鍜屽唴瀹筩onst{selectorText,cssText}=rule//澶勭悊椤跺眰閫夋嫨鍣紝姣斿body,html閮借浆涓簃icro-app[name=xxx]if(/^((html[\s>~,]+body)|(html|body|:root))$/.test(selectorText)){returncssText.replace(/^((html[\s>~,]+body)|(html|body|:root))/,prefix)}elseif(selectorText==='*'){//閫夋嫨鍣?琚浛鎹负micro-app[name=xxx]*returncssText.replace('*',`${prefix}*`)}constbuiltInRootSelectorRE=/(^|\s+)((html[\s>~]+body)|(html|body|:root))(?=[\s>~]+|$)///鍖归厤鏌ヨ閫夋嫨鍣╮eturncssText.replace(/^[\s\S]+{/,(selectors)=>{returnselectors.replace(/(^|,)([^,]+)/g,(all,$1,$2)=>{//濡傛灉鏈夐《灞傞€夋嫨鍣紝闇€瑕佸崟鐙鐞唅f(builtInRootSelectorRE.test($2)){//body[name=xx]|body.xx|body#xx绛夊仛not闇€瑕佽浆鎹eturnall.replace(builtInRootSelectorRE,prefix)}//涓洪€夋嫨鍣ㄦ坊鍔犲墠缂€return`${$1}${prefix}${$2.replace(/^\s*/,'')}`})})}杩欎釜鏍峰紡闅旂鐨勫姛鑳藉熀鏈畬鎴愪簡锛屾帴涓嬫潵鎬庝箞鐢ㄥ憿锛熷湪娓叉煋绔犺妭涓紝鎴戜滑鏈変袱涓鐞嗘秹鍙婂埌style鍏冪礌锛屼竴涓槸html瀛楃涓茶浆涓篋OM缁撴瀯鍚庣殑閫掑綊寰幆锛屽彟涓€涓槸link鍏冪礌杞负style鍏冪礌锛屾墍浠ラ渶瑕佽皟鐢ㄨ繖涓や釜鍦版柟鐨剆copedCSS鏂规硶锛屽苟灏嗘牱寮忓厓绱犱綔涓哄弬鏁颁紶鍏ャ€?//src/source.js/***閫掑綊澶勭悊姣忎釜瀛愬厓绱?@paramparent鐖跺厓绱?@paramapp搴旂敤瀹炰緥*/functionextractSourceDom(parent,app){...for(constdomofchildren){if(dominstanceofHTMLLinkElement){...}elseif(dominstanceofHTMLStyleElement){//寮哄埗鏍峰紡闅旂+scopedCSS(dom,app.name)}elseif(dominstanceofHTMLScriptElement){...}}}/***鑾峰彇閾炬帴杩滅▼璧勬簮*@paramapp搴旂敤瀹炰緥*@parammicroAppHeadmicro-app-head*@paramhtmlDomhtmlDOM缁撴瀯*/exportfunctionfetchLinksFromHtml(app,microAppHead,htmlDom){...Promise.all(fetchLinkPromise).then((res)=>{for(leti=0;i
