Apollo Elements Apollo Elements Guides API Blog Toggle darkmode


Apollo Elements consists of multiple web-component packages, a core of shared interfaces, ready-made components, and some library helpers.


Whatever your preference for how to build web components, there's a flavour of Apollo Elements for you and your team. You can even mix-and-match in the same project, thanks to the common interface of HTML and the DOM.

  • Class Mixins: Vanilla JS class mixins
  • LitElement: Perhaps the most popular web-component base class
  • FAST: Microsoft's new entry into the field
  • Haunted: The React hooks API, but web components
  • Hybrids: A unique chimera of object-oriented and functional styles
  • Gluon: A breath more than vanilla, for the minimalists in the crowd
  • Polymer: The original web-components library


Each of the web component library packages provides lets you build GraphQL apps differently, depending on the paradigm represented by the base package, they all share the same common interfaces

That is to say, whether you create a query element with lit-apollo, haunted, or vanilla JS mixins, once they connect to the DOM, they all behave the same vis-a-vis GraphQL.

HTMLElement «Interface» CustomElement «Interface» ApolloElement data: Data variables: Vars «Interface» ApolloQuery query: DocumentNode ... «Interface» ApolloMutation mutation: DocumentNode ... «Interface» ApolloSubscription subscription: DocumentNode ...

Class inheritance diagram of Apollo Elements, showing

  1. ApolloQuery, ApolloMutation, and ApolloSubscription inheriting from ApolloElement
  2. ApolloElement inheriting from CustomElement
  3. CustomElement inheriting from HTMLElement