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
880
10分で理解する HTML Modules
takanorip
November 19, 2020
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
790
早わかり W3C Community Group
takanorip
0
280
Ubieとアクセシビリティのこれからを考える
takanorip
0
250
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.1k
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
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
570
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.7k
テストコードを書きながらCompose Multiplatformを乗りこなす
subroh0508
0
150
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
140
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
190
Taking Flight with Tailwind CSS
opdavies
0
4.3k
使われないものを作るな!出口から作るデータ分析基盤 / Data Platform Development Starting from the User Needs
amaotone
16
4.8k
ハードウェアを動かすTypeScriptの世界
9wick
3
1.2k
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
790
TiDBにおけるテーブル設計と最適化の事例
cygames
0
810
SWC Transformerから見るTypeScript関数記述ベストプラクティス
fujiyamaorange
1
180
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
380
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
RailsConf 2023
tenderlove
9
590
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Code Review Best Practice
trishagee
56
15k
Embracing the Ebb and Flow
colly
80
4.2k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
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!