Navigation
Site Footer
Page footer with brand, link columns and a legal row
detent-site-footer
Port status
- Catalog status
- implemented
- Origin
- native-only
- Phase
- 6
- Wave
- native-only
- Group
- Navigation
Docs
Components
GitHub
2.5 KB gzip for the class module
Variants
Example labels only. Every column, heading, list and link above is light DOM: the footer only adds the documented
column, column-title and list parts, so the same markup is readable with
JavaScript disabled. Narrow the window to see the grid stack into one column.
Recorded states
narrowrecorded state; no setter
Usage
Import
import '/components/site-footer/define.js';
// or register it yourself
import { DetentSiteFooter } from '/components/site-footer/site-footer.js';Attributes
copyrighttagline
Properties
copyrighttagline
Slots
branddefaultlegal
Events
No events are recorded for this component.
Example
Runnable example: site/examples/site-footer.ts. The snippet below is generated from the catalogued attributes.
<detent-site-footer
copyright=""
tagline=""
></detent-site-footer>Source
Native-only row: there is no upstream source. The native module lives at:
src/components/site-footer/site-footer.ts
Native files
The native module and its artifacts:
src/components/site-footer/site-footer.tssrc/components/site-footer/styles.csssrc/components/site-footer/define.tsdocs/components/site-footer.mdsite/examples/site-footer.tstests/browser/site-footer.spec.tsevidence/components/site-footer.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
copyright | copyright | string | '' | Kebab-case attribute; camelCase property. |
tagline | tagline | string | '' | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
copyright | string | '' | Property-only: assign from script; not accepted as an attribute. |
tagline | string | '' | Property-only: assign from script; not accepted as an attribute. |
Events
No custom events are recorded for this component.
Slots
| Slot | Notes |
|---|---|
brand | Consumer content; rendered through a slot, never re-created. |
default | Consumer content; rendered through a slot, never re-created. |
legal | Consumer content; rendered through a slot, never re-created. |
CSS customisation
- Native-only row: no upstream source file, no upstream route (docs/migration/native-only.md).
- Page-level footer structure with slots; upstream has no footer component.
- column, column-title and list are light-DOM parts: the no-JS rule keeps columns in the light DOM, so ::part() cannot address them. The component applies part attributes only when the consumer has not set one, idempotently, and re-applies on slotchange.
- The brand slot text fallback is the library name EasyUI; the row records no brand-name attribute, so none is invented.
- copyright and tagline are attributes and therefore need JavaScript; a JavaScript-free page puts the statement in the legal slot (documented and asserted in the no-JS fixture).
- The narrow state is a container query on the host, so the footer responds to its own width rather than only the viewport.
- Slotted anchors keep the browser native focus ring; ::slotted() cannot express :focus-visible reliably, so the component styles colour and underline only and nested column links stay the consumer styling responsibility.
What it does
Where it is used. The documentation site shell — every generated page.
Upstream behaviour
- Brand slot with a text fallback
- Column grid built from slotted lists
- Legal row with a copyright statement
- Stacks into one column at narrow widths
- No events; every link stays native
- Readable without JavaScript
Differences from upstream
- Native-only row: no upstream source file, no upstream route (docs/migration/native-only.md).
- Page-level footer structure with slots; upstream has no footer component.
- column, column-title and list are light-DOM parts: the no-JS rule keeps columns in the light DOM, so ::part() cannot address them. The component applies part attributes only when the consumer has not set one, idempotently, and re-applies on slotchange.
- The brand slot text fallback is the library name EasyUI; the row records no brand-name attribute, so none is invented.
- copyright and tagline are attributes and therefore need JavaScript; a JavaScript-free page puts the statement in the legal slot (documented and asserted in the no-JS fixture).
- The narrow state is a container query on the host, so the footer responds to its own width rather than only the viewport.
- Slotted anchors keep the browser native focus ring; ::slotted() cannot express :focus-visible reliably, so the component styles colour and underline only and nested column links stay the consumer styling responsibility.