$30 off During Our Annual Pro Sale. View Details »

Web Components 元年 v3 / Web Components first year v3

Jxck
November 06, 2020

Web Components 元年 v3 / Web Components first year v3

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

Jxck

November 06, 2020
Tweet

More Decks by Jxck

Other Decks in Technology

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