{shadow}

Description

{shadow} writes <template shadowrootmode="open"> around its rendered content. Placed inside a custom element, it is that element's shadow root: the browser builds the root while it parses the page, so the element shows - with encapsulated styles and slotted light DOM - before any script has run, and a module that defines the element later finds the root ready in this.shadowRoot. Like {tidy}, the tag runs twice: the content renders first, then the template tags go around it.

A shadow root takes no styles from the page, and a <style> written into the template would have its braces read as PAD tags. css= therefore inlines stylesheet files instead, as one <style> at the start of the root: a .css file of the application, or with www: one in its www/ directory - the file rule of {source}. Each file is read once a request. mode='closed' makes a closed root, focus adds shadowrootdelegatesfocus.

The usual home of {shadow} is a custom tag in _tags/ that writes a custom element, combined with {parms}; the first example uses _tags/shadowCard.pad with its stylesheet _tags/shadowCard.css. Inside the pair, {#name} is {shadow}'s own parameter - in a custom tag, put the tag's parameters to use outside the pair, or carry one in with {set $value = {#value}} before it.

A stylesheet that is not there or is no .css file, a mode that is neither open nor closed, and a pair that never closes are errors.