Lightweight custom elements

You can find the live example here: http://codepen.io/meckert/pen/kkVOWJ?editors=1000#0

Transcript

1. @themeckert
3. Custom Elements </>
5. Web Components Templates Shadow DOM HTML imports Custom Elements
6. <custom-element attribute="value"></custom-element>
7. <smashing-conf rocks="true"></smashing-conf>
8. http://giphy.com/gifs/animation-circle-of-life-3o7TKC28zKmmSvfWZq Lifecycle
9. Lifecycle of Custom Elements Created Attached to DOM Attribute changed Removed from DOM
10. Code example (v1 syntax)
11. Style custom elements
12. Properties of custom elements - They have a lifecycle - They can have their own scripted behaviour - They can have their own CSS styling
13. How do custom elements help us at AutoScout24?
14. We can provide a library of custom elements to other developers without them having to write a single line of JavaScript code.
15. Icons
16. Icons
17. Tracking
18. Ads
19. Notifications
20. Ajax
21. Browser support?
22. v0
23. v1
25. document register element https://github.com/WebReflection/document-register-element
26. document register element - Very small polyfill (~5KB min+gzip) - Support for IE8, iOS 5.1, Android 2.2
28. custom elements in action
29. @themeckert