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

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

MIT License.