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
Bulletproof Design System with TypeScript
takanorip
6
3k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
130
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
850
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.2k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.9k
早わかり W3C Community Group
takanorip
0
480
Ubieとアクセシビリティのこれからを考える
takanorip
0
450
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Astroで始める爆速個人サイト開発
takanorip
15
11k
Other Decks in Technology
See All in Technology
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
Digitization部 紹介資料
sansan33
PRO
1
3.8k
Java 30周年記念! Javaの30年をふりかえる
skrb
2
1.5k
技術書典18結果報告
mutsumix
2
180
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
100
AIに実況させる / AI Streamer
motemen
3
1.4k
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
GoogleのAI Agent
shukob
0
140
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
290
大規模PaaSにおける監視基盤の構築と効率化の道のり
lycorptech_jp
PRO
0
180
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.3k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making Projects Easy
brettharned
116
6.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
Bash Introduction
62gerente
614
210k
KATA
mclloyd
29
14k
Producing Creativity
orderedlist
PRO
346
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
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!