Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components

Web Components

An introduction to Custom Elements, Shadow DOM, Templates, and HTML Imports. A comparision to JavaScript frameworks like AngularJS.

Gunnar Bittersmann

February 26, 2016
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript

  1. HURRICANE by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  2. <body> </body> HURRICANE by Bob Dylan and Jacques Levy Here

    comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  3. <body> <main> </main> </body> HURRICANE by Bob Dylan and Jacques

    Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  4. HURRICANE by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world <body> <main> <h1> </h1> </main> </body> ✘
  5. Hurricane by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world <body> <main> <h1> </h1> </main> </body> h1 { text-transform: uppercase; }
  6. Hurricane by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world <body> <main> <h1> </h1> <footer> </footer> </main> </body> A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
  7. Hurricane by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world <body> <main> <h1> </h1> <footer> </footer> </main> </body> footer { font-style: italic; }
  8. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  9. <br/> <br/> <br/> <br/> <body> <main> <h1> </h1> <footer> </footer>

    <p> </p> </main> </body> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  10. HURRICANE by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  11. HURRICANE by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  12. HURRICANE by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  13. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  14. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <div> <div> <div> <div> <div> </div> </div> </div> </div> </div> ✘ Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  15. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <span> <span> <span> <span> <span> </span> </span> </span> </span> </span> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  16. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <span> <span> <span> <span> <span> </span> </span> </span> </span> </span> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world ✘ span { display: block; }
  17. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <span class="line"> <span class="line"> <span class="line"> <span class="line"> <span class="line"> </span> </span> </span> </span> </span> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  18. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <span class="line"> <span class="line"> <span class="line"> <span class="line"> <span class="line"> </span> </span> </span> </span> </span> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world .line { display: block; }
  19. HURRICANE by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane / The man the authorities came to blame / For somethin’ that he never done / Put in a prison cell, but one time he could-a been / The champion of the world
  20. HURRICANE by Bob Dylan and Jacques Levy Here comes the

    story of the Hurricane / The man the authorities came to blame / For somethin’ that he never done / Put in a prison cell, but one time he could-a been / The champion of the world .line:not(:last-child)::after { content: " / "; }
  21. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <span class="line"> <span class="line"> <span class="line"> <span class="line"> <span class="line"> </span> </span> </span> </span> </span> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  22. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <l> <l> <l> <l> <l> </l> </l> </l> </l> </l> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  23. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <x-l> <x-l> <x-l> <x-l> <x-l> </x-l> </x-l> </x-l> </x-l> </x-l> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world
  24. <body> <main> <h1> </h1> <footer> </footer> <p> </p> </main> </body>

    <x-l> <x-l> <x-l> <x-l> <x-l> </x-l> </x-l> </x-l> </x-l> </x-l> Hurricane by Bob Dylan and Jacques Levy Here comes the story of the Hurricane The man the authorities came to blame For somethin’ that he never done Put in a prison cell, but one time he could-a been The champion of the world x-l { display: block; padding-left: 1em; text-indent: -1em; }
  25. Three bodies lyin’ there does Patty see And another man

    named Bello, movin’ around mysteriously “I didn’t do it,” he says, and he throws up his hands “I was only robbin’ the register, I hope you understand I saw them leavin’,” he says, and he stops “One of us had better call up the cops” And so Patty calls the cops…
  26. Three bodies lyin’ there does Patty see And another man

    named Bello, movin’ around mysteriously “I didn’t do it,” he says, and he throws up his hands “I was only robbin’ the register, I hope you understand I saw them leavin’,” he says, and he stops “One of us had better call up the cops” And so Patty calls the cops…
  27. Three bodies lyin’ there does Patty see And another man

    named Bello, movin’ around mysteriously “I didn’t do it,” he says, and he throws up his hands “I was only robbin’ the register, I hope you understand I saw them leavin’,” he says, and he stops “One of us had better call up the cops” And so Patty calls the cops…
  28. Three bodies lyin’ there does Patty see And another man

    named Bello, movin’ around mysteriously I didn’t do it,” he says, and he throws up his hands I was only robbin’ the register, I hope you understand I saw them leavin’,” he says, and he stops One of us had better call up the cops” And so Patty calls the cops… “ “ “
  29. Three bodies lyin’ there does Patty see And another man

    named Bello, movin’ around mysteriously I didn’t do it,” he says, and he throws up his hands I was only robbin’ the register, I hope you understand I saw them leavin’,” he says, and he stops One of us had better call up the cops” And so Patty calls the cops… “ “ “
  30. Three bodies lyin’ there does Patty see And another man

    named Bello, movin’ around mysteriously I didn’t do it,” he says, and he throws up his hands I was only robbin’ the register, I hope you understand I saw them leavin’,” he says, and he stops One of us had better call up the cops” And so Patty calls the cops… “ “ “ x-l { display: block; padding-left: 1em; text-indent: -1em; hanging-punctuation: first allow-end last; }
  31. for (var xlElements = document.querySelectorAll('x-l'), l = xlElements.length, i =

    0; i < l; i++) { if (/^([„“]+)/.test(xlElements[i].innerHTML)) { xlElements[i].classList.add('hanging-punctuation-start'); } }
  32. for (var xlElements = document.querySelectorAll('x-l'), l = xlElements.length, i =

    0; i < l; i++) { if (/^([„“]+)/.test(xlElements[i].innerHTML)) { xlElements[i].classList.add('hanging-punctuation-start'); } } .hanging-punctuation-start { text-indent: -1.42em; } ✘
  33. for (var xlElements = document.querySelectorAll('x-l'), l = xlElements.length, i =

    0; i < l; i++) { xlElements[i].innerHTML = xlElements[i].innerHTML .replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); }
  34. for (var xlElements = document.querySelectorAll('x-l'), l = xlElements.length, i =

    0; i < l; i++) { xlElements[i].innerHTML = xlElements[i].innerHTML .replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); x-l { display: block; padding-left: 1em; text-indent: -1em; position: relative; } .hanging-punctuation-start { position: absolute; right: 100%; text-align: right; }
  35. var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { this.innerHTML =

    this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l', { prototype: XLElementPrototype });
  36. this.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l',

    { prototype: XLElementPrototype }); var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() {
  37. root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l',

    { prototype: XLElementPrototype }); var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var root = this.createShadowRoot();
  38. root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l',

    { prototype: XLElementPrototype }); var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var root = this.createShadowRoot(); x-l { display: block; padding-left: 1em; text-indent: -1em; position: relative; } .hanging-punctuation-start { position: absolute; right: 100%; text-align: right; }
  39. root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l',

    { prototype: XLElementPrototype }); var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var root = this.createShadowRoot(); x-l { display: block; padding-left: 1em; text-indent: -1em; position: relative; } x-l::shadow .hanging-punctuation-start { position: absolute; right: 100%; text-align: right; }
  40. root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l',

    { prototype: XLElementPrototype }); var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var root = this.createShadowRoot(); x-l { display: block; padding-left: 1em; text-indent: -1em; position: relative; } x-l::shadow .hanging-punctuation-start { position: absolute; right: 100%; text-align: right; } It’s been suggested to remove this feature.
  41. root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l',

    { prototype: XLElementPrototype }); var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var root = this.createShadowRoot(); x-l { display: block; padding-left: 1em; text-indent: -1em; position: relative; } x-l /deep/ .hanging-punctuation-start { position: absolute; right: 100%; text-align: right; }
  42. root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l',

    { prototype: XLElementPrototype }); var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var root = this.createShadowRoot(); x-l { display: block; padding-left: 1em; text-indent: -1em; position: relative; } x-l >>> .hanging-punctuation-start { position: absolute; right: 100%; text-align: right; }
  43. root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l',

    { prototype: XLElementPrototype }); var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var root = this.createShadowRoot(); x-l { display: block; padding-left: 1em; text-indent: -1em; position: relative; } x-l >>> .hanging-punctuation-start { position: absolute; right: 100%; text-align: right; } It’s currently disputed whether this combinator should exist.
  44. var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var root

    = this.createShadowRoot(); root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>'); } var XLElement = document.registerElement('x-l', { prototype: XLElementPrototype });
  45. var XLElement = document.registerElement('x-l', { var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback

    = function() { var root = this.createShadowRoot(); root.innerHTML = this.innerHTML.replace(/^([„“’]+)/, '<span class="hanging-punctuation-start">$1</span>') + '<style>.hanging-punctuation-start { position: absolute;\ right: 100%; text-align: right }</style>'; }
  46. var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var result

    = /^([„“’]+)/.exec(this.innerHTML); if (result) { var template = document.querySelector('#hanging-punctuation-start-template'); template.content.querySelector('.hanging-punctuation-start').innerHTML = result[0]; var clone = document.importNode(template.content, true); var root = this.createShadowRoot(); root.innerHTML = this.innerHTML.substr(result[0].length); root.appendChild(clone); } } var XLElement = document.registerElement('x-l', { prototype: XLElementPrototype });
  47. <template id="hanging-punctuation-start-template"> <span class="hanging-punctuation-start"></span> <style> .hanging-punctuation-start { position: absolute; right:

    100%; text-align: right; } </style> </template> hanging-punctuation-start-template.html <link rel="import" href="hanging-punctuation-start-template.html">
  48. var XLElementPrototype = Object.create(HTMLSpanElement.prototype); XLElementPrototype.createdCallback = function() { var result

    = /^([„“’]+)/.exec(this.innerHTML); if (result) { var link = document.querySelector('link[rel="import"]'); var template = link.import.querySelector('#hanging-punctuation-start-template'); template.content.querySelector('.hanging-punctuation-start').innerHTML = result[0]; var clone = document.importNode(template.content, true); var root = this.createShadowRoot(); root.innerHTML = this.innerHTML.substr(result[0].length); root.appendChild(clone); } } var XLElement = document.registerElement('x-l', { prototype: XLElementPrototype });
  49. ✔ ✘ ✘ ✘ Templates HTML Imports Custom Elements Shadow

    DOM ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✘ ✘ ✘ ✔ ✘ ✘ ✘
  50. An escalator can never break, it can only become stairs.

    You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.” —Mitch Hedberg
  51. There’s a common misconception that progressive enhancement means that you’ll

    spend your time dealing with older browsers, but in fact the opposite is true. Putting the basic functionality into place doesn’t take very long at all. And once you’ve done that, you’re free to spend all your time experimenting with the latest and greatest browser technologies, secure in the knowledge that even if they aren’t universally supported yet, that’s okay: you’ve already got your fallback in place. —Jeremy Keith
  52. The key to thinking about web development this way is

    realising that there isn’t one final interface— there could be many, slightly different interfaces depending on the properties and capabilities of any particular user agent at any particular moment. And that’s okay. Websites do not need to look the same in every browser. —Jeremy Keith
  53. Once you truly accept that, it’s an immensely liberating idea.

    Instead of spending your time trying to make websites look the same in wildly varying browsers, you can spend your time making sure that the core functionality of what you’re building works everywhere, while providing the best possible experience for more capable browsers. —Jeremy Keith
  54. <table> <caption>Bruce Springsteen’s studio albums</caption> <thead> <tr> <th>title</th> <th>release date</th>

    </tr> </thead> <tbody> <tr> <td>Greetings from Asbury Park, N.J.</td> <td> <time>1973-01-05</time> </td> </tr>
  55. ▼ <table sortable> <caption>Bruce Springsteen’s studio albums</caption> <thead> <tr> <th>title</th>

    <th sorted>release date</th> </tr> </thead> <tbody> <tr> <td>Greetings from Asbury Park, N.J.</td> <td> <time>1973-01-05</time> </td> </tr>
  56. ▼ <x-sortable-table> <caption>Bruce Springsteen’s studio albums</caption> <thead> <tr> <th>title</th> <th

    sorted>release date</th> </tr> </thead> <tbody> <tr> <td>Greetings from Asbury Park, N.J.</td> <td> <time>1973-01-05</time> </td> </tr> ✘
  57. ▼ <table is="x-sortable-table"> <caption>Bruce Springsteen’s studio albums</caption> <thead> <tr> <th>title</th>

    <th sorted>release date</th> </tr> </thead> <tbody> <tr> <td>Greetings from Asbury Park, N.J.</td> <td> <time>1973-01-05</time> </td> </tr>
  58. <!DOCTYPE html> <html ng-app="analogClockApp"> <head> <meta charset="UTF-8"/> <link rel="stylesheet" href="analog-clock.css"/>

    </head> <body ng-controller="AnalogClockCtrl"> <time analog-clock/> <script src="angular.min.js"></script> <script src="analogClockApp.js"></script> </body> </html>
  59. <div class="face"> <div class="hour-hand" style="transform: rotate({{ 30 * (now |

    date:'h') + (now | date:'m') / 2 }}deg)"></div> <div class="minute-hand" style="transform: rotate({{ 6 * (now | date:'m') }}deg)"></div> <div class="second-hand" style="transform: rotate({{ 6 * (now | date:'s') + (now | date:'m') * 360 + (now | date:'h') * 360 }}deg)"></div> </div> analogClockTemplate.html
  60. .face { width: 250px; height: 250px; position: relative; background-position: left

    top; transform: translate(461px,51px) rotateX(46deg) rotateY(27deg) rotateZ(-38deg); } .hour-hand { width: 4%; height: 35%; background: hsl(0, 0%, 95%); position: absolute; left: 48%; top: 25%; transform-origin: center 71.43%; }
  61. analogClockApp.controller('AnalogClockCtrl', function ($scope, $timeout) { $scope.now = 'Loading…'; var updateTime

    = function () { $timeout(function () { $scope.now = new Date(); updateTime(); }, 1000); }; updateTime(); });
  62. Web Components Hurricane written by Bob Dylan and Jacques Levy

    Blinded by the Light written by Bruce Springsteen Copenhagen Metro Escalators photo by Stig Nygaard, CC-BY-2.0