https://github.com/1602/elm-app-webcomponent
https://github.com/1602/elm-app-webcomponent
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/1602/elm-app-webcomponent
- Owner: 1602
- Created: 2018-12-24T18:44:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-27T20:33:33.000Z (over 7 years ago)
- Last Synced: 2025-07-02T15:50:02.669Z (12 months ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Build web-component using create-elm-app
### Installation
1. add this plugin as a development dependency of a project you created with `create-elm-app`
```
yarn add -D elm-app-webcomponent
```
2. use plugin in `elmapp.config.js`
```javascript
exports.configureWebpack = require('elm-app-webcomponent');
```
### Usage
1. You need to create an entry point for your web component in `src/custom-element.js`,
this is a boilerplate you might want to start with:
```javascript
const Elm = require('./Main');
const css = require('./main.css').toString();
customElements.define('my-webcomponent',
class extends HTMLElement {
constructor() {
super();
const appRoot = document.createElement('div');
const appStyles = document.createElement('style');
appStyles.textContent = css;
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(appStyles);
shadowRoot.appendChild(appRoot);
this.appRoot = appRoot;
}
connectedCallback() {
const app = Elm.Elm.Main.init({ node: this.appRoot });
this.app = app;
}
});
```
2. Run `elm-app build` as usual to build your web component.