Web Components

The Component model for the web

Transcript

1. <WEB-COMPONENTS> The component model for the Web @revathskumar
2. ABOUT Rubyist / JavaScripter Yeoman team member Works at @whatznear Blog at blog.revathskumar.com Twitter/Github ­ @revathskumar +RevathSKumar
3. ITS A JOURNEY INTO THE FUTURE
4. CONSISTS 4 PIECES Templates Custom Elements Shadow DOM Imports
5. TEMPLATES markup intended to be used later
6. WHAT WE DO NOW? < s c r i p t i d = " i n d e x T e m p l a t e " t y p e = " t e x t / t e m p l a t e " > < / s c r i p t > < t r > < t d > < i m g s r c = " / i m a g e / d e l e t e . p n g " / > < / t d > < / t r > < / p >
7. WHAT IN FUTURE? < t e m p l a t e i d = " i n d e x T e m p l a t e " > < t r > < t d > < i m g s r c = " / i m a g e / d e l e t e . p n g " / > < / t d > < / t r > < / t e m p l a t e > v a r h o l d e r = d o c u m e n t . g e t E l e m e n t B y I d ( ' h o l d e r ' ) ; v a r t e m p l a t e = d o c u m e n t . g e t E l e m e n t B y I d ( ' i n d e x T e m p l a t e ' ) ; t e m p l a t e C o n t e n t = 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 ) ; h o l d e r . a p p e n d C h i l d ( t e m p ) ;
8. CONTENTS IN < T E M P L A T E > ARE Parsed but not rendered images won't be downloaded Scripts are not processes until you actually use it.
9. CAN I USE?
10. CUSTOM ELEMENTS new type of DOM elements which can be defined by authors.
11. HOW TO DEFINE ONE? document.registerElement v a r p = O b j e c t . c r e a t e ( H T M L B u t t o n E l e m e n t . p r o t o t y p e ) ; v a r m y B t n = d o c u m e n t . r e g i s t e r E l e m e n t ( ' m y - b t n ' , { e x t e n d s : ' b u t t o n ' , p r o t o t y p e : p } ) ;
12. METHODS v a r p = O b j e c t . c r e a t e ( H T M L B u t t o n E l e m e n t . p r o t o t y p e ) ; p . s o m e M e t h o d = f u n c t i o n ( ) { / / b l a h b l a h } v a r m y B t n = d o c u m e n t . r e g i s t e r E l e m e n t ( ' m y - b t n ' , { e x t e n d s : ' b u t t o n ' , p r o t o t y p e : p } ) ;
13. LIFECYCLE CALLBACKS createdCallback ­­­> after created attachedCallback ­­­> after inserted to document detachedCallback ­­­> after removed from document attributeChangedCallback ­­­> when an attribute added / removed / changed
14. USING IN MARKUP If using existsing tag < b u t t o n i s = ' m y - b t n ' > < / b u t t o n > If not related to any existing tag < m y - b t n > < / m y - b t n >
15. EXTENDING v a r p = O b j e c t . c r e a t e ( H T M L B u t t o n E l e m e n t . p r o t o t y p e ) ; v a r m y B t n = d o c u m e n t . r e g i s t e r E l e m e n t ( ' m y - b t n ' , { e x t e n d s : ' b u t t o n ' , p r o t o t y p e : p } ) ; v a r m b = n e w m y B t n ( ) ; v a r a n o t h e r B t n = d o c u m e n t . r e g i s t e r E l e m e n t ( ' a n o t h e r - b t n ' , { p r o t o t y p e : m b } ) ;
16. SHADOW DOM adjunct tree of DOM nodes
17. FEATURES can be associated with an element, but do not appear as child nodes subtrees form their own scope contains IDs and styles that overlap with IDs and styles in the document separate from the document
18. CAN I USE?
19. SHADOW HOST An element with shadow DOM Shadow DOM can be applied to an element by c r e a t e S h a d o w R o o t the content of the shadow DOM is rendered instead the element's children
20. INSERTION POINTS host's children are displayed at the insertion point use a element to specify insertion point. does not change where the elements appear in DOM "select" attribute lets you choose which children appear at which insertion point let you reordered or selectively omit rendering children
21. < ! - - d o c u m e n t - - > < d i v i d = " n e w s " > < h 1 > G o o d d a y f o r k i t t e n s < / h 1 > < d i v c l a s s = " b r e a k i n g " > K i t t e n r e s c u e d f r o m t r e e < / d i v > < d i v > A r e a k i t t e n " a d o r a b l e " & m d a s h ; o w n e r < / d i v > < d i v c l a s s = " b r e a k i n g " > J i g g l e d p i e c e o f y a r n d e r a i l s k i t t e n k o n g r e s s < / d i v > < / d i v > < ! - - # n e w s ' s h a d o w - - > < t e m p l a t e i d = " t " > < c o n t e n t s e l e c t = " h 1 " > < / c o n t e n t > < d i v i d = " t i c k e r " > < c o n t e n t i d = " s t o r i e s " > < / c o n t e n t > < / d i v > < / t e m p l a t e >
22. / / S e t u p s h a d o w D O M v a r n e w s = d o c u m e n t . q u e r y S e l e c t o r ( ' # n e w s ' ) ; v a r r = n e w s . c r e a t e S h a d o w R o o t ( ) ; v a r t = d o c u m e n t . q u e r y S e l e c t o r ( ' # t ' ) ; r . a p p e n d C h i l d ( t . c o n t e n t . c l o n e N o d e ( t r u e ) ) ; < d i v i d = " n e w s " > < h 1 > G o o d d a y f o r k i t t e n s < / h 1 > < d i v i d = " t i c k e r " > < d i v c l a s s = " b r e a k i n g " > K i t t e n r e s c u e d f r o m t r e e < / d i v > < d i v > A r e a k i t t e n " a d o r a b l e " & m d a s h ; o w n e r < / d i v > < d i v c l a s s = " b r e a k i n g " > J i g g l e d p i e c e o f y a r n d e r a i l s k i t t e n k o n g r e s s < / d i v > < / d i v > < / d i v >
23. CAN I USE?
24. IMPORTS Load custom elements from external files
25. Load using tag < l i n k r e l = " i m p o r t " h r e f = " g o o d i e s . h t m l " > DOM available to script through the import property
26. THANK YOU.