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
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
90
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
750
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
410
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
ゆもつよがこの30年間自ら経験してきたQA、テストの歴史と未来
ymty
2
360
AWSエンジニアに捧ぐLangChainの歩き方
tsukuboshi
0
250
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
0
400
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
130
DeepSeek on AWS
hariby
1
180
Grafanaのvariables機能について
tiina
0
200
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.4k
デザインから逆算して難易度を見積もるための観点
fumiyasac0921
0
100
talk_about_wasmwasi
junkishigaki
0
100
[2025クラウドガバナンスはこう変わる!マルチアカウント運用のre:Invent最新情報と活用例] re:Invent 2024 から見る AWS マルチアカウントガバナンスのこれまでとこれから
0nihajim
0
110
extensionとschema
yahonda
1
150
[TechNight #86] Oracle GoldenGate - 23ai 最新情報&プロジェクトからの学び
oracle4engineer
PRO
1
200
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Embracing the Ebb and Flow
colly
84
4.5k
Automating Front-end Workflow
addyosmani
1367
200k
It's Worth the Effort
3n
184
28k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Building an army of robots
kneath
302
45k
4 Signs Your Business is Dying
shpigford
182
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
990
A Philosophy of Restraint
colly
203
16k
Documentation Writing (for coders)
carmenintech
67
4.6k
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!