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
470
Bulletproof Design System with TypeScript
takanorip
7
4.1k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
人工衛星のファームウェアをRustで書く理由
koba789
15
8.3k
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
Create Ruby native extension gem with Go
sue445
0
130
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
テストを軸にした生き残り術
kworkdev
PRO
0
210
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
1
160
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
KotlinConf 2025_イベントレポート
sony
1
140
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
How to Ace a Technical Interview
jacobian
279
23k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
The Language of Interfaces
destraynor
161
25k
Documentation Writing (for coders)
carmenintech
74
5k
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!