Slide 1
Slide 1 text
)5.-$POGFSFODF
4IPHP4FOTVJBLB!DI
5IF4UBUFPG8FC$PNQPOFOUT
Slide 2
Slide 2 text
!DI
Slide 3
Slide 3 text
‣ 4IPHP4FOTVJ
‣ ؎ٝة٦طحزדכDIדׅ
‣ $ZCFS"HFOU
*OD
‣ 8FC*OJUJBUJWF$FOUFS
‣ 4PGUXBSF&OHJOFFS
‣ 8FC䪮遭Ⰻ菙ָ㥨ֹדׅ
‣ 044崞⹛׃גתׅ
Slide 4
Slide 4 text
馄鸞劤ָ⳿תׅ
涪㡰✮㹀
Slide 5
Slide 5 text
8IZ8FC$PNQPOFOUT
Slide 6
Slide 6 text
)5.-$44
8FC涪罏
Slide 7
Slide 7 text
8FCחֶֽ鿇ㅷךꨇ׃ׁ
‣ )5.-ה$44חأ؝٦فָ㶷㖈׃זְ
‣ 铣鴥$44ך䕦갟眔㔲ָ鎘濼זְ
‣ せ瑞ָ遼瑱׃זְ״ֲծ䌢ח䠐陎ׅ䗳銲ָ֮
‣ ⡲鿇ㅷⱄⵃ欽׃חְֻ
‣ )5.-$44+BWB4DSJQUתה➬穈ָזְ
‣ תה鿇ㅷꂁ䋒ׅؒ؝ءأذيָזַ
Slide 8
Slide 8 text
نةٝ⡲חכ˘
GBODZCVUUPO
Slide 9
Slide 9 text
fancy button
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
)5.-ה$44剅ֽל0,
Slide 10
Slide 10 text
GBODZCVUUPO
Slide 11
Slide 11 text
GBODZCVUUPO
GBODZCVUUPO
Slide 12
Slide 12 text
fancy button
fancy button
button {
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
button.a {
background: #0086b3;
}
button.b {
background: #008080;
}
Slide 13
Slide 13 text
GBODZCVUUPO
GBODZCVUUPO
Slide 14
Slide 14 text
GBODZCVUUPO
GBODZCVUUPO
GBODZCVUUPO
Slide 15
Slide 15 text
GBODZCVUUPO
GBODZCVUUPO
GBODZCVUUPO
PWBM
TRVBSF
Slide 16
Slide 16 text
fancy button
fancy button
fancy button
oval
border-radius: 0.5em;
border: none;
}
button.a {
background: #0086b3;
}
button.b {
background: #008080;
}
button.oval {
...
}
Slide 17
Slide 17 text
GBODZCVUUPO
GBODZCVUUPO
GBODZCVUUPO
PWBM
TRVBSF
Slide 18
Slide 18 text
fancy button
fancy button
fancy button
oval
square
Slide 19
Slide 19 text
4IBEPX%0. $VTUPN&MFNFOUT
5FNQMBUFT )5.-*NQPSUT
˟׳התד
Slide 20
Slide 20 text
˟䎃猧植㖈
4IBEPX%0. $VTUPN&MFNFOUT
5FNQMBUFT &4.PEVMFT
Slide 21
Slide 21 text
4IBEPX%0.
Slide 22
Slide 22 text
4IBEPX%0.הכ
‣ )5.-ծ$44ծ+BWB4DSJQUך䕦갟眔㔲ꣲ㹀ׅ
‣ مأزהז銲稆חTIBEPX3PPU欰װ׃ծך⚥ד饯ֿֿה4IBEPX
%0.ⰻח殅
‣ 4IBEPX%0.㢩鿇ַך䕦갟ꣲ㹀ׅ
‣ TIBEPX3PPUפך،ؙإأꣲ㹀涸ח׃ծ䮶莸ְ䬐⥂ׅ
‣ TIBEPX3PPUפ،ؙإأדֹPQFOٌ٦سהծ黪倖ׅDMPTFEٌ٦سָ֮
Slide 23
Slide 23 text
const button = document.querySelector('button');
const shadowRoot = button.attachShadow({
mode: 'open' // or 'close'
});
// readonly property
console.log(button.shadowRoot);
4IBEPX%0.ך欰װ׃倯
Slide 24
Slide 24 text
GBODZCVUUPO
⢽ִלְֲֲֿنةٝ
Slide 25
Slide 25 text
fancy button
ֲֿ剅ֽءٝفٕ˘
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}ɹ
Slide 26
Slide 26 text
#shadow-root
fancy button
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
Slide 27
Slide 27 text
#shadow-root
fancy button
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}ɹ
Slide 28
Slide 28 text
#shadow-root
fancy button
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
4DPQFE
Slide 29
Slide 29 text
$VTUPN&MFNFOUT
Slide 30
Slide 30 text
$VTUPN&MFNFOUTהכ
‣ 杝荈ך)5.-銲稆㹑鎉ׅ
‣ )5.-ד㹑鎉涸חⵃ欽דֹ
‣ %0."1*鸐ׄגㄏ⟀涸חⵃ欽דֹ
‣ ⟣䠐ך䮶莸ְ㹀纏ׅ
‣ 㹀纏ׁٓ؎ؿ؟؎ؙٕؿحؙׅ
Slide 31
Slide 31 text
class FancyButton extends HTMLElement {
constructor() { ... }
connectedCallback() { ... }
disconnectedCallback() { ... }
attributeChangedCallback() { ... }
adoptedCallback() { ... }
}
ؕأةي銲稆ٓ؎ؿ؟؎ؙٕ
Slide 32
Slide 32 text
䖞勻ך8FC鿇ㅷךⱄⵃ欽
‣ 鿇ㅷ圓䧭ׅ)5.-鎸鶢ׅ
‣ $44ח״أة؎ؚٔٝ黝欽ׅ
‣ $44ؿ؋؎ٕٗ٦سׅծTUZMF銲稆剅ֻծFUD
‣ +BWB4DSJQUח״䮶莸ְ黝欽ׅ
‣ +BWB4DSJQUؿ؋؎ٕٗ٦سׅծTDSJQU銲稆剅ֻծFUD
Slide 33
Slide 33 text
GBODZCVUUPO
نةٝ⢪ְְ˘
Slide 34
Slide 34 text
.fancy {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
CVUUPODTT
Slide 35
Slide 35 text
CVUUPOKT
document
.querySelector('.fancy')
.addEventListener('click', () => {
//...
});
Slide 36
Slide 36 text
fancy button
JOEFYIUNM
Slide 37
Slide 37 text
...
fancy button
...
穈さׇג⢪ֲ
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
class FancyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `
button { … }
fancy button
`;
}
}
customElements
.define('fancy-button', FancyButton);
Slide 40
Slide 40 text
fancy button
GBODZCVUUPO
GBODZCVUUPO⢪ִ
Slide 41
Slide 41 text
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
fancy button
/PUTDPQFE
Slide 42
Slide 42 text
4IBEPX%0.
$VTUPN&MFNFOUT
Slide 43
Slide 43 text
class FancyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `
button { … }
fancy button
`;
}
}
customElements
.define('fancy-button', FancyButton);
Slide 44
Slide 44 text
class FancyButton extends HTMLElement {
connectedCallback() {
this.shadowRoot.innerHTML = `
button { … }
`;
}
}
customElements
.define('fancy-button', FancyButton);
Slide 45
Slide 45 text
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
fancy button
Slide 46
Slide 46 text
#shadow-root
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
fancy button
4DPQFE
Slide 47
Slide 47 text
5FNQMBUFT
Slide 48
Slide 48 text
5FNQMBUFTהכ
‣ ꬊ崞䚍ז)5.-銲稆㹑鎉ׅ
‣ ذٝفٖ٦زה׃ג)5.-銲稆䪔ִ
‣ 䖞勻ךعحؙ涸ז،فٗ٦ثׇ׆ח幥
Slide 49
Slide 49 text
This is an image
Slide 50
Slide 50 text
<p>This is an image</p>
<img src="foo.jpg" alt="">
&WBMXJUIJOOFS)5.-
Slide 51
Slide 51 text
This is an image
*OFSU✨
Slide 52
Slide 52 text
4IBEPX%0.
$VTUPN&MFNFOUT
5FNQMBUFT
Slide 53
Slide 53 text
class FancyButton extends HTMLElement {
connectedCallback() {
this.shadowRoot.innerHTML = `
button { … }
`;
}
}
customElements
.define('fancy-button', FancyButton);
Slide 54
Slide 54 text
button { … }
class FancyButton extends HTMLElement {
// ...
}
customElements
.define('fancy-button', FancyButton);
Slide 55
Slide 55 text
fancy button
Slide 56
Slide 56 text
)5.-*NQPSUT…
IUUQTHJUIVCDPNXDXFCDPNQPOFOUTJTTVFTJTTVFDPNNFOU
Slide 57
Slide 57 text
)5.-.PEVMFT…
IUUQTHJTUHJUIVCDPN5BLBZPTIJ,PDIJGEDFEGECCEBGFGF
Slide 58
Slide 58 text
import fancy from './fancy.html' as HTMLTemplateElement;
export class FancyButton extends HTMLElement {
connectedCallback() {
this.attachShadow({
mode: 'open'
}).appendChild(fancy.content.cloneNode(true));
}
}
Slide 59
Slide 59 text
&4.PEVMFT
Slide 60
Slide 60 text
&4.PEVMFTהכ
‣ &4.PEVMFTךـٓؐؠ㹋鄲
‣ TDSJQUUZQFˑNPEVMF˒ד+BWB4DSJQUؿ؋؎ٕٗ٦سׅ
‣ TDSJQUOPNPEVMFדꬊ㼎䘔橆㞮罋䣁ׅ
‣ &4.PEVMFTך/PEFKT㹋鄲
‣ NKT&4.PEVMFTך+BWB4DSJQUؿ؋؎ٕה׃גٗ٦سׅ
Slide 61
Slide 61 text
export default class FancyButton {
...
}
GBODZCVUUPOKT
Slide 62
Slide 62 text
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import FancyButton from './fancy-button.js';
JOEFYKT
Slide 63
Slide 63 text
import FancyButton from './fancy-button.js';
customElements
.define('fancy-button', FancyButton);
Slide 64
Slide 64 text
4IBEPX%0.
$VTUPN&MFNFOUT
&4.PEVMFT
Slide 65
Slide 65 text
class FancyButton extends HTMLElement {
connectedCallback() {
this.attachShadow({
mode: 'open'
}).innerHTML = `
button { … }
`;
}
}
customElements
.define('fancy-button', FancyButton);
Slide 66
Slide 66 text
export default
class FancyButton extends HTMLElement {
connectedCallback() {
this.attachShadow({
mode: 'open'
}).innerHTML = `
button { … }
`;
}
}
Slide 67
Slide 67 text
fancy button
import FancyButton from './fancy-button.js';
customElements
.define('fancy-button', FancyButton);
Slide 68
Slide 68 text
8FCחֶֽ鿇ㅷךꨇ׃ׁ
‣ )5.-ה$44חأ؝٦فָ㶷㖈׃זְ
‣ 铣鴥$44ך䕦갟眔㔲ָ鎘濼זְ
‣ せ瑞ָ遼瑱׃זְ״ֲծ䌢ח䠐陎ׅ䗳銲ָ֮
‣ ⡲鿇ㅷⱄⵃ欽׃חְֻ
‣ )5.-$44+BWB4DSJQUתה➬穈ָזְ
‣ תה鿇ㅷꂁ䋒ׅؒ؝ءأذيָזַ
Slide 69
Slide 69 text
4IBEPX%0.
$VTUPN&MFNFOUT
&4.PEVMFT
OQNZBSO
8FCחֶֽ鿇ㅷךꨇ׃ׁ
‣ )5.-ה$44חأ؝٦فָ㶷㖈׃זְ
‣ 铣鴥$44ך䕦갟眔㔲ָ鎘濼זְ
‣ せ瑞ָ遼瑱׃זְ״ֲծ䌢ח䠐陎ׅ䗳銲ָ֮
‣ ⡲鿇ㅷⱄⵃ欽׃חְֻ
‣ )5.-$44+BWB4DSJQUתה➬穈ָזְ
‣ תה鿇ㅷꂁ䋒ׅؒ؝ءأذيָזַ
Slide 70
Slide 70 text
1PMZNFS4VNNJU
JO$PQFOIBHFO
Slide 71
Slide 71 text
#PXFSJTEFQSFDBUFE
Slide 72
Slide 72 text
6TFOQNZBSO
Slide 73
Slide 73 text
// fancy-button v1.0.0
customElements
.define('fancy-button', FancyButton);
// fancy-button v1.1.0
customElements
.define('fancy-button', FancyButton);
ZBSO⢪ֲץֹ椚歋
☠
⣛㶷ٌآُ٦ٕؿٓحزזخٔ٦ד鍑寸דֹ✨
Slide 74
Slide 74 text
‣ #SPXTFS4VQQPSU
‣ "DDFTTJCJMJUZ
‣ -PBE1FSGPSNBODF
‣ 3FOEFS1FSGPSNBODF
Slide 75
Slide 75 text
8FC$PNQPOFOUTTBOECPY
IUUQTDIHJUIVCJPXFCDPNQPOFOUTTBOECPY
Slide 76
Slide 76 text
‣ #SPXTFS4VQQPSU
‣ "DDFTTJCJMJUZ
‣ -PBE1FSGPSNBODF
‣ 3FOEFS1FSGPSNBODF
Slide 77
Slide 77 text
✅
✅
$VTUPN&MFNFOUTW
4IBEPX%0.W
5FNQMBUFT
&4.PEVMFT
✅ ✅
✅ ✅
✅ ✅
✅ ✅
✅
✅
䎃猧ـٓؐؠ؟ه٦ز
Slide 78
Slide 78 text
8FC$PNQPOFOUT
JT
BWBJMBCMFOPX
PO
UIFNPCJMFXFC✨
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
:PV5VCFJTCVJMU
POUIFUPQPG1PMZNFS
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
6TFXFCDPNQPOFOUTKT
‣ $VTUPN&MFNFOUTWךهٔؿ؍ٕ
‣ 4IBEZ%0.4IBEPX%0.ך%0."1*هٔؿ؍ٕ
‣ 4IBEZ$444IBEPX%0.ךأة؎ٕꟼ鸬هٔؿ؍ٕ
‣ )5.-*NQPSUT
Slide 83
Slide 83 text
8IZ4IBEZ%0.
‣ %0.خٔ٦ך،ؙإ؟ⵖ䖴ׅךָꨇ׃ְ
‣ ぐ珏%0."1*װ/PEF-JTUךؒىُٖ٦زָꨇ׃ְ
‣ EPDVNFOUCPEZ瘝ך،ؙإ؟♳剅ֹדֹזְ
‣ ؝٦سꆀָ花㣐חז♳ծػؿؓ٦وٝأח䕦갟ׅ
‣ 4IBEZ%0."1*➜׃ג،ؙإأׇׁ
‣ 㸜㹀䚍⥂אאծػؿؓ٦وٝأ⳿ׅ
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
8FC$PNQPOFOUT
JTBMTP
BWBJMBCMFOPX
PO
UIFEFTLUPQXFC
Slide 86
Slide 86 text
‣ #SPXTFS4VQQPSU
‣ "DDFTTJCJMJUZ
‣ -PBE1FSGPSNBODF
‣ 3FOEFS1FSGPSNBODF
Slide 87
Slide 87 text
"DDFTTJCJMJUZ
‣ 4IBEPX%0.ך)5.-،ؙإءـٕח
‣ 鸐䌢ך%0.ず圫חծإوٝذ؍ؙأ䠐陎ׅ
‣ )5.-ֽד♶⼧ⴓז㜥さכծ8"*"3*"ד؟ه٦زׅ
‣ 孡חזךכأ؝٦فⰻפך،ؙإأ
‣ 4IBEPX%0.ָꪪ⳿ׁגְֽ
‣ ،ؙإءؽٔذ؍ָ⡚ְ؝ٝه٦طٝز⢪ֲ㜥さכ˘
Slide 88
Slide 88 text
#shadow-root
fancy button
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
&YQPTFE
Slide 89
Slide 89 text
#shadow-root
fancy button
div {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
&YQPTFE
Slide 90
Slide 90 text
‣ #SPXTFS4VQQPSU
‣ "DDFTTJCJMJUZ
‣ -PBE1FSGPSNBODF
‣ 3FOEFS1FSGPSNBODF
Slide 91
Slide 91 text
-PBE1FSGPSNBODF
‣ TDSJQUח״؝ٝه٦طٝزךٗ٦س
‣ ؙٔؒأز侧כ)551ד֮ל孡ח׃ֺׅזֻג葺ְ
‣ ؝ٝه٦طٝزך+BWB4DSJQUؿ؋؎ٕכNJOJGZׅ
‣ UZQFˑNPEVMF˒㾩䚍ח״EFGFSٗ٦س
‣ ؔفءّٝדBTZOD㾩䚍➰♷דֹ
Slide 92
Slide 92 text
TDSJQUח״ぐ珏ٗ٦س
IUUQTIUNMTQFDXIBUXHPSHNVMUJQBHFTDSJQUJOHIUNMUIFTDSJQUFMFNFOU
Slide 93
Slide 93 text
ثُ٦صؚٝه؎ٝز
‣ ٔا٦أ㙵鴥ךַٍؗحءُׅךַ
‣ 㙵鴥כ剑傍ֻٖٝتֲָׁؚٔٝծⴱ劍ٗ٦سָ曯暨חז
‣ ״כ$BDIF$POUSPMقحتװ4FSWJDF8PSLFSזודٍؗحءُ׃ְ
‣ ⴱ劍ٗ٦س傍ְ
‣ MJOLSFMˑQSFMPBE˒ד"5'חꟼٔا٦أٗ٦س׃גֶֻ
‣ 如㔐鼂獳ח䗳銲זٔا٦أכMJOLSFMˑQSFGFUDI˒דٗ٦س׃גֶֻ
Slide 94
Slide 94 text
‣ #SPXTFS4VQQPSU
‣ "DDFTTJCJMJUZ
‣ -PBE1FSGPSNBODF
‣ 3FOEFS1FSGPSNBODF
Slide 95
Slide 95 text
3FOEFS1FSGPSNBODF
‣ -JHIU%0.ה4IBEPX%0.ך䊴
‣ 4IBEPX%0.ךךךכـٓؐؠ㹋鄲ך剑黝⻉ח㨻י״ֲ
‣ ע㣐䊴כזְ⦐➂ך✮䟝דׅ
‣ 7JSUVBM%0.ח״䊴ⴓ䲽歗ך⡭㖑
‣ ➙תד鸐3FBDUזוך7JFXٓ؎ـٓٔה穈さׇ
‣ 8FC$PNQPOFOUTⰻד䊴ⴓ䲽歗㹋倵ׅ
Slide 96
Slide 96 text
import React from 'react';
export default
class Button extends React.Component {
handleClick(e) {
if (this.props.onClick) {
this.props.onClick(e);
}
}
render() {
const handleClick = this.handleClick.bind(this);
return (
{this.props.children}
);
}
}
Slide 97
Slide 97 text
1PMZNFS-BCTMJUIUNM
‣ 5BHHFE5FNQMBUF-JUFSBMדUFNQMBUF⢪ֲ➬穈
‣ IUNMAAדذٝفٖ٦ز⡲ծSFOEFS
ד)5.-欰䧭ׅ
‣ SFOEFS
ד床ׅ⹛涸ז鿇ⴓך䊴ⴓ䲽歗ׅ
Slide 98
Slide 98 text
const helloTemplate = (name) => html`
Hello ${name}!
`;
// renders Hello Steve!
to the document body
render(helloTemplate('Steve'), document.body);
// updates to Hello Kevin!
, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);
Slide 99
Slide 99 text
import { html, render } from './lit-html.js';
export default class IconButton extends HTMLElement {
connectedCallback() {
this.attachShadow({
mode: 'open'
});
render(this.template, this.shadowRoot);
}
get template() {
return html`
...
`;
}
};
Slide 100
Slide 100 text
תה
‣ 8FC$PNQPOFOUTחꟼׅぐ珏➬圫ָ㸜㹀׃גֹ
‣ ـٓؐؠ㹋鄲滠㹋ח鹌ծ暴חٌغ؎ٕ8FCדכه
ٔؿ؍ٕז׃ד⢪ִ
‣ ➙⢪גְ䪮遭أةحؙח《鴥דְֽ
‣ ـٓؐؠⰻ鿇Ⳣ椚ך剑黝⻉䖉אאծطحزٙ٦ؙ
ꟼ鸬כ㛇劤ח屟ثُ٦صؚٝד0,
Slide 101
Slide 101 text
:PVBSFSFBEZUPVTF
8FC$PNQPOFOUT✨
Slide 102
Slide 102 text
5IBOLZPV
!DI
"DI