Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Building Components

網頁元件(Components)是現代網頁應用程式的基礎。你該如何建構你的網頁元件使得他們經 得起時間的考驗呢?

Custom Elements

Custom elements 使得開發者能夠擴展HTML並且建立屬於他們自己的標籤(tags), 因為 Custom elements 是基於標準的,使他們也可以利用網頁內建的元件模型(com- ponent model),帶來的好處是可以讓更多模組化的程式碼可以重複應用在不同的情 況。

更多內容

Shadow DOM

Shadow DOM 是一個提供元件樣式(component style)及標記封裝(markup enc- apsulation)的網頁標準。他是網頁元件中相當重要的一員,確保了網頁元件能夠 正常運行,即使已經有其他 CSS 或 Javascript 執行在頁面上。

更多內容

最好的實作方法

因為 custom elements 和 shadow DOM 屬於低層級的語法,在不同的環境下要完美 的整合利用它們並不是那麼容易,所以你能做的就是盡量熟悉這些APIs,這裡有一 些最好的實作方法來確保你的元件能在不同環境下運作正常。

更多內容

範例

HowTo-Components 是一些元素的集合,它們展示了一些利用 Custom Element 和 Shadow DOM 的優秀的實作方法。但這些實作並不適合用在正式上線的服務,這些 實作方法是用來幫助你將這兩種技巧利用在實際的實作上的教學參考。

更多內容