https://github.com/webcomponents/hello-world-element
Web Component example using VanillaJS
https://github.com/webcomponents/hello-world-element
Last synced: 5 months ago
JSON representation
Web Component example using VanillaJS
- Host: GitHub
- URL: https://github.com/webcomponents/hello-world-element
- Owner: webcomponents
- Archived: true
- Created: 2014-04-06T21:28:03.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2018-11-15T08:03:59.000Z (over 7 years ago)
- Last Synced: 2025-09-24T12:20:22.365Z (6 months ago)
- Language: HTML
- Homepage: http://webcomponents.github.io/hello-world-element
- Size: 794 KB
- Stars: 151
- Watchers: 16
- Forks: 38
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-webcomponents - Using VanillaJS
- awesome-custom-elements - Using VanillaJS
README
# <hello-world>
> A Web Component example using [VanillaJS](http://vanilla-js.com/).
>
> Looking for a boilerplate? Check [element-boilerplate](https://github.com/webcomponents/element-boilerplate).
## Demo
[Check it live!](http://webcomponents.github.io/hello-world-element)
## Install
Install the component using [Bower](http://bower.io/):
```sh
$ bower install hello-world-element --save
```
Or [download as ZIP](https://github.com/webcomponents/hello-world-element/archive/master.zip).
## Usage
1. Import polyfill:
```html
```
2. Import custom element:
```html
```
3. Start using it!
```html
```
## Options
Attribute | Options | Default | Description
--- | --- | --- | ---
`who` | *string* | `World` | Who do you want to say hello?
## Development
In order to run it locally you'll need to fetch some dependencies and a basic server setup.
1. Install [bower](http://bower.io/) & [polyserve](https://npmjs.com/polyserve):
```sh
$ npm install -g bower polyserve
```
2. Install local dependencies:
```sh
$ bower install
```
3. Start development server and open `http://localhost:8080/components/hello-world-element/`.
```sh
$ polyserve
```
## History
For detailed changelog, check [Releases](https://github.com/webcomponents/hello-world-element/releases).
## License
[MIT License](http://webcomponentsorg.mit-license.org/) © WebComponents.org