WebComponents basic concepts

Just the basic concepts about WebComponents.

Transcript

1. WEB COMPONENTS BASIC CONCEPTS by @joridos
2. FULLSTACK DEVELOPER E-SMART
3. WEBCOMPONENTS.ORG THE STANDARD
4. POLYMER-PROJECT.ORG GOOGLE I'M THE FRAMEWORK
5. X-TAGS.ORGMOZILLA ME TOO
6. SPECS Custom Elements Html Imports Templates Shadow Dom
7. CUSTOM ELEMENTS
8. SLIDER BEFORE
10. SLIDER NOW < s l i d e r - c o m p o n e n t > < i m g s r c = " h t t p : / / l o r e m p i x e l . c o m / 1 0 0 0 / 5 0 0 / p e o p l e / 9 " > < i m g s r c = " h t t p : / / l o r e m p i x e l . c o m / 1 0 0 0 / 5 0 0 / p e o p l e / 5 " > < i m g s r c = " h t t p : / / l o r e m p i x e l . c o m / 1 0 0 0 / 5 0 0 / p e o p l e / 6 " > < i m g s r c = " h t t p : / / l o r e m p i x e l . c o m / 1 0 0 0 / 5 0 0 / p e o p l e / 3 " > < i m g s r c = " h t t p : / / l o r e m p i x e l . c o m / 1 0 0 0 / 5 0 0 / p e o p l e / 1 " > < i m g s r c = " h t t p : / / l o r e m p i x e l . c o m / 1 0 0 0 / 5 0 0 / p e o p l e / 2 " > < i m g s r c = " h t t p : / / l o r e m p i x e l . c o m / 1 0 0 0 / 5 0 0 / p e o p l e / 4 " > < / s l i d e r - c o m p o n e n t >
11. HTML IMPORTS
12. REUSABLE COMPONENTS < l i n k r e l = " i m p o r t " h r e f = " b o w e r _ c o m p o n e n t s / s i t e / m e n u - e l e m e n t . h t m l " > < ! - - a n d . . . j u s t u s e - - > < m e n u - e l e m e n t > < / m e n u - e l e m e n t >
13. TEMPLATES
14. MENU TEMPLATE < p o l y m e r - e l e m e n t n a m e = " m e n u - e l e m e n t " > < t e m p l a t e > < u l > < t e m p l a t e r e p e a t = " { { m i n m e n u } } " > < l i > < a h r e f = " { { m . l i n k } } " > { { m . t i t l e } } < / a > < / l i > < / t e m p l a t e > < / u l > < / t e m p l a t e > < / p o l y m e r - e l e m e n t >
15. SHADOW DOM
16. DON'T WORRY ABOUT JAVASCRIPT HOISTING OR CSS CONFLICT
18. VAMOS COMPONENTIZAR!?
19. WebComponents.org CustomElements.io