It’s release day! 
Super pleased to announce the next major release of Apollo Elements packages including:
- Reactive Controllers for Lit and other libraries
- atomico.js support
- FAST UI behaviours
- GraphQL-in-HTML elements with dynamic templates
- and many more features.
Check out the blog post for more info including live demos.
<link rel="stylesheet" href="https://unpkg.com/@shoelace-style/shoelace@2.0.0-beta.47/dist/themes/base.css">
<script src="https://unpkg.com/@shoelace-style/shoelace@2.0.0-beta.47/dist/shoelace.js?module" type="module"></script>
<sl-button id="toggle">Add a User</sl-button>
<sl-dialog label="Add User">
<sl-input label="What is your name?"
variable-for="add-user-mutation"
data-variable="name"></sl-input>
<sl-button slot="footer"
type="primary"
trigger-for="add-user-mutation">Add</sl-button>
</sl-dialog>
<apollo-mutation id="add-user-mutation">
<script type="application/graphql" src="AddUser.mutation.graphql"></script>
<template>
<sl-alert type="primary" duration="3000" closable ?open="{{ data }}">
<sl-icon slot="icon" name="info-circle"></sl-icon>
<p>Added {{ data.addUser.name }}</p>
</sl-alert>
</template>
</apollo-mutation>
<script type="module" src="imports.js"></script>
<script type="module">
const toggle = document.getElementById('toggle');
const dialog = document.querySelector('sl-dialog');
const mutation = document.getElementById('add-user-mutation');
toggle.addEventListener('click', () => dialog.show());
mutation.addEventListener('mutation-completed', () => dialog.hide());
</script>