html_modules_study - connpass

html_modules_studyに参加したのでメモ。

WebComponents Updates - @1000ch

スライド: Web Components Updates

Template-Instantiation.md: @koba04

スライド: Template Instantiation // Speaker Deck

  • HTML Template Instantiation
  • テンプレートであってコンポーネントではない
    • mustache syntax
  • バックグラウンド
    • いろんなフレームワークが独自のテンプレートを定義していた
    • それぞれのテンプレートを組み合わせるのは難しい
  • mustache syntax
    • シンプル
    • 値を代入する所だけはmustache syntax
    • 他はConfigurableにして柔軟性を作る
  • Use Cases 9コ
    • テンプレートからDOM Treeを作れる
    • テンプレートの変数へ代入できる
    • テンプレートの変数は更新できる
    • テンプレートの変数処理には関数を挟むことができる
    • テンプレート -> JavaScriptへ値を渡せる = 双方向なバンディング ィング
    • 属性を更新できる
    • デフォルトの値を指定できる
    • DOMの出し分けに対応する
    • ループ処理
  • Template Parts
    • \{\{value\}\} をPartsと呼ぶ
    • このpartsを更新することでCapitalizeとかの処理を実装できる
    • 前後のNodeや親子のNodeの参照などを持つ
  • Template Partsの中にTemplate Parts
    • InnterTemplatePart
  • Template Process Callback
    • createとupdate時に呼ばれるcallbackを指定できる
    • createCallback
    • processCallback
  • Other libraries
  • 出典
  • FAQ
    • \{\{の記号 は変えられない?

HTML Modules - @tkochi

  • Blinkやってる
  • Layout Tests
  • HTML5
    • progressとかいろんな要素が増えた
    • もっとプリミティブなAPIを定義したほうがいいのではというのがスタート
  • HTML Imports
  • そもそもHTML Importとは
    • コンポーネントの定義を一つにまとめてロードする仕組み
    • <link rel=import href=my-button.html>
    • HTMLLinkElement.import (readonly)
    • 後は使うだけ
  • 共通のImport
    • common.htmlを2回importした時
    • 1度目は実行される、2度目は実行されない
    • import
  • HTML Importのメリット
    • <script>が実行できる
    • 依存関係を解決しながらロードしてくれる
      • ES moduleはすべての依存をリンクしてから実行するモデル
      • HTML Importsならパイプライン処理できる
    • テンプレート、スタイル、スクリプトを1つのファイルにかける
      • Vueの.vueとかと同じ
  • 問題点
    • Chrome以外の実装がない
    • Documentのツリーができてしまう
      • しかし、HTML ImportのDocumentは表示されない
      • Fragmentではない
      • Documentを持つ問題を引きずる
        • <base>問題
      • import先でもdocumentを呼ぶとメインのドキュメントが返ってくる
      • document.currentScript.ownerDocument
    • <style>がメインドキュメントに適応される
      • HTML module待ち
    • ESModulesと相互運用できない
      • ロードとか実行の順序を決めるとかをHTML ImportとES Module両方をそれぞれ書かないといけなくなる
  • HTML Modules
    • https://github.com/w3c/webcomponents/issues/645
      • 長いスレッド
    • 実際にユーザーに出すときにはコンパイルした何かになってる
    • そういうときにHTML Modulesみたいなそのまま出すものを作る意味がどれぐらいあるのか
    • スレッドのまとめ
      • HTML in JS、JS in HTML
      • importでJavaScript以外も as Foo で読めるようにするとか
      • Symbol.importerみたいなhookを実装できるようにすればいいのではとか
      • 論点がまとまってない
<script type=module>
import temp from "my-template.html";
document.querySelector("#id").appendChild(document.importNode(tmpl.content));
</script>

実現例(イメージ)

<script type=module>
import * from "lgtm-button.html";
// registryはwindowにくっついている
</script>
<lgtm-button></lgtm-button>

実装例(import/export)

<template>
  <button>LGTM</button>
</template>
<script>
import MyButton from "./my-button.html"
export class LGTMButton extends MyButton{}
</script>

  • HTML moduileはHTMLとES両方の仕様を参照する

    • ES側にhookの仕組み
    • HTML側に解釈の仕組み

  • 何がうれしいのか

    • <template>を読み込みたい
    • 文字列からDOM生成じゃないので効率的?
    • ネイティブHTMLパーザーを使うと性能が出る?

  • TAPC 2017の議論

    • ES moduleベースのシステム
    • InertなHTMLがロードできる
    • ここまでは共通認識
    • single file component
      • html,js,cssを含んだコンポーネント
    • <script>が実行できる
    • DOMの一部をexportできる
    • 他のモジュールをimportできる
    • Document or DocumentGragment
    • 独立した空間
    • 何も決まらなかった
    • 具体的なユースケースで話をしようぜ

  • FAQ