<page-header>

A Simple ESM web page header Web Component

• Developer documentation
• Contribution documentation

Developer Experience

Page Header

• install as an HTML Script Tag
• only a single runtime dependency > <img-icon> (svg icon component)
• very small byte size over the wire > 16.5kb
• optimal content compression > brotli (gzip for nomodule js) |
• excellent browser support
  • IE11 (nomodule-only basic css/initial login)
  • full support for the last 2 versions of Safari, Edge, Firefox, Mobile Safari, Chrome
• minimal developer tooling
  • Qunit (unit testing)
  • bread-compressor cli (for gzip and br)
  • SkyPack CDN via NPM (distribution)*
• SSR Support
  • minimal HTML boilerplate (HTML slots plus wrapper)
  • JS not loaded on server and HTML is identical on server and browser

(*) Unpkg and AWS S3/Cloudfront (plus some tooling) are other alternative distribution method as well.

Requirements

• a target application that supports HTML, JS, and CSS

Terminology

| term | definition | resources | | --- | --- | --- | | Web Component | A native 1st class browser HTML node built with a combination of Custom Elements, Shadow DOM, and HTML Template tags | webcomponents.org | | Custom Element | A custom & native 1st Class browser HTML element complete with lifecycyle methods and a constructor | Using Custom ELements | | Shadow DOM | Native encapulation for HTML on a page similar to DOM Fragments or IFrames | | | Shadow Root | The reference container for a given Shadow DOM instance |Using Shadow DOM | | Slot | Transclusion HTML Nodes for Shadow DOM that live in the 'Light' DOM but are slotted into the Shadow DOM | Slot usage, Slots and Template Tags | | Custom Properties (AKA CSS Variables) | scoped CSS values that can pierce through Shadow DOM | Using Custom Properties | | Custom Events | Events that are developer created and typically pass data to the evt object | Creating and triggering Custom Events |