When the 1st year of Web Components era come true
4.2K Views
January 25, 24
スライド概要
meguro.es 26 https://meguroes.connpass.com/event/305991/ で話した「WebComponents元年はくるのか」の資料
関連スライド
各ページのテキスト
When the 1st year of Web Components era come true? araya - araya.dev 2024-01-25 meguro.es #26 @CyberAgent araya - araya.dev
araya - araya.dev
“Web Components元年” araya - araya.dev
“Web Components元年v3” - 2020年 https://speakerdeck.com/jxck/web-components-first-year-v3 araya - araya.dev
“Web Components元年 v4” - 2023年 https://www.docswell.com/s/jxck/5246NN-1st-year-of-webcomponents-v4 araya - araya.dev
Web Components おさらい araya - araya.dev
What was Web Components? Demo ● 上のブロックは ”Switch Black /RED” ボタンを押すと背景色が赤 /黒で 切り替わる ● 下のブロックは ”Switch Black /Blue” ボタンを押すと背景色が青 /黒で 切り替わる ● クリックするとカウンターを ++する これを1つのcomponentとして実装する araya - araya.dev
simple example index.html template定義 slot content の上書き custom elements の使用 araya - araya.dev
simple example araya - araya.dev
simple example araya - araya.dev
simple example araya - araya.dev
What was Web Components WebComponents = ● Custom Elements によるライフサイクル付き独自 HTML elementの定義 ● ShadowDOMによるDOMとstylesheetsのカプセル化 ● <template>と<slot>による再利用可能なマークアップ 言ってしまえばこれだけ componentをまとめてpackageにするしくみも、 JSXもない DOMの変更はただの DOM API ShadowDOMによりカプセル化された componentはClient JSでしか定義できない araya - araya.dev
で、使われてるの？ arayaがHTTPArchiveで調査した使用率 (desktop) 2021-09 2022-09 2024-01 Custom Elements 2.4% 1.9% 6.4% Shadow DOM 0.4% 0.32% 1.7% <template> 0.022% 0.030% 0.22% query: https://github.com/HTTPArchive/almanac.httparchive.org/blob/main/sql/2022/javascript/web_components_pct.sql を参考 araya - araya.dev
何が足りなかったのか araya - araya.dev
Web Components に何が足りなかったのか - [ ] Server-side rendering - [ ] Client-side router - [ ] Packaging - [ ] Declarative UI araya - araya.dev
Server-side rendering araya - araya.dev
Declarative Shadow DOM (DSD) Shadow Rootのattachをhtmlで書けるようにする仕様 2020~2021年に仕様の策定と Chromeでの実装が進んでいた 2023年末、Firefox 123に実装が入ったことによりモダンブラウザでの実装がようやく揃った https://caniuse.com/declarative-shadow-dom araya - araya.dev
Declarative Shadow DOM (DSD) ShadowRootのattachをhtmlで宣言できる ShadowDOMの中身をhtmlで書けるので SSRと相性がよくなった もちろんこのhtmlを生成するためのなんらかのエンジンは必要 araya - araya.dev
Client-side router araya - araya.dev
Client-side router WebComponentsだけでSPA書くには不可欠 ● Litに乗るなら@lit-labs/routerに期待 ○ ● araya - araya.dev https://github.com/lit/lit/tree/main/packages/labs/router Navigation API ○ SPA時代のために History APIを再設計したもの ○ https://github.com/WICG/navigation-api ○ Chrome: ship済み ○ Firefox: positiveだが実装なし ○ Safari: supportだが実装なし
Packaging araya - araya.dev
webbundle リソース群を.wbnファイルにbundleして.wbnごとサブリソースとして読み込み可能にしようという試み 2019~2021年頃にGoogleが中心となって仕様策定実装が進められていた が、WG の更新が2年以上全く無く、事実上なくなった技術 araya - araya.dev
Import attributes https://github.com/tc39/proposal-import-attributes JavaScriptの世界でESM以外のmoduleをcontent typeの齟齬がなくimportできるようにするための syntax import xxx from "mod" with { type: "json" } Chrome: 2024-01-10 に Intent to Ship Safari: 2023-12-11 に Safari 17.2 にShip araya - araya.dev
Import attributes + HTML modules? HTML modules JSからhtmlをimportできるようにしようという提案。 HTML Importsの後継として2019年頃にWICGで策定が進ん でいた Import attributesが進んだことによりこっちも進んでいく可能性がなくはない araya - araya.dev
Web Components に何が足りなかったのか - [x?] Server-side rendering – DSD - [x?] Client-side router – Navigation API - [ ] Packaging - [x?] Declarative UI – DSD araya - araya.dev
これからのWeb Components ● DSD「お待たせしすぎたかもしれません」 ● アプリ作るなら Lit(期待込み)だが、DecoratorがprimaryなAPIが受け入れられている (く)のか微妙 ● 結局トランスパイルやバンドル挟む時代はアプリ書くうまみが少ない ● Design System の実装としてのユースケースは増えてもいいかも ● moduleとしての配布: import attributesの応用に期待 ● HTTP Archiveでの伸びをみると 2023年が元年だったかもしれないし、 DSDなどによってもっと伸びるかも しれない ○ あるいは、CSSのScopeにより、Custom Elementsとtemplateは使われるけど ShadowDOMはつかわな い、という実装が増えるかも ● araya - araya.dev いつが元年だったか 5年後くらいに答え合わせ
参考/関連資料 ● 10分で理解する HTML Modules - Speaker Deck ○ ● HTML Imports｜Web仕様 廃墟探訪 ○ ● https://zenn.dev/uhyo/books/ruined-web-standards/viewer/html-imports Web Components 元年 v3 / Web Components first year v3 - Speaker Deck ○ araya - araya.dev https://speakerdeck.com/takanorip/10fen-deli-jie-suru-html-modules https://speakerdeck.com/jxck/web-components-first-year-v3