Rendered by PAD,
defined by the browser.
A custom element with its shadow root written on the server: declarative shadow DOM shows it encapsulated and slotted before any script ran, and a small module upgrades it where it needs behaviour. PAD's own components - a custom tag with parameters - write them.
This card is a <pad-card> with its shadow root - and the page has no script for it.
Rendered on the server
1 examplesA PAD custom tag writes the custom element with its shadow root already in it - declarative shadow DOM - so it shows, styled and slotted, before any script ran.
Upgraded in the browser
4 examplesA small module defines the element: it finds the root PAD rendered and adds behaviour - keys, clicks, a post back, a value in a form.
Tabs, upgraded
The tabs are complete HTML when they arrive - the first panel shows. Once tabs.js defines <pad-tabs>, the element takes the root PAD rendered and adds clicks and arrow keys.
{shadow}_tags/tabs.padcustomElements.definethis.shadowRootA rating that posts
<pad-rating value="4"> gets its value from PAD and its stars from the server; a click posts the new rating with the session's CSRF token, and the element shows the average PAD answers.
padSession$padExposeattributeChangedCallbackfetch POSTA field of a form
<pad-stepper> is form-associated: ElementInternals gives the {form} its value, the post carries it like any field, and padValidate checks it on the server.
{form}padValidatepadPostedformAssociatedElementInternalsA library: Lit
A Lit element rendered in the browser, fed by PAD through an attribute: items="{^items}" is JSON Lit reads into a property - the same data any element gets.
{^field}LitElementstatic properties