@glimmer/web-component

Render Glimmer components with custom elements

Stats

StarsIssuesVersionUpdatedCreatedSize
@glimmer/web-component
0.3.14 years ago4 years agoMinified + gzip package size for @glimmer/web-component in KB

Readme

@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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.