HTML5 Conference 2018 ( https://events.html5j.org/conference/2018/11/ )での資料です
Web ComponentsHTML5 Conference 2018 @2018-11-25
View Slide
aggre@aggre_@aggreFRAME00, INC. CTOaggre.io
• Web Components (5min)• Web Components (5min)• Web Components (10min)• Web Components (20min)
Web Components
Custom ElementsShadow DOMHTML TemplatesES Modules
Custom ElementsShadow DOMHTML TemplatesES Modules/Production-ready
Custom ElementsShadow DOMHTML TemplatesES ModulesEdgeDeveloping ‼
IE
IE• Windows 10 Edge• Windows 7 2020 1• Windows 8.1 ?Edge …App
PolyfillsIE, Edge
PolyfillsIE, EdgeShadow DOM
• / Polyfills OK• Edge , IE 2020 Polyfills
• Custom Elements• Shadow DOM• HTML Templates• HTML Imports
• Custom Elements• Shadow DOM• ES Modules
• Custom Elements• Shadow DOM• HTML Templates• HTML Imports• Custom Elements• Shadow DOM• ES Modules
HTML
Custom Elements
Custom ElementsShadow DOMES Modules
Custom ElementsShadow DOMES ModulesCustom ElementsShadow DOMDOM
DOMcreateElement()
destroy
observedAttributesDOM
iframe adoptNode()ownerDocument
Shadow DOM
DOM
CSS
Shadow DOM slotslot
slot
Shadow DOM slot
• Custom Elements•• Shadow DOM DOM• slot Shadow DOM
•••• SSR• more…
size=large
e.g.
Web Componentsxxx-dnd…
e.g. React
e.g. ReactShadow DOMReact render
• Web Components• React, Angular, Vue…••• :
SSRShadow DOM slotHydrate SSR
shadowRoot rendershadowRoot
shadowRoot rendershadowRootslot
shadowRoot rendershadowRootHydrate
shadowRoot rendershadowRootSSR
• Custom Elements• Shadow DOM, slot••
…
•• lit-html• Web Components• lit-html Web Components• lit-element• Angular/Vue
• lit-html• lit-html Web Components• lit-element• Angular/Vue
• lit-html• lit-html Web Components• lit-element• Angular/VueWeb Components
• lit-html• lit-html Web Components• lit-element• Angular/VueFWFW Web Components
( )
•• innerHTML addEventListener DOM API•
lit-html( lit-html )
lit-html
lit-htmlhtml, render directive3 API
lit-htmlTagged Templates
lit-htmlHTML
lit-htmlHTMLDOMDOM
lit-htmlDOM
lit-htmltextContent
@Event
?attribute
.propertyDOM
Intellisense for lit-htmltypescript-lit-html-plugin, vscode-lit-html
lit-html• lit-html• Intellisense• Web Components• …• lit-html• lit-element
lit-element
lit-htmlReact.Component
lit-element• TypeScript Native• lit-html• Web Components• @property({type: X})•• lit-html .property
JSXlit-html
RxJS
fit-htmlRedux + lit-html
Directive API
Directive API1
Directive API0 -1
Directive APIdirective
Directive APIrender
lit-html• TypeScript Native• JSX• Directive API•• Vue/Angular HTMLReact
appendix
lit-html, hyperHTML, htmTagged Templates
hyperHTML
hyperHTMLbind() DOM
hyperHTMLwire()
htm
htmhtm( preact )
htmJSX
htm…
lit-htmlhyperHTMLhtm• (HTML Template Instantiation)• PolymerLabs/template-instantiation• Directive API• ES5• Node.js• Tagged Templates JSX• preact vhtmldevelopit/WebReflection/Polymer/
( TypeScript Native lit-html )
• lit-element Web Components• FP lit-html ( )
• / Polyfills OK• Edge , IE 2020 Polyfills• Custom Elements• Shadow DOM DOM• slot Shadow DOM••• lit-element Web Components• FP lit-html
Thank you!@aggre_@aggreaggre.io
aggre
hayaosuzuki
takashi1029
k1low
whywaita
doradora09
yoshidashingo
tarappo
shin_higuchi
cyberagentdevelopers
yuya4
leekwangsoo1995
tacck
geeforr
revolveconf
afnizarnur
zakiyama
brettharned
sachag
bkeepers
addyosmani
chrislema
dougneiner
thoeni
holman