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.2k
10分で理解する HTML Modules
takanorip
November 19, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
500
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
940
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
Findy Team+のSOC2取得までの道のり
rvirus0817
0
340
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
Green Tea Garbage Collector の今
zchee
PRO
2
390
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
0
180
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
20250929_QaaS_vol20
mura_shin
0
110
BirdCLEF+2025 Noir 5位解法紹介
myso
0
190
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
How to achieve interoperable digital identity across Asian countries
fujie
0
120
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
210
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
150
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Site-Speed That Sticks
csswizardry
11
880
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Visualization
eitanlees
148
16k
Facilitating Awesome Meetings
lara
56
6.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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!