https://github.com/felschr/knockout-web-components
A bridge to be able to integrate web components with knockout.js
https://github.com/felschr/knockout-web-components
custom-elements knockoutjs stencil stenciljs webcomponents
Last synced: 4 months ago
JSON representation
A bridge to be able to integrate web components with knockout.js
- Host: GitHub
- URL: https://github.com/felschr/knockout-web-components
- Owner: felschr
- License: mit
- Created: 2019-02-15T11:40:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-15T15:21:03.000Z (over 7 years ago)
- Last Synced: 2024-12-16T03:51:19.681Z (over 1 year ago)
- Topics: custom-elements, knockoutjs, stencil, stenciljs, webcomponents
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/knockout-web-components
- Size: 42 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# knockout-web-components
A bridge to be able to integrate web components with knockout.js
This project provides a custom bindingHandler to integrate web components into knockout applications more seamlessly.
It's compatible with standard web components and thus also allows integration of components from projects like [stencil](http://stenciljs.com).
## Installation
```sh
npm i knockout-web-components
```
## Usage
Import the library in your app:
```js
import "knockout-web-components";
```
This will automatically add a new knockout bindingHandler with the name `webcomp`.
Now you can pass properties and event listeners via the data-bind attribute in your templates:
```html
```
If you pass onservables as parameters here they will be unwraped and provided to the web component as plain JSON.
Parameters that start with `on` are treated like event listeners and internally it will call `addEventListener` on the web component to listen for events and invoke the function you provided.
For the event registration the `on` prefix will be ignored and instead only the parts after it will be used. This also transforms the first letter of the event name to lowercase.
For example `onInput` would listen for events with the name `input`.
### Stencil
I've created this library as part of my adoption of [stencil](http://stenciljs.com) within my application.
It's a beautiful, lightweight web component compiler that produced 100% standards-based web components that can be used in any framework or no framework at all.