Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
10分で理解する HTML Modules
takanorip
November 19, 2020
Technology
1
590
10分で理解する HTML Modules
takanorip
November 19, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
Astroで始める爆速個人サイト開発
takanorip
12
8.2k
後悔しないデザインシステムの始め方
takanorip
4
2.3k
デザインシステム運用とOKRの良い関係
takanorip
0
960
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
39
メンタルヘルスチューニング
takanorip
0
110
認知科学のススメ
takanorip
4
3.6k
ソフトウェアエンジニアの教養を養う本
takanorip
1
17k
共創するためのデザイン批評
takanorip
7
3.3k
Figmaプラグイン 開発のすゝめ
takanorip
0
250
Other Decks in Technology
See All in Technology
アジャイルな組織改善〜手法とマインドセット〜
ishige
7
5.3k
Akiba-dot-SaaS-ExtraHop
sakaitakeshi
1
100
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
160
マネーフォワードクラウドを支える事業者基盤
machisuke
0
160
スタメンのLeSSの導入と 事業部全体を巻き込んだ アウトカム文化への道のり
uuushiro
2
3k
キャリアを充実させる『カギ』に!PR TIMES CTO金子達哉から学ぶアウトプット術 / output_method
catatsuy
0
200
David Bernstein : Five Development Practices for Building Software with Scrum
kawaguti
PRO
5
6.8k
【NGK2023S】 ノードエディタ形式の画像処理ツール「Image-Processing-Node-Editor」
kazuhitotakahashi
0
180
「私考える人、あなた作業する人」を越えて、プロダクトマネジメントがあたりまえになるチームを明日から実現していく方法/product management rsgt2023
moriyuya
60
38k
Airdrop for Open Source Projects
epicsdao
0
210
CEXやDEXに依存しないブロックチェーン取引について考える
sbtechnight
0
310
ERC3525 Semi-Fungible token
sbtechnight
0
320
Featured
See All Featured
Making Projects Easy
brettharned
102
4.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Designing for Performance
lara
601
65k
Building an army of robots
kneath
302
40k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Side Projects
sachag
451
37k
Unsuck your backbone
ammeep
659
56k
A better future with KSS
kneath
230
16k
Navigating Team Friction
lara
176
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
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!