Pro Yearly is on sale from $80 to $50! »

10分で理解する HTML Modules

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
November 19, 2020

10分で理解する HTML Modules

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

November 19, 2020
Tweet

Transcript

  1. 10分で理解する HTML Modules Takanori Oki / 20201119 / 隅田川.js

  2. 自己紹介 • Takanori Oki / @takanorip / @takanoripe(Twitter) • UIデザイナー、フロントエンドエンジニア

    • Web Platform Study GroupのOrganizer • https://www.youtube.com/channel/UCfToJ- sTOqvBnnuVq3zdZhA • 月1回くらいYouTubeでライブ配信してます • Web標準やブラウザ実装についての話を中心に話してます
  3. HTML Imports

  4. 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
  5. HTML Modules

  6. 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
  7. Import Assertions

  8. Import Assertions • Import文にインライン構文を追加し、ファイルの情報を補足する • ファイル拡張子とHTTP Content Typeヘッダがミスマッチなことが 多いため、拡張子からモジュールタイプを判断することが難しい

  9. CSS Modules • ES Modulesを拡張して、CSSファイルからCSSStyleSheetをインポート できるようにする仕様 • CSSStyleSheetはadoptedStyleSheetsを介してdocumentまたは shadowRootに追加できる •

    https://wicg.github.io/construct-stylesheets/#using- constructed-stylesheets • 最近LitElementでこのCSS Modulesに対応するための変更があった
  10. CSS Modules

  11. まとめ • HTML ModulesはJavaScriptの中でHTMLをモジュールとして 扱うための技術 • CSSやJSONもモジュールとして扱えるようになるかも • CSS in

    JSがこのCSS Modulesをベースに作り変えられるかも? • 今後の動向に注目!
  12. Thank you!