Slides for talk given at the jQuery Conference San Diego in 2014

1. Real World
Web Components
Jarrod Overson
jarrodoverson.com

2. a.k.a.
Web Components
outside of Google

3. What are
Web Components?

4. Web Components
Templates
Custom Elements
Shadow DOM
HTML Imports
(and more…)

5. HTML Templates
( traditionally )
<script type="text/x-template">
<h1>Hello World!</h1>
</script>
<div style="display:none">
<p>I am cloned over and over!</p>
</div>

6. HTML Templates
now(ish)!
<template>
<p>I don’t exist yet!</p>
</template>

7. Benefits
1. Inert
2. No .innerHTML
3. It makes sense

8. Custom Elements
❯ MyEl = document.registerElement('my-el');
function my-el() { [native code] }
!
❯ var el = new MyEl();
undefined
!
❯ el.outerHTML;
"<my-el></my-el>"

9. OH NO!
Not XML!

10. Benefits
1. Legit new elements
2. Can inherit from the old
3. Make your own semantics

11. Shadow DOM
❯ outer = document.createElement('div');
<div></div>
!
❯ inner = document.createElement('p')
<p></p>
!
❯ inner.innerText = 'Hello jqcon!';
"Hello jqcon!"
!
❯ outer.createShadowRoot().appendChild(inner);
<p>Hello jqcon!</p>
!
❯ document.body.appendChild(outer);
<div></div>

12. Shadow DOM

13. Shadow DOM

14. Shadow DOM

15. Shadow DOM

16. Benefits
1. Proper encapsulation
2. Style boundaries
3. You can use IDs again!
❯ document.querySelector(‘#sameId’);
!
❯ el.shadowRoot.querySelector(‘#sameId’);

17. HTML Imports
<link rel=“import" href="external.html">

18. Benefits
1. It gets stuff
out of your stuff

19. Support for each
<template>
Shadow DOM
registerElement
HTML Imports

20. Wat

21. Why am I even here?

22. Why even bother with
Web Components?

23. Web Components
are part of a
fundamental shift in how
the web evolves

24. The web learns
best from itself
getElementsBySelector
CoffeeScript
Everything CSS ever
From what you do

25. Spec writers make
things possible
The community’s job is
to make them easy

26. oi jQuery,
tip o’ the hat

27. Ok, so how do I use
Web Components?

29. Polyfills
for emerging features
and a framework
for building upon them

30. <polymer-element name="hello-world">
<script>
Polymer('hello-world', {});
</script>
</polymer-element>

31. vs Native
proto = Object.create(HTMLElement.prototype);
HelloWorld = document.registerElement(
‘hello-world', {
prototype : proto
});
What happened to <element>?

32. <polymer-element name="hello-world">
<template>
<div>Hello World</div>
</template>
<script>
Polymer('hello-world', {});
</script>
</polymer-element>

33. vs Native
<template id="hw-template">
<div>Hello World</div>
</template>
!
<script>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var template = document.getElementById('hw-template');
var clone = document.importNode(template.content, true);
this.createShadowRoot().appendChild(clone);
};
HelloWorld = document.registerElement(
'hello-world',
{
prototype : proto
}
);
</script>

34. Yay!

35. “
”
- polymer-project.org

36. Boo!

37. So what’s the reality?

38. Parent with
crappy, leaky
styles
Sexy scoped
web component
chrome 34 with flags turned on

39. IE 10 with defaults

41. firefox 26.0 with defaults

42. chrome 32 with defaults

44. The reality?

45. It’s largely there
After all,
the component did render.
and you do
get useful lifecycle methods
and Polymer does
give you sexy data binding

46. Shadow DOM is not
very polyfillable.

47. Why would I use
Web Components
when I have
directives?

48. o!
em
D
How do
and
work together?

49. Web Components
are useful
and important.

50. The bleeding edge
is accessible
but you need excuses to use it

51. 1. Prototypes

52. Make your prototypes
with the bleeding edge
Attach a cost to backwards compatibility.

53. 2. Internal Tools

54. Internally,
browser compatibility
doesn’t need to matter.
IE 8 doesn’t exist when you will it away.

55. 3. Native Apps

56. Do you really need
a web server?

57. Or do you just love
web tech?

58. o!
em
D
1. node-webkit
2. brackets-shell
3. CEF
4. Packaged Apps

59. Jarrod Overson
@jsoverson
jarrod@jsoverson.com
jsoverson.com
jsoverson.com/google+
jsoverson.com/linkedin
jsoverson.com/github
jsoverson.com/twitter