Web Components

An introduction to web components

Transcript

1. WEB COMPONENTS AKA magic!
2. HELLO I'm Ruth UX, Design, Front End Dev @rumyra Work in The Lab at O2
3. BUT WHAT IS A WEB COMPONENT? Sandboxed Reuseable DOM Structure You what now?
4. IMAGINE IF YOU WILL HTML CSS Result Edit on < d i v c l a s s = " t w e l v e - d e v s - n a v " > < d i v c l a s s = " b a d g e - o u t e r " > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b >
5. < t w e l v e - d e v s - l o g o > < / t w e l v e - d e v s - l o g o >
6. TEMPLATES < t e m p l a t e > Content to be used later Parsed but inert
7. < t e m p l a t e i d = " t w e l v e - d e v s - n a v " > < d i v c l a s s = " t w e l v e - d e v s - n a v " > < d i v c l a s s = " b a d g e - o u t e r " > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < b > < / b > < / d i v > < n a v > < a h r e f = " / h o m e " > < s p a n > 1 < / s p a n > < s p a n > 2 < / s p a n > < s p a n > d < / s p a n > < s p a n > e < / s p a n > < s p a n > v < / s p a n > < s p a n > s < / s p a n > < s p a n > . < / s p a n > < s p a n > c < / s p a n > < s p a n > o < / s p a n > < s p a n > . < / s p a n > < s p a n > u < / s p a n > < s p a n > k < / s p a n > < / a > < a h r e f = " / w o r k s h o p s " >
8. CONTENT API / / t a r g e t t e m p l a t e v a r l o g o T e m p l a t e = d o c u m e n t . q u e r y S e l e c t o r ( ' # t w e l v e - d e v s - l o g o ' ) ; / / g e t & c l o n e c o n t e n t v a r l o g o C o n t e n t = l o g o T e m p l a t e . c o n t e n t . c l o n e N o d e ( t r u e ) ; / / a p p e n d t o s e e n e l e m e n t d o c u m e n t . q u e r y S e l e c t o r ( ' # s h o w - c o n t e n t ' ) . a p p e n d C h i l d ( l o g o C o n t e n t ) ;
9. THE SHADOW DOM
10. MAGIC
11. WE NEED Shadow Host Shadow Root / / g e t l o g o m a r k u p v a r l o g o T e m p l a t e = d o c u m e n t . q u e r y S e l e c t o r ( ' # t w e l v e - d e v s - l o g o ' ) ; / / c l o n e i t ( c o n t e n t a p i ) v a r l o g o C o n t e n t = l o g o T e m p l a t e . c o n t e n t . c l o n e N o d e ( t r u e ) ; / / c r e a t e s h a d o w h o s t v a r s h a d o w H o s t = d o c u m e n t . q u e r y S e l e c t o r ( ' # s h o w - c o n t e n t ' ) ; / / c r e a t e s h a d o w r o o t v a r s h a d o w R o o t = s h a d o w H o s t . w e b k i t C r e a t e S h a d o w R o o t ( ) ; / / a d d m a r k u p t o r o o t s h a d o w R o o t . a p p e n d C h i l d ( l o g o C o n t e n t ) ;
12. HANG ON A MINUTE... ^^ Shadow Boundary
13. < d i v i d = " l o g o " >
14. CUSTOM ELEMENTS FTW! Enable Chrome flag 'Experimental Web Platform Features' Creates a prototype Register the element
15. CREATE HTML ELEMENT PROTOTYPE v a r t w e l v e D e v s N a v P r o t o = O b j e c t . c r e a t e ( H T M L E l e m e n t . p r o t o t y p e ) ;
16. CREATE CALLBACK c r e a t e C a l l b a c k method t w e l v e D e v s N a v P r o t o . c r e a t e d C a l l b a c k = f u n c t i o n ( ) { v a r s h a d o w R o o t = t h i s . w e b k i t C r e a t e S h a d o w R o o t ( ) ; s h a d o w R o o t . a p p e n d C h i l d ( l o g o C o n t e n t ) ; } ;
20. I wrote it all down http://12devsofxmas.co.uk/2013/12/day-4- lets-make-a-web-component/ Mozilla Brick Google Polymer Mokey Patch Polyfill THANK YOU ALL THE INFO! This is going to change