Web Components

Web Components

The Component model for the web

Fb7edc7cc7a53c903af74d07dcecf9dc?s=128

Revath S Kumar

March 22, 2014
Tweet

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.