@live-components/page-header NPM

<page-header>

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

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