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


/.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 [VanillaJS](http://vanilla-js.com/).
 4 | >
 5 | > Looking for a boilerplate? Check [element-boilerplate](https://github.com/webcomponents/element-boilerplate).
 6 | 
 7 | ## Demo
 8 | 
 9 | [Check it live!](http://webcomponents.github.io/hello-world-element)
10 | 
11 | ## Install
12 | 
13 | Install the component using [Bower](http://bower.io/):
14 | 
15 | ```sh
16 | $ bower install hello-world-element --save
17 | ```
18 | 
19 | Or [download as ZIP](https://github.com/webcomponents/hello-world-element/archive/master.zip).
20 | 
21 | ## Usage
22 | 
23 | 1. Import polyfill:
24 | 
25 |     ```html
26 |     <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
27 |     ```
28 | 
29 | 2. Import custom element:
30 | 
31 |     ```html
32 |     <link rel="import" href="bower_components/hello-world-element/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-element/`.
64 | 
65 |     ```sh
66 |     $ polyserve
67 |     ```
68 | 
69 | ## History
70 | 
71 | For detailed changelog, check [Releases](https://github.com/webcomponents/hello-world-element/releases).
72 | 
73 | ## License
74 | 
75 | [MIT License](http://webcomponentsorg.mit-license.org/) © WebComponents.org
76 | 


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


--------------------------------------------------------------------------------
/hello-world.html:
--------------------------------------------------------------------------------
 1 | <!-- Defines element markup -->
 2 | <template>
 3 |     <p>Hello <strong></strong> :)</p>
 4 | </template>
 5 | 
 6 | <script>
 7 | (function(window, document, undefined) {
 8 |     // Refers to the "importer", which is index.html
 9 |     var thatDoc = document;
10 | 
11 |     // Refers to the "importee", which is src/hello-world.html
12 |     var thisDoc =  (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
13 | 
14 |     // Gets content from <template>
15 |     var template = thisDoc.querySelector('template').content;
16 | 
17 |     // Creates an object based in the HTML Element prototype
18 |     var MyElementProto = Object.create(HTMLElement.prototype);
19 | 
20 |     // Creates the "who" attribute and sets a default value
21 |     MyElementProto.who = 'World';
22 | 
23 |     // Fires when an instance of the element is created
24 |     MyElementProto.createdCallback = function() {
25 |         // Creates the shadow root
26 |         var shadowRoot = this.createShadowRoot();
27 | 
28 |         // Adds a template clone into shadow root
29 |         var clone = thatDoc.importNode(template, true);
30 |         shadowRoot.appendChild(clone);
31 | 
32 |         // Caches <strong> DOM query
33 |         this.strong = shadowRoot.querySelector('strong');
34 | 
35 |         // Checks if the "who" attribute has been overwritten
36 |         if (this.hasAttribute('who')) {
37 |             var who = this.getAttribute('who');
38 |             this.setWho(who);
39 |         }
40 |         else {
41 |             this.setWho(this.who);
42 |         }
43 |     };
44 | 
45 |     // Fires when an attribute was added, removed, or updated
46 |     MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
47 |         if (attr === 'who') {
48 |             this.setWho(newVal);
49 |         }
50 |     };
51 | 
52 |     // Sets new value to "who" attribute
53 |     MyElementProto.setWho = function(val) {
54 |         this.who = val;
55 | 
56 |         // Sets "who" value into <strong>
57 |         this.strong.textContent = this.who;
58 |     };
59 | 
60 |     // Registers <hello-world> in the main document
61 |     window.MyElement = thatDoc.registerElement('hello-world', {
62 |         prototype: MyElementProto
63 |     });
64 | })(window, document);
65 | </script>
66 | 


--------------------------------------------------------------------------------
/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.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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "private": true,
 3 |     "devDependencies": {
 4 |         "grunt": "~0.4.1",
 5 |         "grunt-cli": "~0.1.9",
 6 |         "grunt-contrib-connect": "~0.9.0",
 7 |         "grunt-gh-pages": "~0.9.1"
 8 |     }
 9 | }
10 | 


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