Concepts

Components are native islands.

Use Custom Elements for behavior and Shadow DOM for scoped CSS. Global CSS stays small and page-oriented.

Shadow helper

import { shadow, sheet } from "/nativefragments/component.js";

const styles = sheet(`
  :host { display: block; }
`);

class AppCard extends HTMLElement {
  connectedCallback() {
    shadow(this, {
      styles: [styles],
      html: `<article><slot></slot></article>`
    });
  }
}

customElements.define("app-card", AppCard);