Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Web Component Libraries: Gluon

Gluon is a minimalist web components base class that templates components with lit-html.

Installation

npm i -S @apollo-elements/gluon
yarn add @apollo-elements/gluon
pnpm add @apollo-elements/gluon

Import ApolloQuery, ApolloMutation, or ApolloSubscription to define your components.

import { ApolloQuery, html } from '@apollo-elements/gluon';
import { HelloQuery } from './Hello.query.graphql.js';
import '@power-elements/card';
import './client.js';

class HelloQueryElement extends ApolloQuery<typeof HelloQuery> {
  query = HelloQuery;

  onData() { this.render(); }

  get template() {
    const greeting = this.data?.hello?.greeting ?? 'hello';
    const name = this.data?.hello?.name ?? 'world';
    return html`
      <span id="hello">
        ${greeting}, ${name}!
      </span>
    `;
  }
}

customElements.define('hello-query', HelloQueryElement);