apollo-subscription

<apollo-subscription>
  <script type="application/graphql">
    subscription NewMessages {
      messageAdded { id author content }
    }
  </script>
  <template>
    <article>
      <span class="author-name">{{ data.author.name }}</span>
      <mark-down>{{ data.content }}</mark-down>
    </article>
  </template>
</apollo-subscription>

<apollo-subscription id="subscription-element" template="message-template"></apollo-subscription>

<template id="message-template">
  <article>
    <span class="author-name">{{ data.author.name }}</span>
    <mark-down>{{ data.content }}</mark-down>
  </article>
</template>

<script type="module">
  import { gql } from '@apollo/client/core';
  const el = document.getElementById('subscription-element');
  el.subscription = gql`
    subscription NewMessages($limit: Int) {
      messagesAdded {
        messages { id author content }
        hasMore
      }
    }
  `;
  el.variables = { limit: 10 };
</script>