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/pages/index.js
|
|
import { createPage, css, staticHtml, unsafeHTML } from '../../index.js';
import '../elements/app-counter.js';
import '../elements/app-total.js';

const head = ({ config }) => {
  const styleTag = `<style>${css`
    .page {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  `}</style>`;
  return staticHtml`
    <title>${config.title}</title>
    <link rel="stylesheet" href="/node_modules/normalize.css/normalize.css" />
    ${unsafeHTML(styleTag)}
  `;
};

const body = () => {
  return staticHtml`
    <div class="page">
      <app-counter name="1" count="5"></app-counter>
      <app-counter name="2" count="7"></app-counter>
      <app-total></app-total>
    </div>
  `;
};

export default createPage({
  head,
  body,
});