Commit 607d3b84 authored by Stephanus Volke's avatar Stephanus Volke

change readme.md

parent e20b7bb6
Pipeline #711 passed with stages
in 16 seconds
......@@ -6,13 +6,69 @@ bare bone HTMLElement interface they provide often used methods and
functionallity to reduce redundant code and simplify common tasks like
observing other elements attribute changes.
## [API Documentation](http://jadeprolistening.tgm.io/html-custom-elements/index.html)
>! **Note**: For all classes the new [custom elements v1](https://w3c.github.io/webcomponents/spec/custom/) specification
> is used, which is currently supported only by the latest Google Chrome
> Browser.
## Usage
## Installation
The HTMLCustomElements were built with a flexible, modular usage in
mind. For that, each class is provided as a single ES6 module. Because
until now there is no browser supporting es6 modules natively, we
suggest the following two usage scenarios.
## Standalone installation
Using the classes is simple as defining normal custom elements.
You can download one of the releases which can be found in the gitlab repository.
These are precompiled versions of the whole project.
Using them is easy as including any other local js file into your html document.
``` html
<script src="path/to/the/file.js"></script>
```
This will register an global `HTMLCustomElements` JS object with the
single classes as attributes. To extend one of them you can write something like:
``` javascript
// HTMLCustomElemens is aviable in the global namespace
class MyElement extends HTMLCustomElements.HTMLCustomElement {
constructor() {
super(); //instantiate parent class
// your code
}
// other methods
}
// register your element
window.customElements.define('my-element', MyElement);
```
The disadvantage of this way is, that the builds contain the whole
project and not only the parts you really need.
## Installation in other projects
For easy usage the HTMLCustomElements project is designed as an npm
package. Until now is it not registered in the official node package
registry so you can not `npm install` it. Instead we suggest you to
add the project as an external dependenciy to your `package.json`
file. This can be done by adding the following line to the
`dependencies` section of your `package.json` file.
```json
"dependencies": {
"html-custom-elements":"git+ssh://git@tgm-git.jade-hs.de:JadeProListening/html-custom-elements.git"
}
```
This will install the HTMLCustomElements in the
`node_modules/html-custom-elements/` directory from where they can be
imported into your own modules.
``` javascript
// import class via es6 module syntax
......@@ -33,16 +89,30 @@ class MyElement extends HTMLCustomElement {
window.customElements.define('my-element', MyElement);
```
Now you can use your element like any other html tag:
## Usage
``` html
<bod>
<my-element id="elem1"></my-element>
</bod>
```
## Details
``` javascript
// import class via es6 module syntax
import {HTMLCustomElement} from 'path/to/this/class'
// instead of extending the `HTMLElement` interface
// use the `HTMLCustomElement` class
class MyElement extends HTMLCustomElement {
constructor() {
super(); //instantiate parent class
// your code
}
// other methods
}
// register your element
window.customElements.define('my-element', MyElement);
```
For details see the documentation of each class
- [HTMLCustomElement](./doc/html-custom-element.md)
To view the results you have to bundle your javascript once again with
an aviable tool like [rollup](http://rollupjs.org),
[webpack](https://webpack.github.io/) or something like that.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment