鍒濊瘑html5鎻愪緵鐨勮棰戠粍浠堕噰鐢ㄤ簡ShadowDOM鎶€鏈€係hadowDOM鎶€鏈槸WebComponents鐨勬牳蹇冨浠朵箣涓€锛岃繕鏈塱nput鍜宻elect锛屽叿浣撲粈涔堟槸ShadowDOM涓嬮潰浼氳瑙ｃ€傚疄璺典互涓氬姟涓轰富锛屽厛鏉ョ湅涓€寮犺鍗曞崱鐗囩殑鍙鍖栫锛氫娇鐢╓ebComponents瀹炵幇锛屼唬鐮佸涓嬶細杩欓噷娑夊強鍒癢ebComponentsTemplate鐨勪笁涓妧鏈浠讹細浣跨敤Template鐢熸垚DOM锛汼hadowDOM锛氫娇鐢⊿hadowDOM鏉ラ殧绂籆SS鏍峰紡锛汣ustomElements锛氫娇鐢–ustomElements鏉ヨ嚜瀹氫箟鍏冪礌锛岀户鎵胯嚜HTMLElement锛孒TMLElement鏄疍OMAPI涓殑涓€涓被锛岀户鎵胯繖涓被浼氭湁html鐨勯€氱敤灞炴€у拰API锛屼娇鐢–ustomElements鏉ヨ嚜瀹氫箟鍏冪礌锛汿emplate鍜孋ustomElements閮芥瘮杈冨鏄撶悊瑙ｏ紝浠€涔堟槸ShadowDOM锛熶綘鍙互绠€鍗曠殑鐞嗚В涓篠hadowDOM鏄竴涓嫭绔嬬殑娌欑锛屼笉骞叉壈鍏朵粬DOM鍏冪礌锛岃嚜鐒跺彲浠ュ仛鍒癈SS鏍峰紡闅旂锛佺被浼间簬Vue涓甫Scoped鐨勬牱寮忔爣绛撅紝涓嶄細骞叉壈鍏朵粬鏍囩鏍峰紡銆傛垜浠湅涓€涓嬫瘮杈冨儚鐨勭粍浠朵唬鐮侊細缁勪欢褰撳墠鍐呭纭紪鐮侊紝濡備綍鍔ㄦ€佺敓鎴怐OM锛熸垜浠户缁線涓嬬湅锛氱瓟妗堟槸鍒╃敤WebComponents缁勪欢鐨勭敓鍛藉懆鏈燂紝鍏朵腑connectedCallback鏄痙om鑺傜偣鐨勭涓€娆℃寕杞借皟鐢紝鍙細璋冪敤涓€娆★紝杩欓噷鍙互鑾峰彇鍒颁粠澶栭儴銆傚睘鎬у彉鍖栦細璋冪敤attributeChangedCallback锛岃繖閲屽彲浠ュ仛dom鏇存柊鐩稿叧鐨勪簨鎯咃紝杩欓噷涓嶅睍寮€锛屽ぇ瀹惰嚜琛屾懜绱€俤om鍙互鍔ㄦ€佺敓鎴愶紝鐐瑰嚮浜嬩欢鎬庝箞鐜╋紵鍏跺疄鍜屼綘骞虫椂鍐橵ue缁勪欢鍜孯eact缁勪欢鏄竴鏍风殑銆傚湪Vue涓槸@click锛屽湪React涓槸onClick銆傚叿浣撲緥瀛愬彲浠ュ弬鑰冧笅鍥撅細濂戒簡锛岃繖閲屽厛璇翠竴涓嬪熀纭€鐭ヨ瘑鐐广€傝繖灏辨槸Web缁勪欢锛佺患涓婃墍杩帮紝WebComponents鍏锋湁浠ヤ笅鐗圭偣锛氬簲鐢ㄥ満鏅瘮杈冧赴瀵岋細缁勪欢搴撶ず渚嬶細Tarov3鐗堟湰鏄浗鍐呯幇鏈夌殑WCs瀹炶返銆備篃鍙互杩愯鍦╓eb涓婄殑灏忕▼搴忎笂锛岃繖鑷劧鏄湁WebComponents鏀寔鐨勩€傚湪灏忕▼搴忎笂杩愯鐨勫彲琛屾柟妗堬紝璇峰弬鑰僒aro3.x銆傚熀鏈師鐞嗘槸Taroruntime鎻愪緵浜嗕竴濂楁ā鎷烡OM&BOM鐨凙PI锛孯eact&Vue鏈€缁堣皟鐢ㄧ殑API浼氭槧灏勫埌taroruntime妯℃嫙鐨勮繖缁凙PI锛岀劧鍚嶵aroruntime鍦ㄦā鎷熺殑閲岄潰鍒涘缓寰俊灏忕▼搴忕浉鍏崇粍浠跺拰API鐨凙PI璋冪敤銆傚井鍓嶇寰墠绔殑鍑犱釜鍩烘湰瑕佺礌锛氭妧鏈爤鏃犲叧銆佸簲鐢ㄩ殧绂汇€佺嫭绔嬪紑鍙戙€傜洰鍓峎ebComponents閮芥槸鍏煎鐨勶紝鐞嗚涓婄敤WebComponents鍋氬井鍓嶇涔熸槸鍙鐨勩€傚仛鐐逛粈涔堟棦鐒舵垜浠煡閬撳帟鎵€鏄姝ゆ锛岄偅涔堟垜浠彲浠ュ埄鐢ㄥ畠浠负鎴戜滑鐨勪笟鍔″仛浜涗粈涔堝憿锛燄煃夝煃夝煃変竴涓皬鏁呬簨锛氫節鏈堝垵锛屾垜浠洟闃熸鍦ㄥ拰鍏朵粬鍥㈤槦涓€璧锋惌寤篤ue缁勪欢搴撱€傚綋鏃舵垜浠殑浜у搧缁忕悊鎻愬嚭閲嶆瀯璁㈠崟锛屼細娑夊強鍒癛eact鍜孷ue杩欎袱涓妧鏈爤鐨勫涓」鐩€?鍥犳锛屾垜浠紑濮嬪鎵句竴濂楄兘澶熻法鎶€鏈爤鐨勭粍浠跺寲瑙ｅ喅鏂规銆備節鏈堜唤锛屾垜浠皬缁勫湪鏋勫缓Vue2.x缁勪欢搴撶殑鍚屾椂锛屼篃鍦ㄦ帰绱㈣法鎶€鏈粍浠剁殑鍙兘鎬с€傜粡杩囦笉鏂帰绱紝鎴戜滑鍒╃敤涓氬姟鍙戝睍鐨勭紦鍐叉椂闂达紝娌夋穩浜嗕竴濂楀熀浜嶹ebComponents鎶€鏈殑璺ㄦ妧鏈爤缁勪欢搴擄紒涓嬮潰缁欏ぇ瀹朵粙缁嶄竴涓嬫垜浠殑浣滃搧澶稿厠銆傛埅鑷崇洰鍓嶏紝Quark宸茬粡鑳藉鎵垮彈40w+鐨勫厜浼忛」鐩紝鐩戞祴鏁版嵁鏄剧ず杩愯鑹ソ銆傘€愪綋绉皬銆戞瘮鍏夎繕杞伙紝澶稿厠cdn鎬诲寘澶у皬20k锛併€愯法鎶€鏈爤銆戞敮鎸乂ue銆丷eact銆丄ngular绛夋鏋?鏃犳鏋躲€愰珮璐ㄩ噺銆?9+浼樿川缁勪欢銆愭寜闇€鍔犺浇銆戞敮鎸佹寜闇€寮曠敤銆愬畬鏁存枃妗ｃ€戣缁嗘枃妗ｅ拰绀轰緥銆愬崟鏈烘祴璇曘€戝崟鍏冩祴璇曡鐩栫巼銆怲S銆戞敮鎸乀ypeScript銆怱SR銆戞敮鎸佹湇鍔＄娓叉煋銆愪富棰樸€戞敮鎸佽嚜瀹氫箟涓婚锛堟湰鏂囦綔鑰咃細璧靛瓨锛夐槄璇诲搱鍟扮鎶€鏇村鍓嶇骞茶揣鍚堥泦|鍚庣|鎵嬫満|绠楁硶|椤圭洰绠＄悊鍝堝暟鎶€鏈洟闃熷嚭鍝侊紝鏈粡璁稿彲锛屼笉寰楀晢涓氳浆杞芥垨浣跨敤銆傚闈炲晢涓氱洰鐨勮浆杞芥垨浣跨敤鏈枃鍐呭锛岃娉ㄦ槑鈥滃唴瀹硅浆杞借嚜浣犲ソ鎶€鏈洟闃熲€濄€?/p>
