• This repository has been archived on 26/Sep/2022
  • Stars
    star
    271
  • Rank 151,717 (Top 3 %)
  • Language
    HTML
  • Created over 10 years ago
  • Updated almost 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Fork this repo if you want to start your own Web Component using VanillaJS

<my-repo>

A bare minimum custom element starter-kit using VanillaJS.

Like Yeoman? Use the generator-element instead.

Looking for a working example? Check hello-world-element.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install my-repo --save

Or download as ZIP.

Usage

  1. Import polyfill:

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  2. Import custom element:

    <link rel="import" href="bower_components/my-repo/my-element.html">
  3. Start using it!

    <my-element></my-element>

Options

Attribute Options Default Description
foo string bar Lorem ipsum dolor.

Methods

Method Parameters Returns Description
unicorn() None. Nothing. Magic stuff appears.

Events

Event Description
onsomething Triggers when something happens.

Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

  1. Install bower & polyserve:

    $ npm install -g bower polyserve
  2. Install local dependencies:

    $ bower install
  3. Start development server and open http://localhost:8080/components/my-repo/.

    $ polyserve

History

For detailed changelog, check Releases.

License

MIT License

More Repositories

1

webcomponentsjs

A suite of polyfills supporting the HTML Web Components specs
HTML
3,874
star
2

custom-elements-everywhere

Custom Element + Framework Interoperability Tests.
JavaScript
1,169
star
3

polyfills

Web Components Polyfills
HTML
1,137
star
4

gold-standard

1,029
star
5

webcomponents.github.io

WebComponents.org is where community-members document Web Components best practices
JavaScript
734
star
6

custom-elements

A polyfill for HTML Custom Elements v1
HTML
455
star
7

polymer-boilerplate

Fork this repo if you want to start your own Web Component using Polymer
HTML
369
star
8

webcomponents.org

Home of the web components community
TypeScript
366
star
9

custom-elements-manifest

A file format for describing custom elements
TypeScript
365
star
10

react-integration

Converts web components into React components so that you can use them as first class citizens in your React components.
JavaScript
306
star
11

shadycss

HTML
197
star
12

shadydom

ShadowDOM v1 shim
HTML
162
star
13

hello-world-element

Web Component example using VanillaJS
HTML
151
star
14

chrome-webcomponents-extension

Google Chrome extension to identify all Custom Elements used on a site
JavaScript
81
star
15

html-imports

HTML Imports polyfill
HTML
73
star
16

angular-interop

A demo of interoperability between Polymer and AngularJS
TypeScript
72
star
17

template

Minimal polyfill for <template>
HTML
69
star
18

hello-world-polymer

Web Component example using Polymer
HTML
58
star
19

xtag-boilerplate

Fork this repo if you want to start your own Web Component using X-Tag
HTML
52
star
20

sass-interop

A demo of interoperability between Sass and Polymer
CSS
46
star
21

slush-element

Slush generator to create Custom Elements using Polymer, X-Tag or VanillaJS
JavaScript
41
star
22

webcomponents-icons

Collection of high resolution Web Components icons for presentations, blog posts or whatever
CSS
40
star
23

template-shadowroot

TypeScript
38
star
24

community

A space for the webcomponents community
JavaScript
26
star
25

hello-world-xtag

Web Component example using X-Tag
HTML
24
star
26

webcomponents-platform

Very minimal platform related polyfills
JavaScript
23
star
27

less-interop

A demo of interoperability between Less and Polymer
CSS
20
star
28

webcomponents-lite

Web Components Polyfills minus Shadow DOM
JavaScript
16
star
29

wc-catalog

11
star
30

custom-elements-manifest-tools

Tools for working with custom elements manifests
TypeScript
7
star
31

apply-shim

Shim for CSS @apply mixins
JavaScript
5
star
32

.allstar

1
star