atoms-element v5.0.0

#js

git clone https://git.pyrossh.dev/atoms-element

A simple web component library for defining your custom elements. It works on both client and server.

examples/elements/app-total.js
|
|
import { createElement, css, html } from '../../index.js';

// No shared store: Total.watch below declares "give me the count attribute
// off every app-counter on the page", and createElement resolves that into
// the counts array passed in here — server-side by parsing the already-
// rendered preceding markup, client-side via a MutationObserver it sets up
// and tears down on its own.
const Total = ({ counts }) => {
  const total = counts.reduce((sum, v) => sum + (Number(v) || 0), 0);
  return html`
    <div>
      <h1>Total of 2 Counters: ${total}</h1>
    </div>
  `;
};

Total.watch = { counts: { selector: 'app-counter', attribute: 'count' } };

Total.styles = css`
  :scope {
    display: block;
    margin: 5rem;
  }
  h1 {
    font-size: 1.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
`;

export default createElement(import.meta, Total);