Build high-performance #GraphQL web apps using #webcomponents with Apollo Elements
- Tweets118
- Following21
- Followers115
- Likes134
ALT import { ApolloQueryController } from '@apollo-elements/core'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; import { HelloQuery } from './Hello.query.graphql'; @customElement('hello-query') export class HelloQueryElement extends LitElement { query = new ApolloQueryController(this, HelloQuery); render() { const greeting = this.query.data?.greeting ?? 'Hello'; const name = this.query.data?.name ?? 'Friend'; return html` <article class=${classMap({ skeleton: this.query.loading })}> <p id="error" ?hidden=${!this.query.error}>${this.query.error?.message}</p> <p> ${this.query.data?.greeting ?? 'Hello'}, ${this.query.data?.name ?? 'Friend'} </p> </article> `; } }
ALT // Lit import { LitElement, html } from "lit"; import { ClockController } from "./clock-controller"; export class ClockElement extends LitElement { clock = new ClockController(this); render() { return html`Current time (Lit): ${this.clock.value}`; } } customElements.define("clock-element", ClockElement);
ALT // Vue <template> <div id="app">Current time (Vue): {{ clock.value }}</div> </template> <script> import "./clock-element"; import { ClockController } from "./clock-controller"; import { makeVueController } from "./vue-controller-host"; export default { name: "Clock", setup() { return { clock: makeVueController((host) => new ClockController(host)), }; }, }; </script>
ALT Examples Taken from the HTML spec: const el = document.createElement("spider-man"); class SpiderMan extends HTMLElement {} customElements.define("spider-man", SpiderMan); console.assert(!(el instanceof SpiderMan)); // not yet upgraded customElements.upgrade(el); console.assert(el instanceof SpiderMan); // upgraded!
ALT :not(:defined) { display: inline-block; min-height: 1em; min-width: 1em; background: hotpink; }
ALT npm i -D @custom-elements-manifest/analyzer
ALT const template = document.createElement('template'); template.innerHTML = ` <link rel="stylesheet" href="mouse-host.css"> <h3>The mouse is at:</h3> <dl> <dt>x</dt> <dd><output id="x"></output></dd> <dt>y</dt> <dd><output id="y"></output></dd> </dl> `; customElements.define('mouse-host', class MouseHost extends ControllerHostMixin(HTMLElement) { mouse = new MouseController(this); $ = x => this.shadowRoot.querySelector(x); constructor() { super() this .attachShadow({ mode: 'open' }) .append(template.content.cloneNode(true)); } update() { const { x, y } = this.mouse.pos; const { clientWidth, clientHeight } = document.documentElement; this.$('#x').textContent = x; this.$('#y').textContent = y; this.style.setProperty('--hue', (x / clientWidth) * 250); this.style.setProperty('--saturation', `${(y / clientHeight) * 100}%`); super.update(); } });
ALT inspecting a custom element on github.com using firefox dev tools
ALT firefox dev tools debugger panel showing the inspected custom element's source code