When the 1st year of Web Components era come true

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

• https://speakerdeck.com/jxck/web-components-first-year-v3

“Web Components元年 v4” - 2023年 https://www.docswell.com/s/jxck/5246NN-1st-year-of-webcomponents-v4 araya - araya.dev

• https://www.docswell.com/s/jxck/5246NN-1st-year-of-webcomponents-v4

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

• https://github.com/HTTPArchive/almanac.httparchive.org/blob/main/sql/2022/javascript/web_components_pct.sql

何が足りなかったのか 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

• https://caniuse.com/declarative-shadow-dom

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だが実装なし

• https://github.com/lit/lit/tree/main/packages/labs/router
• https://github.com/WICG/navigation-api
• https://webkit.org/standards-positions/#:~:text=#34-,Navigation API,-support

Packaging araya - araya.dev

webbundle リソース群を.wbnファイルにbundleして.wbnごとサブリソースとして読み込み可能にしようという試み 2019~2021年頃にGoogleが中心となって仕様策定実装が進められていた が、WG の更新が2年以上全く無く、事実上なくなった技術 araya - araya.dev

• https://github.com/WICG/webpackage?tab=readme-ov-file

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

• https://github.com/tc39/proposal-import-attributes
• https://groups.google.com/u/1/a/chromium.org/g/blink-dev/c/at-bKcdakOo/m/Q_0vm6UBAQAJ
• https://webkit.org/blog/14787/webkit-features-in-safari-17-2/#:~:text=JavaScript-,Import attributes,-Safari 17.2 adds

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

• https://speakerdeck.com/takanorip/10fen-deli-jie-suru-html-modules
• https://zenn.dev/uhyo/books/ruined-web-standards/viewer/html-imports
• https://speakerdeck.com/jxck/web-components-first-year-v3