├── .editorconfig
├── .gitignore
├── README.md
├── bower.json
├── index.html
└── my-element.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 | # <my-repo>
 2 | 
 3 | > A bare minimum custom element starter-kit using [VanillaJS](http://vanilla-js.com/).
 4 | >
 5 | > Like [Yeoman](http://yeoman.io/)? Use the [generator-element](https://www.npmjs.org/package/generator-element) instead.
 6 | >
 7 | > Looking for a working example? Check [hello-world-element](https://github.com/webcomponents/hello-world-element).
 8 | 
 9 | ## Demo
10 | 
11 | [Check it live!](http://my-user.github.io/my-repo)
12 | 
13 | ## Install
14 | 
15 | Install the component using [Bower](http://bower.io/):
16 | 
17 | ```sh
18 | $ bower install my-repo --save
19 | ```
20 | 
21 | Or [download as ZIP](https://github.com/my-user/my-repo/archive/master.zip).
22 | 
23 | ## Usage
24 | 
25 | 1. Import polyfill:
26 | 
27 |     ```html
28 |     <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
29 |     ```
30 | 
31 | 2. Import custom element:
32 | 
33 |     ```html
34 |     <link rel="import" href="bower_components/my-repo/my-element.html">
35 |     ```
36 | 
37 | 3. Start using it!
38 | 
39 |     ```html
40 |     <my-element></my-element>
41 |     ```
42 | 
43 | ## Options
44 | 
45 | Attribute     | Options     | Default      | Description
46 | ---           | ---         | ---          | ---
47 | `foo`         | *string*    | `bar`        | Lorem ipsum dolor.
48 | 
49 | ## Methods
50 | 
51 | Method        | Parameters   | Returns     | Description
52 | ---           | ---          | ---         | ---
53 | `unicorn()`   | None.        | Nothing.    | Magic stuff appears.
54 | 
55 | ## Events
56 | 
57 | Event         | Description
58 | ---           | ---
59 | `onsomething` | Triggers when something happens.
60 | 
61 | ## Development
62 | 
63 | In order to run it locally you'll need to fetch some dependencies and a basic server setup.
64 | 
65 | 1. Install [bower](http://bower.io/) & [polyserve](https://npmjs.com/polyserve):
66 | 
67 |     ```sh
68 |     $ npm install -g bower polyserve
69 |     ```
70 | 
71 | 2. Install local dependencies:
72 | 
73 |     ```sh
74 |     $ bower install
75 |     ```
76 | 
77 | 3. Start development server and open `http://localhost:8080/components/my-repo/`.
78 | 
79 |     ```sh
80 |     $ polyserve
81 |     ```
82 | 
83 | ## History
84 | 
85 | For detailed changelog, check [Releases](https://github.com/my-user/my-repo/releases).
86 | 
87 | ## License
88 | 
89 | [MIT License](http://opensource.org/licenses/MIT)
90 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "my-repo",
 3 |     "version": "0.0.0",
 4 |     "description": "My awesome Custom Element",
 5 |     "license": "MIT",
 6 |     "main": "my-element.html",
 7 |     "keywords": [
 8 |         "web-components"
 9 |     ],
10 |     "ignore": [
11 |         "**/.*",
12 |         "bower_components"
13 |     ],
14 |     "dependencies": {
15 |         "webcomponentsjs": "^0.7.2"
16 |     }
17 | }
18 | 


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


--------------------------------------------------------------------------------
/my-element.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Creates MyElements extending HTML Element
 3 |     class MyElement extends HTMLElement {
 4 |         // Fires when an instance of the element is created or updated
 5 |         constructor() {
 6 |             super();
 7 |         }
 8 | 
 9 |         // Fires when an instance was inserted into the document
10 |         connectedCallback() {
11 |         }
12 | 
13 |         // Fires when an instance was removed from the document
14 |         disconnectedCallback() {
15 |         }
16 | 
17 |         // Fires when an attribute was added, removed, or updated
18 |         attributeChangedCallback(attrName, oldVal, newVal) {
19 |         }
20 | 
21 |         // Fires when an element is moved to a new document
22 |         adoptedCallback() {
23 |         }
24 |     }
25 | 
26 |     // Registers custom element
27 |     window.customElements.define('my-element', MyElement);
28 | </script>
29 | 


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