從原生web元件到框架元件原始碼三

快樂的時光都是這麼短暫,轉眼間,web原生元件的知識點已經學完了,這個雖然暫時不一定有用,但是隨著時間的積累,一步乙個腳印的積累,你會有相應的收穫,希望能變得更強,比如兩年前我也會想有現成的東西不用,幹嘛要自己寫呢?但是你確定一直用上層的東西,你的收穫有自己寫快嗎? 在開發的過程過能節約下來的時間,我們可以用這個時間拿來學習,這樣隨著時間的積累我們會變得更強,也會慢慢有更多的時間投入生活,進行正向迴圈

自定義元素然後是普通的html元素,也可以使用css設定樣式

在我們沒有設定shadow dom的元件,進行全域性樣式設定

connectedcallback()

});connectedcallback()

});

this.shadowroot.adoptedstylesheets = [...document.adoptedstylesheets, css];

我們通過import載入css,在這種情況下,它是元件的相對路徑,在載入css內容中並生成乙個物件cssstylesheet,然後通過.adoptedstylesheets匯入css

這種方法直接使用是錯誤的,需要引入外掛程式css-loader,應該要借助webpack ,原生不能直接使用

var(--color,red)
// 第乙個變數不存在,用第二個

全域性設定,穿透到裡面

connectedcallback()

});css 偽類,僅在定義了shadow dom有效

偽類描述

:host

它允許我們設定自定義元素（元件自己的容器）的樣式。

:host(``css)

同上乙個，但前提是它與中定義的選擇器匹配css。

:host-context(``css)

同上，但前提是您有與選擇器匹配的父母css。

constructor() );

}connectedcallback()

});修改最外層的盒子的css

constructor() );

}sendmessage()

connectedcallback()

// 離開頁面刪除事件

disconnectedcallback()

});第二種方法

不用addeventlistener

this.button.onclick=()=>this.sendmessage()
// 離開頁面刪除事件
disconnectedcallback()

第三種方法

神奇的handleevent函式

constructor() );

}handleevent(event)

}connectedcallback()

disconnectedcallback()

});我們發現當我們簡單的放置this瀏覽器會奇特找到.handleevent函式,存在就進行處理,這種方法我們可以通過檢測event.type,我們可以通過這種方法進行集中處理

選擇項值

描述detail

假

包含我們要傳輸的所有資訊的物件。

bubbles

假

指示該事件是否應氣泡在dom「到表面」或沒有。

composed

假

指示傳播是否可以遍歷shadow dom。

cancelable

假

指示是否可以使用取消行為.preventdefault()。

bubbles=true通過冒泡傳遞給父級,event.target拿到dom元素,event.detail拿到建立事件的資料

我們發現預設情況下冒泡是從裡到外1,2,3當我們在最外層新增

box3.addeventlistener("messages", (event) => ,);

我們發現執行的順序為1,4,2,3元件1傳送資料

customelements.define("first-element", class extends htmlelement );
}handleevent(event) ,
bubbles: true,
composed: true // 影子
});this.dispatchevent(messageevent);}}
connectedcallback() 
});

接受傳遞來的資料

customelements.define("second-element", class extends htmlelement );
}handleevent(event) :$`;
}}connectedcallback() 
});

這樣想不想兩個非同步元件之間的通

從原生web元件到框架元件原始碼三

小型php框架強大的小型Web元件框架庫

原生Js彈窗外掛程式 web彈出層元件對話方塊

Spark1 3從建立到提交 4 資源分配原始碼分析

從原生web元件到框架元件原始碼 三

小型php框架 強大的小型Web元件框架 庫

原生Js彈窗外掛程式 web彈出層元件 對話方塊

Spark1 3從建立到提交 4 資源分配原始碼分析

相關推薦

從原生web元件到框架元件原始碼三

小型php框架強大的小型Web元件框架庫

原生Js彈窗外掛程式 web彈出層元件對話方塊