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
970
10分で理解する HTML Modules
takanorip
November 19, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
4
620
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
390
Ubieとアクセシビリティのこれからを考える
takanorip
0
370
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.6k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3k
デザインシステム運用とOKRの良い関係
takanorip
0
1.9k
Other Decks in Technology
See All in Technology
AWS CDKで大量のパラメータストアを作りたい
haku__hime
1
120
안드로이드 기술 이력서의 최소 조건
pluu
1
1.2k
JBoss EAPによるクラウドネイティブのススメ
chiroito
0
150
俺とVSCode Python Debugger Extension
sat
PRO
1
150
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
110
Snowflakeでスロークエリ改善に取り組んだ話
tabata0208
0
150
Trusted Types API と Vue.js
lycorptech_jp
PRO
1
120
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
カメラ単体で物体の3次元 座標を扱う方法
kenmatsu4
1
190
エンジニアのドメイン知識獲得コストを低減するアプリケーションデザイン
ryo_nagata_
3
180
生成AIの活用パターンと継続的評価
asei
6
660
最新のAIツールは何を解決しようとしているのか - Python エンジニアが取り組むべき "越境" とは - / Python-Engineer-in-AI-Era
iktakahiro
1
110
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Bash Introduction
62gerente
608
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Embracing the Ebb and Flow
colly
84
4.4k
BBQ
matthewcrist
85
9.2k
Docker and Python
trallard
40
3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Speed Design
sergeychernyshev
23
550
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!