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
860
10分で理解する HTML Modules
takanorip
November 19, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
早わかり W3C Community Group
takanorip
0
270
Ubieとアクセシビリティのこれからを考える
takanorip
0
240
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.7k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
180
メンタルヘルスチューニング
takanorip
0
260
Other Decks in Technology
See All in Technology
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
3.6k
.NET Profiler in 2024.
kkamegawa
2
970
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
110
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
190
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
510
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
710
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
260
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.2k
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
390
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
150
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
18k
Featured
See All Featured
Scaling GitHub
holman
457
140k
For a Future-Friendly Web
brad_frost
172
9k
Automating Front-end Workflow
addyosmani
1357
200k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
7
1.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Six Lessons from altMBA
skipperchong
22
3k
Docker and Python
trallard
35
2.7k
Practical Orchestrator
shlominoach
183
9.7k
The Language of Interfaces
destraynor
151
23k
Building Your Own Lightsaber
phodgson
100
5.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
A Tale of Four Properties
chriscoyier
152
22k
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!