鐵人檔案
從框架回到原生。
了解瀏覽器原生的 Web Component 開發技術，脫離對框架的依賴。
從基礎的三大核心 Custom Elements、Shadow DOM 、HTML Templates，利用 30 天慢慢打造可重用、獨立性高的 Web 元件。
其實 Modal 可以說是我想到最適合拿來說明 slot 這個概念的元件了！在開發公司的應用時，常常大量需要用到彈出視窗，不管是 alert, confirm,...
前面寫了這麼多篇文章，都沒提到關於樣式的設定。今天我們終於要進入樣式了，Web Component 的樣式其實是我在學習過程中時常卡關的部分。因為樣式隔離的關係...
在昨天的文章裡，我們介紹了三種從外部改變 Shadow DOM 樣式的方法。今天要繼續延伸這個主題，來看看另一種改變樣式的技巧。 還記得前兩天學過的 slot（...
經過前幾天學習了 :host、CSS 變數、::part 和 ::slotted 後，今天我們要將這些知識整合起來，建立一個功能完整且具有良好樣式接口的 Mod...
表單元件可以說是環繞在網頁中的各個角落，你在開發上不想遇到他都很困難。舉凡登入畫面、購物車、基本資料又或是你平時在跟 AI 互動的輸入框，這些都是表單元件的其中...
昨天我們已經讓元件能夠與表單產生關聯： 透過 static formAssociated = true 告訴瀏覽器這是一個表單元件。 透過 this._int...
在上一篇，我們已經完成了自訂表單元件 值 的處理。 attribute 與 observedAttributes：讓外部設定可以即時反應到元件。 getter...
今天我們來學點不一樣的吧！ 有鑒於我們隊友的太太是愛通用設計的小魚。讓我在實作表單元件的過程中不禁想到，如果表單元件沒辦法被其他輔助工具正確操作的話，那麼他是否...
開始接觸開發以來，越來越多人會選擇在專案中加入 TypeScript 搭配框架使用（不管是哪一種框架都可以加入 TS），讓變數與函式的型別定義更完善，也可以降低...
前面幾天一直在 index.html 與 input.js 之間切換，一直沒有進入整體專案架構的規劃。今天我們將一起整理整理專案的資料夾與結構，建立更好的開發環...
