├── .editorconfig
├── .gitignore
├── README.md
├── bower.json
├── hello-world.html
└── index.html


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # http://editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | [*]
 8 | # Change these settings to your own preference
 9 | indent_style = space
10 | indent_size = 4
11 | 
12 | # We recommend you to keep these unchanged
13 | end_of_line = lf
14 | charset = utf-8
15 | trim_trailing_whitespace = true
16 | insert_final_newline = true
17 | 
18 | [*.md]
19 | trim_trailing_whitespace = false
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # <hello-world>
 2 | 
 3 | > A Web Component example using [Polymer](http://www.polymer-project.org/).
 4 | >
 5 | > Looking for a boilerplate? Check [polymer-boilerplate](https://github.com/webcomponents/polymer-boilerplate).
 6 | 
 7 | ## Demo
 8 | 
 9 | [Check it live!](http://webcomponents.github.io/hello-world-polymer)
10 | 
11 | ## Install
12 | 
13 | Install the component using [Bower](http://bower.io/):
14 | 
15 | ```sh
16 | $ bower install hello-world-polymer --save
17 | ```
18 | 
19 | Or [download as ZIP](https://github.com/webcomponents/hello-world-polymer/archive/master.zip).
20 | 
21 | ## Usage
22 | 
23 | 1. Import polyfill:
24 | 
25 |     ```html
26 |     <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
27 |     ```
28 | 
29 | 2. Import custom element:
30 | 
31 |     ```html
32 |     <link rel="import" href="bower_components/hello-world-polymer/hello-world.html">
33 |     ```
34 | 
35 | 3. Start using it!
36 | 
37 |     ```html
38 |     <hello-world></hello-world>
39 |     ```
40 | 
41 | ## Options
42 | 
43 | Attribute  | Options                   | Default             | Description
44 | ---        | ---                       | ---                 | ---
45 | `who`      | *string*                  | `World`             | Who do you want to say hello?
46 | 
47 | ## Development
48 | 
49 | In order to run it locally you'll need to fetch some dependencies and a basic server setup.
50 | 
51 | 1. Install [bower](http://bower.io/) & [polyserve](https://npmjs.com/polyserve):
52 | 
53 |     ```sh
54 |     $ npm install -g bower polyserve
55 |     ```
56 | 
57 | 2. Install local dependencies:
58 | 
59 |     ```sh
60 |     $ bower install
61 |     ```
62 | 
63 | 3. Start development server and open `http://localhost:8080/components/hello-world-polymer/`.
64 | 
65 |     ```sh
66 |     $ polyserve
67 |     ```
68 | 
69 | ## History
70 | 
71 | For detailed changelog, check [Releases](https://github.com/webcomponents/hello-world-polymer/releases).
72 | 
73 | ## License
74 | 
75 | [MIT License](http://webcomponentsorg.mit-license.org/) © WebComponents.org
76 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "hello-world-polymer",
 3 |     "version": "1.0.0",
 4 |     "description": "Web Component example using Polymer",
 5 |     "authors": [
 6 |         "WebComponents.org"
 7 |     ],
 8 |     "license": "MIT",
 9 |     "main": "hello-world.html",
10 |     "keywords": [
11 |         "polymer",
12 |         "web-components"
13 |     ],
14 |     "ignore": [
15 |         "**/.*",
16 |         "bower_components"
17 |     ],
18 |     "dependencies": {
19 |         "polymer": "Polymer/polymer#^1.0.0"
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/hello-world.html:
--------------------------------------------------------------------------------
 1 | <!-- Imports polymer -->
 2 | <link rel="import" href="../polymer/polymer.html">
 3 | 
 4 | <!-- Defines element markup -->
 5 | <dom-module id="hello-world">
 6 |     <template>
 7 |         <p>Hello <strong>{{who}}</strong> :)</p>
 8 |     </template>
 9 | </dom-module>
10 | 
11 | <!-- Registers custom element -->
12 | <script>
13 | Polymer({
14 |     is: 'hello-world',
15 |     properties: {
16 |         who: {
17 |             type: String,
18 |             value: 'World'
19 |         }
20 |     }
21 | });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 
 5 |     <meta charset="utf-8">
 6 |     <title>&lt;hello-world&gt;</title>
 7 | 
 8 |     <!-- Imports polyfill -->
 9 |     <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
10 | 
11 |     <!-- Imports custom element -->
12 |     <link rel="import" href="hello-world.html">
13 | 
14 | </head>
15 | <body>
16 | 
17 |     <!-- Runs custom element -->
18 |     <hello-world who="Unicorn"></hello-world>
19 | 
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------