https://github.com/ylerjen/webcomp-starter-kit
A webcomponent starter kit that contains everything you need to direct code your webcomp and not take 2 days for the setup...
https://github.com/ylerjen/webcomp-starter-kit
custom-elements shadow-dom shadowdom webcomp webcomponent
Last synced: 5 months ago
JSON representation
A webcomponent starter kit that contains everything you need to direct code your webcomp and not take 2 days for the setup...
- Host: GitHub
- URL: https://github.com/ylerjen/webcomp-starter-kit
- Owner: ylerjen
- License: mit
- Created: 2018-11-27T08:01:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T03:09:16.000Z (over 3 years ago)
- Last Synced: 2023-03-24T19:42:51.447Z (about 3 years ago)
- Topics: custom-elements, shadow-dom, shadowdom, webcomp, webcomponent
- Language: JavaScript
- Size: 553 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webcomp-starter-kit
A dev-ready bundler and packager to create Web-Components with:
- ESNext transpiled by Babel
- HTML templates loaded from *.html file into your JS
- Sass styles loaded to your JS
- The spec v1 of ShadowDom and CustomElement
## Disclaimer
As [HTML Import](https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports) is still not well implemented in browsers ([and will perhaps never be...](https://hacks.mozilla.org/2015/06/the-state-of-web-components)), this starter kit doesn't use this API. Instead, it's the JavaScript bundle that has to be loaded in the page to manage the WebComp.
For the sack of separation of concern, at dev step, we still have the html and the CSS (SCSS) files, but they are loaded in the JS by Webpack.
## Polyfill
To be supported crossbrowser, you'll need some polyfills that are commented out by default in the index.html file.
Just remove the comments to use the polyfill in dev mode.
If you need the polyfill for your application, you'll have to insert it manually with your other scripts.
- [ShadyDOM](https://github.com/webcomponents/shadydom) : ShadowDOM V1 shim
- [document-register-element](https://github.com/WebReflection/document-register-element) : A stand-alone working lightweight version of the W3C Custom Elements specification
- [custom-elements](https://github.com/webcomponents/custom-elements) : is still a work in progress but will be the official custom-element polyfill
Specify the extended tagname in the definition of the custom element like
```customElements.define('my-component', MyComponent, {extends: 'input'});```
## Development
### Steps to create your own WebComponent
1. Clone this repository
1. Change the git origin repo to your own
1. Adapt ```package.json``` according to your WebComponent
1. Rename the class in the ```scripts/component.js```
1. Adapt the ```CustomElements.define``` in the ```scripts/component.js```
1. Happy coding
### Extending HTMLElement VS extending specific Elements
The default code is oriented for a HTMLElement extension. This the case when you don't need to extend a specific existing component, but just want to create your custom one.
In the case you want to extend a specific HTMLElement like HTMLButtonElement, HTMLInputElement,... you'll need to modify the ```scripts/component.js``` with the following changes :
**Select the element to extend**
Change the inherited member to your own like
```export class MyComponent extends HTMLInputElement {```
**Define the extended tagname**
Specify the extended tagname in the definition of the custom element like
```customElements.define('my-component', MyComponent, {extends: 'input'});```
### Using third party CSS
If you want to add a third party style library like let's say [Twitter Bootstrap](https://getbootstrap.com/), you can do so by using webpack imports.
```@import "~bootstrap/dist/css/bootstrap";```
See this [Webpack documentation](https://github.com/webpack-contrib/sass-loader#imports)