自定義標簽的編碼

chaosx110 發(fā)布于2019-08-02 14:25 / 3019人閱讀

摘要：，，優(yōu)化樣式插入自定義標簽官方示例思考自定義標簽的使用減少了我們頻繁編寫一堆冗余深層嵌套的代碼，提高了速率。

customElements.define

在MDN官方文檔中，如果你想要使用自定義標簽，可以使用customElement類中define方法（IE7以下瀏覽器不支持），
使用：customElements.define("myselfTagName", myselfClass, extendsObj);
參數(shù)：

myselfTagName: 自定義標簽名
myselfClass: 自定義標簽的類對象，（主要功能在這里實現(xiàn)，一般在自定義標簽綁定變量、事件、指令或者是渲染條件）
extendsObj: 內(nèi)置并繼承的元素（包裹著自定義標簽的對象，一般不使用，畢竟誰會閑的無聊把基本標簽封裝成自定義標簽然后填充一堆屬性，語義化也說不通啊）

attachShadow

官方文檔對于shadow DOM解釋很模糊，簡單的說就是DOM的"一體雙魂"，擁有同樣的函數(shù)和方法，但是Shadow DOM比被附加DOM更多的功能，前者具有獨自的作用域，并且與外界DOM分隔。（這個作用就是shadow DOM的核心功能，它可以使你編寫的DOM與css與其他區(qū)域互不影響，相當于vue中css樣式的作用）；
shadow DOM彌補了customElements缺少隔離作用域（DOM和css作用域）的缺陷。

shadom DOM Root的創(chuàng)建方法： this.attachShadow({mode: "open"});

this: shadom DOM對象
mode: 開啟js調(diào)用shadow DOM

代碼示范

coding.... 莫道征途路漫漫



  
    
    Pop-up info box — web components
  
  
    Pop-up info widget - web components

    
      
        Enter your CVC

官方示例
MDN CODE

思考

自定義標簽的使用減少了我們頻繁編寫一堆冗余、深層嵌套的代碼，提高了速率。然而，如果我們看頁面源碼會發(fā)現(xiàn)customElements.define不會消除自定義標簽，自定義標簽如果綁定了大量的數(shù)據(jù)、事件、敏感信息，頁面上又完全顯示出來，這就增加前端頁面的不安全性。如何保證開發(fā)者即使用自定義標簽又不會編譯自定義標簽從而導(dǎo)致DOM的過度掛載和數(shù)據(jù)的泄漏（不建議remove自定義標簽，頻繁操作DOM太消耗內(nèi)存了），值得思考...