Web components

Custom elements and shadow DOM are the browser's own components. A shadow root can be written in the HTML - <template shadowrootmode="open"> - and the browser builds it while it parses the page: the element shows, its styles encapsulated and its light DOM slotted, before any script ran. {shadow} writes that template on the server:

<pad-note>
  {shadow css='fragments/web_components_1.css'}
    <strong><slot name="title"></slot></strong>
    <slot></slot>
  {/shadow}
  <span slot="title">Rendered by PAD</span>
  The browser built this note's shadow root from the template - no script ran.
</pad-note>

• css= inlines stylesheets - a file of the application, or www: one in its www/ directory - as the root's <style>: a shadow root takes no styles from the page, and a <style> written in a template would have its braces read as PAD tags. Custom properties do cross into the root, so var(--accent) follows the page's theme.
• mode='closed' makes a closed root, focus delegates focus to the first focusable element inside.
• A module that defines the element - customElements.define('pad-card', ...) - finds the root PAD rendered in this.shadowRoot and adds behaviour; the element needs none to show.

As PAD components

A custom tag of the application (Components) is the natural home of an element: its .pad file writes the element and its root, its parameters become attributes, and @content@ is the light DOM the browser slots in. Inside {shadow}, {#name} is {shadow}'s own parameter: {set $value = {#value}} before the pair carries the tag's into it.

The webcomponents application has cards, tabs, a rating that posts, a form-associated stepper and a Lit element, each with its tag, stylesheet and module: webcomponents.