Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components 元年 v3 / Web Components first yea...

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. WebComponent 元年 v0 2012~13 • Custom Elements v0 • Shadow

    DOM v0 • Template Element • HTML Imports v0 の API を見直し v1 へ Deprecate には Reverse Origin Trials をしながら削除中 仕様段階で否定されそのまま Deprecated
  2. 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 が見つかる
  3. WebComponent 元年 v2 2019-2020 • Custom Elements v1 • Shadow

    DOM v1 ◦ Declarative Shadow DOM ◦ Imeperative Slot Element • Template Instantiation • Synthetic Modules
  4. Declarative Shadow DOM HTML DOM <host-element> <template shadowroot="open"> <style></style> <h2>Shadow

    Content</h2> <slot></slot> </template> <h2>Light content</h2> </host-element> <host-element> #shadow-root (open) <style></style> <h2>Shadow Content</h2> <slot> ↳ <h2> reveal </slot> <h2>Light content</h2> </host-element>
  5. Template Instantiation <template type="with-for-each" id="list"> <ul> {{foreach items}} {{if exists}}

    <li class={{class}}>{{label}}</li> {{/if}} {{/foreach}} </ul> </template>
  6. 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
  7. Import Assertions & Synthetic Modules import json from "./foo.json" assert

    { type: "json" }; import("foo.json", { assert: { type: "json" } });
  8. DOM Parts // <a href=""></a> nodePart = new ChildNodePart($a) attributePart

    = new AttributePart($a, 'href') nodePart.value = "Example" attributePart.value = "https://example.com" nodePart.commit(); attributePart.commit(); // <a href="https://example.com">Example</a>