iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

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

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

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

[Day10] web component的使用技巧-事件

監聽事件 因為web component是使用custom element技術建構而成。web component內部也能使用addEventListener方...

2022-09-25 ‧ 由 BugofBook 分享
DAY 12

[Day11] web component 的使用技巧-css

因為Shadow DOM把內部的DOM和外部的DOM分開了。所以CSS選擇器沒辦法從外部正常的使用在Shadow DOM的內部節點上。也因此,CSS的使用一直以...

2022-09-26 ‧ 由 BugofBook 分享
DAY 13

[Day12] web component 的歷史-那些己經廢除或不穩定的部分

今天在找資料的時候才知道,原來還有::part()和::theme()可以用在shadow DOM的CSS設定,但今天來不及修改上一篇文章了,明天才有時間修改。...

2022-09-27 ‧ 由 BugofBook 分享
DAY 14

[Day13] web component 的未來技術

小弟我查的資料不多,對於未來web component可能會出現的新技術只有查到Declarative Shadow DOM。 SSR使用web compone...

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

[Day14] web component 的應用-和框架合作

從本篇開始,會介紹一些web component的應用,但因為小弟我除了一些小小的side project之外,只有在工作上少量的用了一點web compone...

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

[Day15] web component 的應用-和react合作

因為小弟我對angularJS不熟,Vue和React倒是還算上手。 React 身為前端生態中最靈活的框架(X)函式庫(O),react 一直以來提供的都是一...

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

[Day16] web component 的應用-和Vue合作

因為vue在設計時有參考react,所以在使用web component和被web component使用時的方法大同小異。這篇文章 Vue 雖說Vue的語法在...

2022-10-01 ‧ 由 BugofBook 分享
DAY 18

[Day17] web component 的應用-跨程式語言的合作

在不同的程式語言中使用web component 在PHP、Ruby on Rails這些可以生成網頁的程式語言中,生成網頁這件事簡單來說就是生成html、CS...

2022-10-02 ‧ 由 BugofBook 分享
DAY 19

[Day18] web component 的應用-微前端

因為時間不足,有些部分有少圖片。但考慮到我的進度,可能要完賽後慢慢補上了。 微前端 說實話,我對這個應用沒有很在行。不僅因為微前端本身就不像微服務一樣有一個固定...

2022-10-03 ‧ 由 BugofBook 分享
DAY 20

web component 的實做- 推薦的最佳實踐方式和個人心得

上篇文章算是正篇的最後一篇文。從這篇文章開始,會以實做web component的角度出發,從小規模使用,到建立組件庫。 推薦的最佳實踐方式 如果各位之前只有看...

2022-10-04 ‧ 由 BugofBook 分享