iT邦幫忙

webcomponent相關文章
共有 58 則文章
鐵人賽 Modern Web DAY 29

技術 D29 - Web Component 也來點測試

讓我們也把 Web Component 頁面加上一點自動化測試吧!(/≧▽≦)/ 第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\web-compo...

鐵人賽 Modern Web DAY 28

技術 D28 - 來點 Web Component

在社群分享酷酷的元件時,有人問到「元件有沒有不需要依賴 Vue 的版本?」 當時沒有,現在有了!(≧∇≦)ノ 甚麼是 Web Component Web Com...

鐵人賽 JavaScript DAY 13

技術 (十三) WebComponent 的微前端溝通

WebComponent 的微前端溝通 WebComponent 不只可以脫離框架建立組件,還可以做多種形式的溝通。 Attribute WebComponen...

鐵人賽 JavaScript DAY 12

技術 (十二) 使用 WebComponent 建立微前端

使用 WebComponent 建立微前端 在使用微前端時,Web Component 常常被提及,他們雖然不是綁定的,但要徹底解耦脫鉤,它是很好用的手段。 建...

鐵人賽 JavaScript DAY 5

技術 (五) 常見的微前端解決方案

常見的微前端解決方案 要實施微前端有很多解決方案,目前有幾種主流的方法大致上會有幾種。 以 Application 層級來說 xhr/fetch javascr...

鐵人賽 Modern Web DAY 29

技術 web component 組件庫-介紹能直接使用的函式庫

這篇文章會以我知道的能箱使用的組件庫列出來,再加一點點心得 Material components web 這個函式庫是google利用LitElement這個...

鐵人賽 Software Development DAY 28

技術 [Day 28] 如何設計好的 Title - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 搜尋引擎會透過用戶指定 <title> ,以鐵人賽文章來說就是文章標題,用來產生搜尋結果的標題。...

鐵人賽 Modern Web DAY 28

技術 web component 組件庫實做-介紹造輪子的工具庫

這幾天在找網路上的web component相關的庫,才發現自己之前的很多想法都是有問題的。想到我之前在專案中寫的東西,以及本次鐵人賽的部分文章。這下就算鐵人賽...

鐵人賽 Software Development DAY 27

技術 [Day 27] 如何設計搜尋結果清單 - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 版型設計 這邊的設計確實讓人頭痛,作為搜尋引擎,你無法肯定用戶送出搜尋之後,回傳的資料集大小。假設有大量的資料...

鐵人賽 Modern Web DAY 27

技術 web component 組件庫實做建議-大型複合組件

抱歉,這篇文章寫的錯誤百出,請各位無視這篇文章,我再找時間更新。 在使用web component建構組件庫的時侯,有一個很常見的問題,那就是web compo...

鐵人賽 Software Development DAY 26

技術 [Day 26] 如何設計搜尋欄位 - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 設計 輸入欄位是我第一個設計撞牆的部分,光是其中的一個小部件就有很多眉角。 其中也沒有絕對正確的答案,很多都有...

鐵人賽 Modern Web DAY 26

技術 web component 組件庫實做建議-CSS篇

先說聲抱歉,本篇和下一篇都是以實做"VanillaJS"版本的web component組件庫為前提。大部分的web component編輯...

鐵人賽 Software Development DAY 25

技術 [Day 25] 如何設計搜尋結果 - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 向 Google 取經 要能設計出實用性至上的搜尋結果,我們先做一些 Research。 既然要設計搜尋引擎,...

鐵人賽 Software Development DAY 24

技術 [Day 24] 為什麼需要 design system - 實用至上主義前端 |【搜尋引擎製作錄】

Github, Over Engineering 隨著作為開發者的時間年復一年的過去,我最終認識到 Design System 的重要性,它不僅僅只是為了 設計...

鐵人賽 Modern Web DAY 24

技術 web component 的實做- infinite-scroller

還在修改程式碼,今天也會晚一點放上關鍵的程式碼。還有,明天一定放上github給連結... 目標 把昨天的virtualized list組件加入infinit...

鐵人賽 Modern Web DAY 25

技術 web component 的實做- 實做組件庫或大量使用web component的建議

到上一篇為止都是以針對小區域來使用web component,我想這也是大多數可能使用web component技術的人的需求。畢竟,現在前端框架很流行(不限於...

鐵人賽 Modern Web DAY 23

技術 web component 的實做- virtualized list

web component是組件,好處之一就是能封裝功能,除了封裝UI之外,封裝Web api也是目標之一。本篇和下一篇文章會以IntersectionObse...

鐵人賽 Modern Web DAY 21

技術 web component 的實做- 單項下拉選單組件

select元素是一個很常出現、很常使用也很難客製化的元素。所以我第一篇的實做會選擇select來客製化。為了能更好的複用組件,我會分成以下數個部分:顯示資料用...

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 14

技術 [Day13] web component 的未來技術

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 8

技術 [Day7] shadow DOM 的使用和問題

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