https://github.com/jpchip/web-component-loader
load web components into page
https://github.com/jpchip/web-component-loader
demo polymer stenciljs web-components webcomponents
Last synced: about 1 year ago
JSON representation
load web components into page
- Host: GitHub
- URL: https://github.com/jpchip/web-component-loader
- Owner: jpchip
- License: mit
- Created: 2018-04-02T21:35:35.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-20T14:42:44.000Z (almost 8 years ago)
- Last Synced: 2025-02-05T00:28:47.333Z (over 1 year ago)
- Topics: demo, polymer, stenciljs, web-components, webcomponents
- Language: HTML
- Homepage: https://jpchip.github.io/web-component-loader/
- Size: 35.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Component Loader
> Test your web components here!
Have you ever stumbled across a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and wondered what it looked like?
This is a simple page that let's you load up a web component from a cdn or unpkg.com
on the fly and view it. Added components are saved to local storage for
repeated viewing.
There's also a small library of web components I've found already to tinker
with. If you know of any cool ones I should add, please add them to [components.json](https://github.com/jpchip/web-component-loader/blob/master/components.json) and [submit a PR](https://github.com/jpchip/web-component-loader/pulls)!
This is just hacked together with jquery as a proof of concept.
## Installing / Getting started
Check it out here:
https://jpchip.github.io/web-component-loader/
### Example Web Components:
#### [ui-avatar](https://www.npmjs.com/package/ui-avatar)
- URL: `https://unpkg.com/ui-avatar@0.0.3/dist/uiavatar.js`
- Name: `ui-avatar`
- Key: `name`
- Value: `Your Name`
#### [stencil-voice2text](https://www.npmjs.com/package/stencil-voice2text)
- URL: `https://unpkg.com/stencil-voice2text@latest/dist/voice2text.js`
- Name: `st-voice2text`
- Content: ``
Find many more components to try at [https://stencilcomponents.com/](https://stencilcomponents.com/).
##### [Polymer](https://www.polymer-project.org/) web components also work:
#### [paper-button](https://www.webcomponents.org/element/PolymerElements/paper-button)
- URL: `https://cdn.rawgit.com/download/polymer-cdn/2.6.0/lib/paper-button/paper-button.html`
- Name: `paper-button`
- Content: `Hello World`
## Developing
### Setting up Dev
Install some local web server. Recommend [http-server](https://github.com/indexzero/http-server).
```shell
git clone https://github.com/jpchip/web-component-loader.git
cd web-component-loader/
http-server
```
Load up site at [http://127.0.0.1:8080](http://127.0.0.1:8080).
## Todos
- [x] Allow setting unlimited number of parameters
- [x] Allow adding more than one component
- [ ] Add each component as a widget in a dashboard
- [x] Store added components in local storage
- [x] Allow editing component parameters and content
- [x] Add support for polymer based components (ie. html)
- [x] Add onload/onerror handlers
- [x] Allow removing single component
- [ ] Import/Export components
- [x] Allow adding components from a pre-defined library (ie. components.json)
## Licensing
MIT