HTML Web Components

While Web Components have been around for years, they're seeing a bit of a renaissance thanks to an emerging approach for authoring them: ditch the shadow DOM and progressively enhance existing HTML.

In this talk, we look at what Web Components, how the "HTML Web Component" approach works, why it's awesome, and some tips, tricks, and gotchas when working with them.

Transcript

1. @cferdinandi GoMakeThings.com Welcome to the light side WEB COMPONENTS HTML
2. The Uncanny Valley of Web Components
5. The Grain of the Web
6. Chris Ferdinandi GoMakeThings.com
8. The 1st Web Component
9. Web Components https://wallpaperaccess.com
10. https://www.wallpaperflare.com Every Website
11. <count-up></count-up>
12. this.innerHTML = `<button aria-live="polite"> Clicked 0 Times </button>`;
13. // Create the Shadow DOM this.root = this.attachShadow({ mode: 'closed' }); // Inject HTML into it this.root.innerHTML = `<button aria-live="polite"> Clicked 0 Times </button>`;
14. // Add styles to the Shadow DOM let stylesheet = new CSSStyleSheet(); stylesheet.replaceSync( `button { background-color: #08c; border: 1px solid #08c; color: #fff; }` ); this.root.adoptedStyleSheets = [stylesheet];
15. but web native?
17. Reactivity
18. Reactivity DOM Diffing
19. Reactivity DOM Diffing Single File Components
20. but web native?
21. <count-up></count-up>
22. The Grain of the Web
23. Start End
24. Start End 1 A new approach…
25. Start End 1 A new approach… Tips & Tricks 2
26. Start End 1 A new approach… Tips & Tricks 2 3 Examples
27. A new approach… (that’s kind of old-school) 1
28. Try not to bring React’s mindset with you… Do you really need to invent an entirely new component from scratch? Or can you use HTML up until it reaches its limit and then enhance the markup? — Jeremy Keith https://adactio.com/journal/20618
29. <h2>Merlin</h2> <p>Beard & books</p> <h2>Ursula</h2> <p>Really wants to sing</p> <h2>Radagast</h2> <p>Prefers dogs over people</p>
30. <accordion-group> <h2>Merlin</h2> <p>Beard & books</p> <h2>Ursula</h2> <p>Really wants to sing</p> <h2>Radagast</h2> <p>Prefers dogs over people</p> </accordion-group>
31. <accordion-group> <h2> <button aria-expanded=“false"> Merlin </button> </h2> <p hidden>Beard & books</p> <!-- ... --> </accordion-group>
32. BIG benefits
33. Easier to Write
34. this.innerHTML = `<button aria-live="polite"> Clicked 0 Times </button>`; YUCK!
35. <div id="wizards"> <!-- ... --> </div> new Accordion('#wizards');
36. <accordion-group> <!-- ... --> </accordion-group>
37. <accordion-group> <!-- ... --> </accordion-group> <accordion-group> <!-- ... --> </accordion-group>
38. Better Performance
39. =*(
40. <accordion-group heading="h3" autoclose="true" > <!-- ... --> </accordion-group>
41. // Wizard info new Accordion('#wizards'); // FAQs new Accordion('#faq', { heading: 'h3', autoclose: true }); 👋 Bye!
42. Tips & Tricks 2
43. <count-up> <button>Clicked 0 Times</button> </count-up>
44. customElements.define( 'count-up', class extends HTMLElement { // Instantiate component constructor () { // ... } } );
45. constructor () { // Always run first super(); // Your code... }
46. Encapsulation
47. constructor () { // Always run first super(); // Define properties this.count = 0; this.btn = this.querySelector('button'); }
48. count-up button { background-color: #08c; border: 1px solid #08c; color: #fff; }
49. /* JS is loaded! */ count-up:defined { /* ... */ } /* No JS yet */ count-up:not(:defined) { /* ... */ }
50. 🎉 Event Handling
51. constructor () { // ... 
 // Define properties this.count = 0; this.btn = this.querySelector('button'); // Listen for click events this.btn.addEventListener('click', this); }
52. // Handle click events handleEvent (event) { this.count++; this.btn.textContent = `Clicked ${this.count} Times`; }
53. // Handle events handleEvent (event) { this[`on${event.type}`](event); } // Handle click events onclick (event) { console.log('clicked!'); }
54. ⚙ Declarative Settings
55. <count-up start="42"> <button>Clicked 42 Times</button> </count-up>
56. constructor () { // Always run first super(); // Define properties let start = this.getAttribute('start'); this.count = parseFloat(start) || 0; this.btn = this.querySelector('button'); }
57. <count-up> <button>Clicked 0 Times</button> </count-up> <count-up start="42"> <button>Clicked 42 Times</button> </count-up>
59. Attribute Reactivity
60. Attribute Reactivity
61. <count-up pause> <button>Clicked 0 Times</button> </count-up>
62. // Define the attributes to observe static observedAttributes = ['pause'];
63. // Runs when the value of // an attribute is changed on the component attributeChangedCallback (name, oldVal, newVal) { this.btn.removeEventListener('click', this); } // Define the attributes to observe static observedAttributes = ['pause'];
64. attributeChangedCallback (name, oldVal, newVal) { if (newVal === null) { this.btn.addEventListener('click', this); } else { this.btn.removeEventListener('click', this); } }
65. Examples 3
66. <button>Show More</button> <p>Now you see me!</p>
67. <show-hide> <button>Show More</button> <p>Now you see me!</p> </show-hide>
68. customElements.define( 'show-hide', class extends HTMLElement { // … } );
69. // Instantiate the component constructor () { // Run first super(); // Define properties this.btn = this.querySelector('button'); this.content = this.btn.nextElementSibling; }
70. constructor () { // ... // Define properties this.btn = this.querySelector('button'); this.content = this.btn.nextElementSibling; // Set initial UI this.btn.setAttribute('aria-expanded', false); this.content.setAttribute('hidden', ''); }
71. <show-hide> <button aria-expanded="false"> Show More </button> <p hidden>Now you see me!</p> </show-hide>
72. constructor () { // ... // Set initial UI this.btn.setAttribute('aria-expanded', false); this.content.setAttribute('hidden', ''); // Listen for click events this.btn.addEventListener('click', this); }
74. handleEvent (event) { // If the content is expanded, hide it // Otherwise, show it if (this.btn.getAttribute('aria-expanded') === 'true') { // ... } else { // ... } }
75. handleEvent (event) { // If the content is expanded, hide it // Otherwise, show it if (this.btn.getAttribute('aria-expanded') === 'true') { this.btn.setAttribute('aria-expanded', false); this.content.setAttribute('hidden', ''); } else { this.btn.setAttribute('aria-expanded', true); this.content.removeAttribute('hidden'); } }
76. show-hide button { background-color: #08c; border: 1px solid #08c; color: #fff; } show-hide button[aria-expanded="true"] { background-color: #343d4d; border: 1px solid #343d4d; }
77. show-hide:not(:defined) button { display: none; }
78. <h2>Merlin</h2> <p>Beard & books</p> <h2>Ursula</h2> <p>Really wants to sing</p> <h2>Radagast</h2> <p>Prefers dogs over people</p>
79. <accordion-group> <h2>Merlin</h2> <p>Beard & books</p> <h2>Ursula</h2> <p>Really wants to sing</p> <h2>Radagast</h2> <p>Prefers dogs over people</p> </accordion-group>
80. <ul> <li><a href="#merlin">Merlin</a></li> <li><a href="#gandalf">Gandalf</a></li> </ul> <div id="merlin">...</div> <div id="gandalf">...</div>
81. <toggle-tabs> <ul> <li><a href="#merlin">Merlin</a></li> <li><a href="#gandalf">Gandalf</a></li> </ul> <div id="merlin">...</div> <div id="gandalf">...</div> </toggle-tabs>
82. <form action="/path/to/server" method="post"> <!-- ... --> </form>
83. <ajax-form> <form action="/path/to/server" method="post"> <!-- ... --> </form> </ajax-form>
84. Wrapping Up
85. 🐴 Start with HTML
86. 🐴 Start with HTML 🦄 Enhance with Web Components
87. GoMakeThings.com