<page-header>
A Simple ESM web page header Web Component
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-compressorcli (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 |