atoms-element v5.0.0

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);