2020/11/05 #new_style_study https://web-study.connpass.com/event/192863/
WebComponents元年 v3#new_style_study
View Slide
WebComponent 元年 v02012~13● Custom Elements v0● Shadow DOM v0● Template Element● HTML Importsv0 の API を見直し v1 へDeprecate には Reverse OriginTrials をしながら削除中仕様段階で否定されそのままDeprecated
WebComponent 元年 v12016~19● Custom Elements v1● Shadow DOM v1● Template Instantiation● Synthetic Modules実質ただの HTML Snippet なのでHandlebars 系の記法を入れて本当にTemplate にしよう。 => 議論進まずImport 構文を使って HTML/CSS/JSON など様々な Module を Import できるようにしよう。=> Security Risk が見つかる
WebComponent 元年 v22019-2020● Custom Elements v1● Shadow DOM v1○ Declarative Shadow DOM○ Imeperative Slot Element● Template Instantiation● Synthetic Modules
Declarative Shadow DOMHTML DOMShadow ContentLight content#shadow-root (open)Shadow Content↳ revealLight content
Template Instantiation{{foreach items}}{{if exists}}{{label}}{{/if}}{{/foreach}}
WebComponent 元年 v3 (期待)2021~?● Custom Elements v1○ Scoped Custom ElementRegistration● Shadow DOM v1○ Declarative Shadow DOM○ Imeperative Slot Element● Template Instantiation○ DOM Parts● Synthetic Modules○ Import Assertions勝手にファミリー認定● WebPackaging○ Subresource Webbundle
Import Assertions & Synthetic Modulesimport 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 WebBundlehref="bundle.wbn"resources="style.cssscript.jsimage.webptemplate.html">
元年は続く