iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

web component - 次世代網頁技術的重要拼圖 系列

本系列主要介紹web component,主要分成以下主題:web component的優缺點,如何寫出web component,web conponent 的應用。

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

前言

因為這是小弟我第一次參加鐵人賽、第一次發文再加上不小心在23點後按下發文鍵,這篇文章會比較亂,明後天再來修改(如果有機會的話?) web component並不...

2022-09-15 ‧ 由 BugofBook 分享
DAY 2

[Day1] 什麽是 Web component

模組是一個好東西,它可以讓程式設計師能夠順利的DRY,以避免可能的WET,也可以省下大把的時間。但這件事在網頁上並不是容易的事。 曾經,網頁分成HTML,CSS...

2022-09-16 ‧ 由 BugofBook 分享
DAY 3

[Day2] Web component 解決和沒解決的問題

web component解決了那些問題 HTML既有元素的問題 如果各位曾經有上過網頁基礎的課程或看過介紹網頁基礎的書籍,或多或少都會有這個概念:HTML元素...

2022-09-17 ‧ 由 BugofBook 分享
DAY 4

[Day3] Custom element的建立和使用

前端三大框架小弟我除了Angular之外都算熟,之後的文章可能會帶入點React和Vue的部分,畢竟現在網頁工程師或多或少都碰過三大框架之一。 建構custom...

2022-09-18 ‧ 由 BugofBook 分享
DAY 5

[Day4] Custom element - 像HTML Element一樣使用

不知道各位有沒有注意到,昨天的文章。在HTML中custom element看起來就像其他的html element一樣。是的,只看element本身,普通的h...

2022-09-19 ‧ 由 BugofBook 分享
DAY 6

[Day5] Custom element - life cycle(生命周期)

如果有使用過react或是Vue框架建構component的使用者都知道,不論是為了綁上或解綁事件,或是為了最大限度的加快render 整個Virtual DO...

2022-09-20 ‧ 由 BugofBook 分享
DAY 7

[Day6] template and slot

如果各位有在使用Vue,看到這二個HTML Element會有種很熟悉的感覺。你沒看錯,Vue和web component在這裡也有許多共同之處。 HTML i...

2022-09-21 ‧ 由 BugofBook 分享
DAY 8

[Day7] shadow DOM 的使用和問題

我曾經看過某一篇文章是這樣說明的。如果說custom element是web component的骨架,那shadow DOM就是web component的靈...

2022-09-22 ‧ 由 BugofBook 分享
DAY 9

[Day8] web component的使用技巧-shadow DOM存取其一

鐵人賽開始也快過了三分之一了,回頭看了自己的文章,寫的還真是亂。這個星期六日有時間的話會把前面的文章再整理一下。 從這篇文章開始,會著重在解決前一篇文章所提到的...

2022-09-23 ‧ 由 BugofBook 分享
DAY 10

[Day9] web component的使用技巧-shadow DOM存取其二

今天要寫文章時才注意到,原來昨天的文章有少一段,今天補回來。 直接存取Shadow DOM內部節點的方法 雖然shadow DOM內部的節點不會出現在外部的DO...

2022-09-24 ‧ 由 BugofBook 分享