Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
10分で理解する HTML Modules
Search
takanorip
November 19, 2020
Technology
1
900
10分で理解する HTML Modules
takanorip
November 19, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.2k
早わかり W3C Community Group
takanorip
0
300
Ubieとアクセシビリティのこれからを考える
takanorip
0
270
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.2k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
190
メンタルヘルスチューニング
takanorip
0
270
Other Decks in Technology
See All in Technology
手を動かさないインシデント対応〜自動化で迅速・正確な運用を目指す〜
jacopen
3
290
入門 電気通信事業者
kurochan
10
4.5k
OCI Functionsについて
dbtec
0
120
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
8
110k
Safie Viewer for iOS の 技術的負債との付き合い方
safie
0
130
データ分析力を高めるSQL研修『SQL Everyone』のご紹介【SQL勉強会 #3】
hikarut
1
180
FFMでJITコンパイラを作ってみた
yasuenag
0
110
リードタイム、コストを最適化しながら 回復性を求めるクラウドネイティブ戦略 #CNDS2024
sgrokym
1
200
EKSと動的プロビショニングEFSを使ったマルチリージョンDR
daitak
0
200
Go1.21から導入された Go Toolchainの仕組みをまるっと解説
yamatoya
12
3k
Gemini in AppSheet_吉積情報株式会社 石見
comucal
PRO
0
2.2k
AWS Control Towerと HashiCorp Terraformでいい感じにマルチアカウント管理をしよう
chazuke4649
0
430
Featured
See All Featured
Six Lessons from altMBA
skipperchong
22
3.1k
The Invisible Customer
myddelton
115
12k
Music & Morning Musume
bryan
42
5.7k
Typedesign – Prime Four
hannesfritz
36
2.2k
A better future with KSS
kneath
231
17k
What's in a price? How to price your products and services
michaelherold
238
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
GitHub's CSS Performance
jonrohan
1025
450k
A designer walks into a library…
pauljervisheath
201
23k
Testing 201, or: Great Expectations
jmmastey
32
6.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
18
2.8k
How GitHub (no longer) Works
holman
305
140k
Transcript
10分で理解する HTML Modules Takanori Oki / 20201119 / 隅田川.js
自己紹介 • Takanori Oki / @takanorip / @takanoripe(Twitter) • UIデザイナー、フロントエンドエンジニア
• Web Platform Study GroupのOrganizer • https://www.youtube.com/channel/UCfToJ- sTOqvBnnuVq3zdZhA • 月1回くらいYouTubeでライブ配信してます • Web標準やブラウザ実装についての話を中心に話してます
HTML Imports
HTML Imports(Abandoned) • CustomElementsを外部からインポートする機能 • Chromeに先行実装されてたが様々な課題があり、開発が停止 • Global object pollution
• Parse blocking with inline script • Independent dependency resolution infrastructures between HTML Imports and ES6 Script Modules • Non-intuitive import pass through
HTML Modules
HTML Modules • https://github.com/WICG/webcomponents/issues/645 • ES Modulesの仕組みに乗っかってHTML、CSS、JSONをJavaScript ファイルの中にインポートしようという仕組み • セキュリティ課題が見つかり開発が進んでいなかったが、TC39で
提案されているImport Assertionsが実装されれば解決されそう • https://github.com/tc39/proposal-import-assertions
Import Assertions
Import Assertions • Import文にインライン構文を追加し、ファイルの情報を補足する • ファイル拡張子とHTTP Content Typeヘッダがミスマッチなことが 多いため、拡張子からモジュールタイプを判断することが難しい
CSS Modules • ES Modulesを拡張して、CSSファイルからCSSStyleSheetをインポート できるようにする仕様 • CSSStyleSheetはadoptedStyleSheetsを介してdocumentまたは shadowRootに追加できる •
https://wicg.github.io/construct-stylesheets/#using- constructed-stylesheets • 最近LitElementでこのCSS Modulesに対応するための変更があった
CSS Modules
まとめ • HTML ModulesはJavaScriptの中でHTMLをモジュールとして 扱うための技術 • CSSやJSONもモジュールとして扱えるようになるかも • CSS in
JSがこのCSS Modulesをベースに作り変えられるかも? • 今後の動向に注目!
Thank you!