讓我們也把 Web Component 頁面加上一點自動化測試吧!(/≧▽≦)/ 第一步老樣子就是來新增測試檔案。◝( •ω• )◟ e2e\web-compo...
在社群分享酷酷的元件時,有人問到「元件有沒有不需要依賴 Vue 的版本?」 當時沒有,現在有了!(≧∇≦)ノ 甚麼是 Web Component Web Com...
WebComponent 的微前端溝通 WebComponent 不只可以脫離框架建立組件,還可以做多種形式的溝通。 Attribute WebComponen...
使用 WebComponent 建立微前端 在使用微前端時,Web Component 常常被提及,他們雖然不是綁定的,但要徹底解耦脫鉤,它是很好用的手段。 建...
常見的微前端解決方案 要實施微前端有很多解決方案,目前有幾種主流的方法大致上會有幾種。 以 Application 層級來說 xhr/fetch javascr...
這篇文章會以我知道的能箱使用的組件庫列出來,再加一點點心得 Material components web 這個函式庫是google利用LitElement這個...
Github, Over Engineering 搜尋引擎會透過用戶指定 <title> ,以鐵人賽文章來說就是文章標題,用來產生搜尋結果的標題。...
這幾天在找網路上的web component相關的庫,才發現自己之前的很多想法都是有問題的。想到我之前在專案中寫的東西,以及本次鐵人賽的部分文章。這下就算鐵人賽...
Github, Over Engineering 版型設計 這邊的設計確實讓人頭痛,作為搜尋引擎,你無法肯定用戶送出搜尋之後,回傳的資料集大小。假設有大量的資料...
抱歉,這篇文章寫的錯誤百出,請各位無視這篇文章,我再找時間更新。 在使用web component建構組件庫的時侯,有一個很常見的問題,那就是web compo...
Github, Over Engineering 設計 輸入欄位是我第一個設計撞牆的部分,光是其中的一個小部件就有很多眉角。 其中也沒有絕對正確的答案,很多都有...
先說聲抱歉,本篇和下一篇都是以實做"VanillaJS"版本的web component組件庫為前提。大部分的web component編輯...
Github, Over Engineering 向 Google 取經 要能設計出實用性至上的搜尋結果,我們先做一些 Research。 既然要設計搜尋引擎,...
Github, Over Engineering 隨著作為開發者的時間年復一年的過去,我最終認識到 Design System 的重要性,它不僅僅只是為了 設計...
還在修改程式碼,今天也會晚一點放上關鍵的程式碼。還有,明天一定放上github給連結... 目標 把昨天的virtualized list組件加入infinit...
到上一篇為止都是以針對小區域來使用web component,我想這也是大多數可能使用web component技術的人的需求。畢竟,現在前端框架很流行(不限於...
web component是組件,好處之一就是能封裝功能,除了封裝UI之外,封裝Web api也是目標之一。本篇和下一篇文章會以IntersectionObse...
select元素是一個很常出現、很常使用也很難客製化的元素。所以我第一篇的實做會選擇select來客製化。為了能更好的複用組件,我會分成以下數個部分:顯示資料用...
上篇文章算是正篇的最後一篇文。從這篇文章開始,會以實做web component的角度出發,從小規模使用,到建立組件庫。 推薦的最佳實踐方式 如果各位之前只有看...
因為時間不足,有些部分有少圖片。但考慮到我的進度,可能要完賽後慢慢補上了。 微前端 說實話,我對這個應用沒有很在行。不僅因為微前端本身就不像微服務一樣有一個固定...
在不同的程式語言中使用web component 在PHP、Ruby on Rails這些可以生成網頁的程式語言中,生成網頁這件事簡單來說就是生成html、CS...
從本篇開始,會介紹一些web component的應用,但因為小弟我除了一些小小的side project之外,只有在工作上少量的用了一點web compone...
因為vue在設計時有參考react,所以在使用web component和被web component使用時的方法大同小異。這篇文章 Vue 雖說Vue的語法在...
因為小弟我對angularJS不熟,Vue和React倒是還算上手。 React 身為前端生態中最靈活的框架(X)函式庫(O),react 一直以來提供的都是一...
小弟我查的資料不多,對於未來web component可能會出現的新技術只有查到Declarative Shadow DOM。 SSR使用web compone...
今天在找資料的時候才知道,原來還有::part()和::theme()可以用在shadow DOM的CSS設定,但今天來不及修改上一篇文章了,明天才有時間修改。...
今天要寫文章時才注意到,原來昨天的文章有少一段,今天補回來。 直接存取Shadow DOM內部節點的方法 雖然shadow DOM內部的節點不會出現在外部的DO...
因為Shadow DOM把內部的DOM和外部的DOM分開了。所以CSS選擇器沒辦法從外部正常的使用在Shadow DOM的內部節點上。也因此,CSS的使用一直以...
監聽事件 因為web component是使用custom element技術建構而成。web component內部也能使用addEventListener方...
我曾經看過某一篇文章是這樣說明的。如果說custom element是web component的骨架,那shadow DOM就是web component的靈...