2017年9月24日に開催された HTML5 Conference 2017 の「The State of Web Components」のセッション資料です。

3. ‣
‣
‣
‣
‣
‣
‣

4. 📕

7. ‣
‣
‣
‣
‣
‣

9. <button>
fancy button
</button>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}

12. <button class="a">
fancy button
</button>
<button class="b">
fancy button
</button>
button {
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
button.a {
background: #0086b3;
}
button.b {
background: #008080;
}

16. fancy button
</button>
<button class="b">
fancy button
</button>
<button class="c">
fancy button
</button>
<button class="oval">
oval
</button>
<button class="square">
border-radius: 0.5em;
border: none;
}
button.a {
background: #0086b3;
}
button.b {
background: #008080;
}
button.oval {
...
}

18. <fancy-button color="a">
fancy button
</fancy-button>
<fancy-button color="b">
fancy button
</fancy-button>
<fancy-button color="c">
fancy button
</fancy-button>
<oval-button>oval</oval-button>
<square-button>square</square-button>

22. ‣
‣
‣
‣
‣

23. const button = document.querySelector('button');
const shadowRoot = button.attachShadow({
mode: 'open' // or 'close'
});
// readonly property
console.log(button.shadowRoot);

25. <button>
fancy button
</button>
<style>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>

26. <button>
#shadow-root
fancy button
</button>
<style>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>
<button>
<slot></slot>
</button>

27. <button>
#shadow-root
fancy button
</button>
<style>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>
<button>
<slot></slot>
</button>

28. <button>
#shadow-root
fancy button
</button>
<style>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>
<button>
<slot></slot>
</button>
🎉

30. ‣
‣
‣
‣
‣

31. class FancyButton extends HTMLElement {
constructor() { ... }
connectedCallback() { ... }
disconnectedCallback() { ... }
attributeChangedCallback() { ... }
adoptedCallback() { ... }
}

32. ‣
‣
‣
‣
‣

34. .fancy {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}

35. document
.querySelector('.fancy')
.addEventListener('click', () => {
//...
});

36. <button class="fancy">
fancy button
</button>

37. <link rel="stylesheet" href="button.css">
...
<button class="fancy">
fancy button
</button>
...
<script src="button.js"></script>

39. class FancyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<style>button { … }</style>
<button>fancy button</button>
`;
}
}
customElements
.define('fancy-button', FancyButton);

40. <fancy-button>
fancy button
</fancy-button>

41. <fancy-button>
<style>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>
<button>
fancy button
</button>
</fancy-button>
🤔

43. class FancyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<style>button { … }</style>
<button>fancy button</button>
`;
}
}
customElements
.define('fancy-button', FancyButton);

44. class FancyButton extends HTMLElement {
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>button { … }</style>
<button><slot></slot></button>
`;
}
}
customElements
.define('fancy-button', FancyButton);

45. <fancy-button>
<style>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>
<button>
fancy button
</button>
</fancy-button>

46. <fancy-button>
#shadow-root
<style>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>
<button>
<slot></slot>
</button>
fancy button
</fancy-button>
🎉

48. ‣
‣
‣

49. <div style="display:none;">
<p>This is an image</p>
<img src="foo.jpg" alt="">
</div>

50. <script type="text/template">
<p>This is an image</p>
<img src="foo.jpg" alt="">
</script>

51. <template>
<p>This is an image</p>
<img src="foo.jpg" alt="">
</template>
✨

53. class FancyButton extends HTMLElement {
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>button { … }</style>
<button><slot></slot></button>
`;
}
}
customElements
.define('fancy-button', FancyButton);

54. <template>
<style>button { … }</style>
<button><slot></slot></button>
</template>
<script>
class FancyButton extends HTMLElement {
// ...
}
customElements
.define('fancy-button', FancyButton);
</script>

55. <link
rel="import"
href="fancy-button.html">
<fancy-button>
fancy button
</fancy-button>

56. … 😇

57. … 🤔

58. import fancy from './fancy.html' as HTMLTemplateElement;
export class FancyButton extends HTMLElement {
connectedCallback() {
this.attachShadow({
mode: 'open'
}).appendChild(fancy.content.cloneNode(true));
}
}
🤔

60. ‣
‣
‣
‣
‣

61. export default class FancyButton {
...
}

62. import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import FancyButton from './fancy-button.js';

63. <script type="module">
import FancyButton from './fancy-button.js';
customElements
.define('fancy-button', FancyButton);
</script>

65. class FancyButton extends HTMLElement {
connectedCallback() {
this.attachShadow({
mode: 'open'
}).innerHTML = `
<style>button { … }</style>
<button><slot></slot></button>
`;
}
}
customElements
.define('fancy-button', FancyButton);

66. export default
class FancyButton extends HTMLElement {
connectedCallback() {
this.attachShadow({
mode: 'open'
}).innerHTML = `
<style>button { … }</style>
<button><slot></slot></button>
`;
}
}

67. <fancy-button>
fancy button
</fancy-button>
<script type="module">
import FancyButton from './fancy-button.js';
customElements
.define('fancy-button', FancyButton);
</script>
🎉

68. ‣
‣
‣
‣
‣
‣

69. ‣
‣
‣
‣
‣
‣

71. 😇
🐦

72. 🐈

73. // fancy-button v1.0.0
customElements
.define('fancy-button', FancyButton);
// fancy-button v1.1.0
customElements
.define('fancy-button', FancyButton);
☠
💖
✨

74. ‣
‣
‣
‣

76. ‣
‣
‣
‣

77. 🚧✅ 🤔✅
✅ ✅✅ ✅
✅ ✅✅ ✅
🤔✅✅ 🚧
🚩🚩

78. ✨

82. ‣
‣
‣
‣

83. ‣
‣
‣
‣
‣
‣

85. 🙊

86. ‣
‣
‣
‣

87. ‣
‣
‣
‣
‣
‣ 🤔

88. <fancy-button>
#shadow-root
fancy button
</fancy-button>
<style>
button {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>
<button>
<slot></slot>
</button>

89. <fancy-button>
#shadow-root
fancy button
</fancy-button>
<style>
div {
background: #0086b3;
color: white;
padding: 1em;
border-radius: 0.5em;
border: none;
}
</style>
<div role="button" tabindex="0">
<slot></slot>
</div>

90. ‣
‣
‣
‣

91. ‣
‣
‣
‣
‣

93. ‣
‣
‣
‣
‣
‣

94. ‣
‣
‣
‣

95. ‣
‣
‣
‣
‣
‣

96. 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 (
<fancy-button onClick={handleClick}>
{this.props.children}
</fancy-button>
);
}
}

97. ‣
‣
‣

98. const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;
// renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body);
// updates to <div>Hello Kevin!</div>, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);

99. 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`
<style>...</style>
<button>
<i class="${this.getAttribute('icon')}"></i>
<slot></slot>
</button>
`;
}
};

100. ‣
‣
‣
‣

101. ✨

102. 💓
!
"