WEB COMPONENTS BASIC CONCEPTS by @joridos 

FULLSTACK DEVELOPER E-SMART 

WEBCOMPONENTS.ORG THE STANDARD 

POLYMER-PROJECT.ORG GOOGLE I'M THE FRAMEWORK 

X-TAGS.ORGMOZILLA ME TOO 

SPECS Custom Elements Html Imports Templates Shadow Dom 

CUSTOM ELEMENTS 

SLIDER BEFORE 

No content

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 > 

HTML IMPORTS 

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 > 

TEMPLATES 

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 > 

SHADOW DOM 

DON'T WORRY ABOUT JAVASCRIPT HOISTING OR CSS CONFLICT 

No content

VAMOS COMPONENTIZAR!? 

WebComponents.org CustomElements.io