In addition to using Glimmer for a widget on one section on a page, you can also use Glimmer components as web components.
Let's do another new app setup. Instead of doing an installation like we did originally, we'll now run the following command:
ember new DisplayTile -b @glimmer/blueprint --web-component=display-table
When we add the
--web-component=display-table flag, we reconfigure our app to expose our
display-table component as a Web Component to browsers. That in turn allows us to render markup like the following from a backend:
Once we add our
app.js file to the page, our browser will automatically load our Glimmer component into the DOM using the options provided by the backend and will boot each Glimmer app.
If you already have an app and you want to use it as a Web Component, install the following package using yarn:
$ yarn add --dev @glimmer/web-component
npm install --save-dev @glimmer/web-component
After the package is installed, you will have to add two lines to
src/index.ts. First, the following import:
import initializeCustomElements from '@glimmer/web-component';
app.boot(), the following line of code:
initializeCustomElements(app, [/* component names */]);
This will register custom elements for each of the component names you give to
initializeCustomElements and will replace the custom element with your Glimmer component once the custom element connects.
For example, if you provide the component name
'FooBar' you can now use the custom element
<FooBar> anywhere in the DOM and have your
FooBar component render in its place.
For more information about web components, browser support and various polyfills to enable broader support, please see: