WebComponents 元年 v3 #new_style_study

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

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 が見つかる

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

Declarative Shadow DOM HTML DOM

Shadow Content

Light content

#shadow-root (open)

Shadow Content

↳

reveal

Light content

Template Instantiation

{{foreach items}} {{if exists}}
• {{label}}
{{/if}} {{/foreach}}

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

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

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

Subresource WebBundle

元年は続く