Web Components 元年 v3 / Web Components first year v3

2020/11/05 #new_style_study
https://web-study.connpass.com/event/192863/

Transcript

1. WebComponents
   元年 v3
   #new_style_study
   

   View Slide

2. WebComponent 元年 v0
   2012~13
   ● Custom Elements v0
   ● Shadow DOM v0
   ● Template Element
   ● HTML Imports
   v0 の API を見直し v1 へ
   Deprecate には Reverse Origin
   Trials をしながら削除中
   仕様段階で否定されそのまま
   Deprecated
   

   View Slide

3. WebComponent 元年 v1
   2016~19
   ● Custom Elements v1
   ● Shadow DOM v1
   ● Template Instantiation
   ● Synthetic Modules
   実質ただの HTML Snippet なので
   Handlebars 系の記法を入れて本当に
   Template にしよう。 => 議論進まず
   Import 構文を使って HTML/CSS/JSON など様々
   な Module を Import できるようにしよう。
   => Security Risk が見つかる
   

   View Slide

4. WebComponent 元年 v2
   2019-2020
   ● Custom Elements v1
   ● Shadow DOM v1
   ○ Declarative Shadow DOM
   ○ Imeperative Slot Element
   ● Template Instantiation
   ● Synthetic Modules
   

   View Slide

5. Declarative Shadow DOM
   HTML DOM
   
   
   
   Shadow Content
   
   
   Light content
   
   
   #shadow-root (open)
   
   Shadow Content
   
   ↳ reveal
   
   Light content
   
   

   View Slide

6. Template Instantiation
   
   
   {{foreach items}}
   {{if exists}}
   {{label}}
   {{/if}}
   {{/foreach}}
   
   
   

   View Slide

7. WebComponent 元年 v3 (期待)
   2021~?
   ● Custom Elements v1
   ○ Scoped Custom Element
   Registration
   ● Shadow DOM v1
   ○ Declarative Shadow DOM
   ○ Imeperative Slot Element
   ● Template Instantiation
   ○ DOM Parts
   ● Synthetic Modules
   ○ Import Assertions
   勝手にファミリー認定
   ● WebPackaging
   ○ Subresource Webbundle
   

   View Slide

8. Import Assertions & Synthetic Modules
   import json from "./foo.json" assert { type: "json" };
   import("foo.json", { assert: { type: "json" } });
   

   View Slide

9. DOM Parts
   //
   nodePart = new ChildNodePart($a)
   attributePart = new AttributePart($a, 'href')
   nodePart.value = "Example"
   attributePart.value = "https://example.com"
   nodePart.commit();
   attributePart.commit();
   // Example
   

   View Slide

10. Subresource WebBundle
    href="bundle.wbn"
    resources="
    style.css
    script.js
    image.webp
    template.html
    "
    >
    

    View Slide

11. 元年は続く
    

    View Slide