The document outlines the Polymer 2.0 codelab, a guide on using the Polymer JavaScript library for creating custom reusable HTML elements through web components. It covers key topics such as the history of Polymer, data binding techniques, and the structure of a Polymer project, including creating and styling elements. The document also provides references to external resources and mini-projects for further learning.

1. Polymer 2.0 Codelab

2. What’s Polymer ?
Web Components
Polymer Summit
Who use Polymer ?
Create a Polymer Project
Custom style & Polymer UI Elements
Create an element
The project
Summary
Starting with Polymer
Data binding

3. What’s Polymer

4. Polymer is a JavaScript library based on web components.
It helps you create custom reusable HTML elements, and use them to build
performant, maintainable apps.
What’s Polymer ?

6. 20172013 2015
It’s first real version is 0.4
Polymer 1.0 announced
2016
Polymer 2.0 announced
First rc Polymer version 2.0
Polymer 3.0 very early
announce, join npm
Polymer version

7. Web Component

8. It allows the creation of reusable widgets or components in web documents and web applications.
Web Components are a set of standards currently being produced by Google engineers as
a W3C specification.
There are 4 standards :
Custom elements, Shadow DOM, HTML Imports and Templates HTML
Whats’ Web Components

9. 7
Custom elements
”
HTML gives us an excellent tool for structuring a document but its
vocabulary is limited to elements the HTML standard defines.
So there is custom elements that gives you the possibility to create new
HTML tags

10. 7
Custom elements
<div>
<div class="tab-pane" id="home" >Home</div>
<div class="tab-pane" id="profile" >Profile</div>
<div class="tab-pane" id="messages" >Messages</div>
<div class="tab-pane" id="settings" >Settings</div>
</div>
Home Profile Messages Settings
From a div soup to ….

11. 7
Custom elements
Home Profile Messages Settings <tab-panels selected="0">
<tab-panel name="home" ></tab-panel>
<tab-panel name="profile" ></tab-panel>
<tab-panel name="messages" ></tab-panel>
<tab-panel name="settings" ></tab-panel>
</tab-panels>
Home Profile Messages Settings
... reusable HTML elements

12. The shadow Dom addresses the DOM tree encapsulation problem. Thus
using shadow will solve problems such as same name for classes and ids
that CSS brings in maintaining your app
Shadow DOM
”

13. Template helps you reuse code, by adding html code embedded in template
tag, thus reusing it
Template
”

14. HTML imports is a way to include html documents in other html documents,
the imports is not limited to markups, you can include CSS, and JS
HTML Import
”

15. Polymer Summit

19. Who uses Polymer ?

21. Starting with Polymer

22. Node.JS
Git
Bower
Polymer-cli
What you need to Install

23. Create a Polymer Project

24. 1.Create a new folder 2.Polymer init 3.Choose polymer-2-application
Create a Polymer Project

25. Create a Polymer Project
-------bower_components
-------src
-------test
-------bower.json
-------polymer.json
-------manifest.json
-------index.html
-------README.md
Polymer-codelab folder structure

26. Create a Polymer Project

27. bower_components Your app has a set of dependencies - chunks of code that it depends on to
work. These dependencies are managed with Bower, a package manager, and
stored in the bower_components folder.
src/ Folder that stores the code we'll write for your app - html, javascript and
css.
test/ A placeholder folder for automated tests. You won't need this since you will
test your app manually.
bower.json Describes your app's dependencies to the package manager, Bower.
polymer.json stores information about your project structure and desired build
configuration(s). It is used by the Polymer CLI as a way to understand the
structure of your application.
manifest.json Stores metadata for your app that helps browsers to load it efficiently.
index.html Your app's landing page.
README.md README files usually describe how to install and use the app. Currently,
yours contains some default content generated by the Polymer CLI.

28. Create a Polymer Project
Serve the application
In the terminal type the following command
polymer serve
The result should look like this

29. Create an element

30. Create an element
------src
|----polymer-codelab-app
|-----polymer-codelab-app.html
src/ folder structure
polymer-codelab-app is your first element !

31. Create an element
In your index.html file
Your element
Import of your
element

32. Create an element
Import polymer
Element template
Your element definition
Your element !

33. Create an element
1.In the folder src/polymer-codelab-app create a new file todo-list-element.html
2. Add the following polymer import
<link rel="import" href="../../bower_components/polymer/polymer.html">
3. Add a dom-module tag with the id set to todo-list-element

34. Create an element
4.within the dom-module tag add the template tag and the script tag
5. In the script tag define a class with the name TodoListElement that extends the Polymer.Element

35. Create an element
6. Add the static is method that returns the name of our element
7. Add the static properties method that returns all the attributes of our element

36. Create an element
8. Let’s add a header to our element with the title My First todo list
9. And now let’s add the line that define our element at the bottom of the script tag
window.customElements.define(TodoListElement.is, TodoListElement);

37. Create an element
10. Your new element should look like this by now
11. Let’s use our new element in the polymer-codelab-app.html

38. Create an element
12. Firstly import our new element
13. Use it in the template of the polymer-codelab-app
WARNING: NEVER FORGET TO IMPORT AN ELEMENT BEFORE USING IT

39. Create an element
14. Use Polymer serve to serve our application

40. Create an element
15. The result should look like this

41. Data binding

42. Data Binding
A data binding connects data from a custom element to a property or attribute of an element
This is a data binding to attribute prop1

43. Data Binding
1.In the todo-list-element.html add the the name property
name:{
type:String,
value:”homeworks”
}
2. Change the <h1>My First todo list</h1> to <h1>[[name]]</h1> and reload the page

44. Data Binding
Bind to a host property
Bind to an attribute
● Double-curly brackets ( {{ }} ) support both upward and downward data flow.
● Double square brackets ( [[ ]] ) are one-way, and support only downward data flow.

45. Data Binding
3. Add a new property todoList (Array) to the todo-list-element
4. In the template tag add the following code beneath the h1 tag
5. In the polymer-codelab-app.html, create a new property a todoListCard (Object)

46. Data Binding
6. In the polymer-codelab-app.html change the following line <todo-list-element></todo-list-element> to
<todo-list-element name="[[todoListCard.name]]" todo-list="[[todoListCard.todoList]]"></todo-list-element>
And reload the page
7. The result should look like this

47. Data Binding
8. Add the style tag on the top of the template tag
9. Add a checkbox to see if a task is complete <input type="checkbox" checked>

48. Data Binding
10. Your element should look like this by the way

49. Data Binding
11. Reload the page
12. Change in polymer-codelab-app.html the todoList property of the todoListCard object to see if a task is
complete

50. Data Binding
13. Update the dom-repeat template of the todo-list-element

51. Data Binding
14. Reload the page
What if the todoList is still empty ?

52. Data Binding
We use the dom-if to ensure that in the case of empty array we show the user the message
“The list is empty”
15. Add the following code at the end of the template tag in todo-list-element.html
16. Add the following line to polymer-codelab-app.html
<todo-list-element name="Chores" todo-list="[]"></todo-list-element>

53. Data Binding
17.Reload the page, the result should look like this

54. Custom Style

55. Custom Style
Polymer provide custom CSS properties that you can use to style the appearance of the element in your
application.
you can use custom properties to build an interface for the users of your element so they can style it.

56. Custom Style
1. In the terminal write the following command line
bower install PolymerElements/paper-styles --save
It will add paper-styles in the bower_components folder and add paper-styles to your dependencies in the
bower.json file
2. Import the color.html
3. Open todo-list-element.html

59. Custom Style
4. Wrap your element template in a div
5. Add the following style to your div in the style tag
Custom style with default

60. Custom Style
6. Go back to polymer-codelab-app.html and add the following lines in the style tag
7. Reload the page, your app should look like this

61. Custom Style
8. In the todo-list-element.html add a new property important (boolean) this property explain whether the
todoList is important
An important todo-list-elememt must have the background-color set to a red color
To achieve it we use custom css properties and observers

62. Custom Style
9. Add an observer on important property
10. Define the method _importantChanged so that when important is true we change the
--todo-list-element-background-color to paper-red-500

63. Custom Style
11. Open polymer-codelab-app.html and add important to the second todo-list-element tag
12. Reload the page, your page should look like this

64. Custom Style
Now let’s add some shadow effect on the todo-list-element
13. Import the shadow.html
14.add a class to the div wrapping
15. Now let’s apply some shadow

65. Custom Style
16.Reload the page…..well this is some shadow

66. webcomponents.org

68. And this is awesome !

69. Custom Style
The element is still not really that attractive. So we will use some polymer element
1. Install paper-checkbox, in the terminal with the following line
bower install --save PolymerElements/paper-checkbox
2. Import the paper-checkbox in todo-list-element.html
3. Change the following lines of code

70. Custom Style
4. Reload the page, your page should look like this

71. Custom Style
5. Add the following style to the paper-checkbox
6. Relaod the page

72. Custom Style
7. Install the paper-item with the following command line
8. Import the paper-item with the following line
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
9. Change the div tag to the paper-item tag and add the style paper-item{color:#FFF;}

73. Custom Style
Reload the page

74. Custom Style
10. Install paper-card with the following command line bower install –save PolymerElements/paper-card
11. Import the paper-card in the todo-list-element.html
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
12. Change the following lines of code and delete .container style

75. Custom Style
13. Change the div in the style tag to paper-card and add
--paper-card-header-color:#FFF;

76. Custom Style

77. The project :D

78. The project
An event app for the DevFest Algiers event
The app should show:
1. Event information
2. The event Agenda
3. The speaker of the d-day
4. Preview of last edition
5. Have a button to register for the event
6. About page
7. Contact us page

80. You can find code related to :
Create a polymer project in
https://github.com/amandaSalander/bookworm-training-polymer2.0/tree/master/step_1
Create an element
https://github.com/amandaSalander/bookworm-training-polymer2.0/tree/master/step_2
Data binding and data binding helpers
https://github.com/amandaSalander/bookworm-training-polymer2.0/tree/master/step_3
Custom styles
https://github.com/amandaSalander/bookworm-training-polymer2.0/tree/master/step_4
Using Polymer UI Elements
https://github.com/amandaSalander/bookworm-training-polymer2.0/tree/master/step_5

81. Find it interesting ?
Polymer Project
http://polymer-project.org/
Webcomponents.org
https://www.webcomponents.org/
The full codelab step by step
https://github.com/amandaSalander/bookworm-training-polymer2.0
The small little mini project
https://github.com/amandaSalander/bookworm-training-polymer2.0-devfest
Polymer Summit Copenhagen 2017
https://goo.gl/ZPRpEj