Library to boot up your Glimmer components as Web Components
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
CODE_OF_CONDUCT.md
LICENSE
README.md
ember-cli-build.js
package.json
testem.json
tsconfig.json
tsconfig.tests.json
yarn.lock

README.md

@glimmer/web-component Build Status

Installation

Add this package to your project with Yarn:

yarn add --dev @glimmer/web-component

Or alternatively with npm:

npm install --save-dev @glimmer/web-component

Usage

Add this import to your src/index.ts or wherever you are instantiating your Glimmer app:

import initializeCustomElements from '@glimmer/web-component';

And then after app.boot():

initializeCustomElements(app, {
  'button-list': 'ButtonList',
  'x-button': 'Button'
});

This will register custom elements for each of the items defined in the hash passed to initializeCustomElements and will replace the custom element with your Glimmer component once the custom element connects. For example, if you provide the hash { 'foo-bar': 'FooBar' }, you can then use the custom element <foo-bar> anywhere in the DOM and have your <FooBar> Glimmer component render in its place.

Browser Support

Browser support for the WebComponents spec is not not great yet. If you want to use customElements.define where it is not yet supported natively, you'll need to install the polyfill.

License

MIT License.