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
1.1k
10分で理解する HTML Modules
takanorip
November 19, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
90
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
750
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
410
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
GraphRAG: What I Thought I Knew (But Didn’t)
sashimimochi
1
250
BLEAでAWSアカウントのセキュリティレベルを向上させよう
koheiyoshikawa
0
160
CloudWatch Container Insightsを使ったAmazon ECSのリソース監視
umekou
1
130
Ask! NIKKEI RAG検索技術の深層
hotchpotch
11
1.9k
もし今からGraphQLを採用するなら
kazukihayase
9
4.4k
CNAPPから考えるAWSガバナンスの実践と最適化
nrinetcom
PRO
1
380
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
1
340
talk_about_wasmwasi
junkishigaki
0
100
さいきょうのアーキテクチャを生み出すセンスメイキング
jgeem
0
350
Amazon Location Serviceを使ってラーメンマップを作る
ryder472
2
170
EDRからERM: PFN-SIRTが関わるセキュリティとリスクへの取り組み
pfn
PRO
0
130
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
410
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Speed Design
sergeychernyshev
25
760
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
990
How to Ace a Technical Interview
jacobian
276
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
128
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
A Philosophy of Restraint
colly
203
16k
BBQ
matthewcrist
86
9.4k
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!