Web Components

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.