${getAnswer()}
```
### `static`
Statements prefixed with `static` allow running JavaScript expressions in module scope. The statements will run when the template loaded on the server and in the browser.
```marko
static const answer = 41;
static function getAnswer() {
return answer + 1;
}
```
All valid javascript statements are allowed, including functions, declarations, conditions, and blocks.
```marko
static {
console.log("this will be logged only ONE time");
console.log("no matter how often the component is used");
console.log("or how many requests are made to the server");
}
```
### `server` and `client`
As an alternative to [`static`](#static), statements prefixed with `server` or `client` allow arbitrary module scoped JavaScript expressions that are exclusively executed when the template is loaded in a specific environment (the server or the browser).
```marko
server console.log("on the server")
client console.log("in the browser")
```
All valid javascript statements are allowed, including functions, declarations, conditions, and blocks.
```marko
server {
import { connectToDatabase } from './database';
const db = connectToDatabase();
console.log('Database connection established on server');
// Only happens ONCE, when the application loads
// and this component is used for the first time
const users = await db.query('SELECT * FROM users');
console.log(`Found ${users.length} users in the database`);
}
```
> [!TIP]
> The [`import`](#import) statement is really a shortcut for `static import`. This can be leveraged with `server` and `client` if you want a module to only be imported on one platform
>
> ```marko
> server import "./init-db"
> client import "bootstrap"
> ```
## Tags
Marko supports all native HTML/SVG/whatever tags and attributes. In addition to these, a set of useful [core tags](./core-tags.md) are provided. Each project may have its own [custom tags](./custom-tag.md), and third-party tags may be included through `node_modules`.
All of these types of tags use the same syntax:
```marko
` can be [self closed](https://developer.mozilla.org/en-US/docs/Glossary/Void_element#self-closing_tags). In all closing tags, the tag name may be omitted. ```marko no-format
Hello World
```
## Attributes
Attribute values are JavaScript expressions:
```marko
` the `"Hello"` string is a JavaScript string literal and not an html attribute string.
Attributes can be thought of as JavaScript objects in Marko which are passed to a tag.
> [!CAUTION]
> Values cannot contain an unenclosed `>` since it is ambiguous. These expressions must use parentheses:
>
> ```marko
> 2)>
> ```
### Skipped Attributes
If an attribute value is `null`, `undefined` or `false` it will not be written to the html.
> [!NOTE]
> Not _all_ [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values are skipped. `0`, `NaN`, and `""` will still be written.
### Boolean Attributes
[HTML boolean attributes](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML) become JavaScript booleans.
```marko
```
> [!IMPORTANT]
>
> [ARIA enumerated attributes](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated#aria_enumerated_attributes) use strings instead of booleans, so make sure to pass a string.
>
> ```marko
> // β WRONG: Don't do this
>
> // outputs
> ```
>
> ```marko
> // π Correct use of aria attributes
>
> // outputs
> ```
### Spread Attributes
Attributes may be dynamically included with the [spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) syntax.
```marko
` would receive the attributes as an object like `{ ...input, foo: "bar" }`.
Attributes are merged from left to right, with later spreads overriding earlier ones if there are conflicts.
> [!NOTE]
> The value after the `...` (like [in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals)) can be any valid JavaScript expression. This means it can be used to leverage shorthand property names:
>
> ```marko
>
// desugars to
// desugars to
```
#### Refining function
The [change handler shorthand](#shorthand-change-handlers-two-way-binding) may optionally include a function that transforms the value before assignment. The function name appears between colons (`:refiningFunction:=`).
```marko
// desugars to
```
For [Property Accessors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors), the desugared handler includes a boolean expression.
```marko
// desugars to
{ input.numChange(parseFloat(newValue)) })>
```
### Shorthand `class` and `id`
[Emmet style](https://docs.emmet.io/abbreviations/syntax/#id-and-class) `class` and `id` attribute shorthands are supported.
```marko no-format
```
The [method shorthand](#shorthand-methods) can be combined with the value attribute to give us the _value method shorthand_.
```marko
```
> [!CAUTION]
> Sequence expressions with [comma operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_operator) must be wrapped in parentheses
>
> ```marko
> Content
```
The implementation of `` above can write out the content by passing its `input.content` to a [dynamic tag](#dynamic-tags):
```marko
export interface Input {
content: Marko.Body;
}
<@header class="foo">
```
Here, `@header` is available to `` as `input.header`. The `class` attribute from `@header` is in `input.header.class` and its content is in `input.header.content`.
The full [input](./language.md#input) object provided to `` in this example would look like:
```js
// a representation of `input` received by `my-layout.marko` (from the previous code snippet)
{
title: "Welcome",
header: {
class: "foo",
content: /* ${input.title}
// render the content of `@header`
<${input.header.content}/>
// render the main tag content
<${input.content}/>
```
> [!NOTE]
> Control flow tags ([``](./core-tag.md#if--else) and [``](./core-tag.md#for)) cannot contain attribute tags themselves, and instead are used for [dynamically creating attribute tags](#conditional-attribute-tags).
### Nested Attribute tags
Attribute tags may be nested in other attribute tags.
```marko
<@a value=1>
<@b value=2/>
```
Would provide the following as input
```js
{
a: {
value: 2,
b: { value: 2 }
}
}
```
### Repeated Attribute Tags
When multiple attribute tags share a name, all instances may be consumed using the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol).
```marko
<@item value="foo">
Foo Item
<@item value="bar">
Bar Item
```
This example uses two `<@item>` tags, but `` receives only a single `item` attribute.
```js
{
item: {
value: "foo",
content: /* Foo Item */,
[Symbol.iterator]() {
// Not the exact implementation, but essentially this is what the function contains
yield* [
{ value: "foo", content: /* Foo Item */ },
{ value: "bar", content: /* Bar Item */ }
];
}
}
}
```
The other `<@item>` tags are reached through the iterator. The most common way to do so is with a [for tag](./core-tag.md#for) or one of JavaScript's [syntaxes for iterables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#syntaxes_expecting_iterables).
```marko
/* my-menu.marko */
export interface Input {
item?: Marko.AttrTag<{
value: string;
content: Marko.Body;
}>;
}
Value: ${item.value}
<${item.content}/>
```
Attribute tags are generally singular by name, even when repeated. Prefer singular property names when consuming repeated attribute tags (for example, iterate `input.item` rather than `input.items`).
> [!TIP]
> If you need repeated attribute tags as a list, it is a common pattern to spread into an array with a [`` tag](./core-tag.md#const)
>
> ```marko
> export interface Input {
> item?: Marko.AttrTag<{}>;
> }
>
>
>
> `](./core-tag.md#if--else) and [``](./core-tag.md#for)), which are used to dynamically apply attribute tags.
```marko
<@title>Hello
<@title>Good Bye
```
In this case, the `@title` received by `` depends on `welcome`.
```marko
<@option>None
<@option>${opt}
```
Here, `` unconditionally receives the first `@option`, and also all of the `@option` tags applied by the `` loop.
> [!NOTE]
> You can't mix [attribute tags](#attribute-tags) with default [content](#tag-content) while inside a [control flow tag](./core-tag.md#if--else).
## Tag Variables
Tag variables expose a value from a tag to be used within a template (from a custom tag, the variable is taken from its [``](./core-tag.md#return)). These variables are not _quite_ like JavaScript variables, as they are used to power [Marko's compiled reactivity](./reactivity.md).
Tag Variables use a `/` followed by a valid JavaScript [identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier) or [destructure assignment pattern](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) after the tag name.
```marko
` tag](./core-tag.md#return), any custom tag can return a value into it's parents scope as a tag variable.
### Tag Var Scope
Tag variables are automatically [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) and can be accessed anywhere in the template except for in [module statements](#statements). This means that it is possible to read tag variables from anywhere in the tree.
```marko
```
### Repeated Tag Vars
When a tag variable is referenced in a hoisted context, it also implements the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol). This enables access to a list of variables in loops or other nested scope.
```marko
```
## Tag Parameters
While rendering [content](#tag-content), child may pass information _back_ to its parent using tag parameters.
```marko
/* child.marko */
export interface Input {
content: Marko.Body<[{ number: number }]>;
}
Rendered with ${params.number} as the `number=` attribute.
```
This example results in the following HTML:
```html
> Rendered with ${number} as the `number=` attribute.
>
> ```
### Tag Arguments
Multiple [tag parameters](#tag-parameters) may be provided to the content by using the Tag Arguments syntax, which uses the JavaScript `(...args)` syntax after the tag name.
```marko
export interface Input {
content: Marko.Body<[number, number, number]>;
}
<${input.content}(1, 2, 3)/>
```
This example passes three arguments back to its parent.
```marko
Sum ${a + b + c}
// spreads work also!
Sum ${all.reduce((a, b) => a + b, 0)}
```
> [!WARNING]
> Tag content may use attributes _or_ arguments, but not both at once.
>
> ```marko
> ` core tag](./core-tag.md#html-comment).
## Dynamic Tags
In place of the tag name, an `${interpolation}` may be used to dynamically output a [native tag](./native-tag.md), [custom tag](./custom-tag.md), or [tag content](#tag-content).
With a dynamic tag the closing tag should be ``, or if there is no [content](#tag-content) the tag may be self-closed.
### Dynamic Native Tags
When the value of the dynamic tag name is a string,
```marko
export interface Input {
headingSize: 1 | 2 | 3 | 4 | 5 | 6;
}
// Dynamically output a native tag.
<${"h" + input.headingSize}>Hello!
```
### Dynamic Custom Tags
```marko
// Dynamically output a custom tag.
import MyTagA from ""
import MyTagB from ""
<${Math.random() > 0.5 ? MyTagA : MyTagB}/>
```
> [!CAUTION]
> Strings will _always_ render native tags. When rendering a custom tag, you must have a reference to it. The following is _not_ equivalent to the above example, since Marko would output a native HTML element (as if you called `document.createElement("my-tag-a")`).
>
> ```marko
> <${Math.random() > 0.5 ? "my-tag-a" : "my-tag-b"}/>
> ```
> [!NOTE]
> If an object is provided with a `content` property, the `content` value will become the dynamic tag name. This is how the [define](./core-tag.md#define) tag works under the hood π€―.
>
> ```marko
>
> Hello World
>
> <${message}/>
> ```
>
> Although in this case you should prefer a [PascalCase](#pascalcase-variables) `` tag instead.
### Conditional Parent Tags
When a dynamic tag name is [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) it will output the tag's [content](#tag-content) only. This is useful for conditional parenting and fallback content.
```marko
export interface Input {
href: string;
}
// Only wrap the text with an anchor when we have an `input.href`.
<${input.href && "a"} href=input.href>Hello World
```
### PascalCase Variables
Local variable names that start with an upper case letter (`PascalCase`) can also be used as tag names without the explicit dynamic tag syntax. This is useful for referencing an imported custom tag or with the [`` tag](./core-tag.md#define).
```marko
import MyTag from "./my-tag.marko"
<${input.content}/>
```
### Dynamic Text
Dynamic text content can be `${interpolated}` in the tag content. This uses the same syntax as [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) in JavaScript.
```marko
export interface Input {
name: string;
}
Hello ${input.name}
```
> [!NOTE]
> The interpolated value is automatically escaped to avoid [XSS](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS).
## Attribute Tags
Tags prefixed with an `@` are not rendered, but instead passed alongside attributes in [`input`](./language.md#input). Attribute tags allow for passing named or repeated [content](#tag-content) as additional attributes.
```marko
Big things are coming!
Lorem ipsum...
Big things are coming!
*/, }, content: /*Lorem ipsum...
*/, } ``` The implementation of `my-layout.marko` might look like ```marko export interface Input { title: string; header: Marko.AttrTag<{ class: string; content: Marko.Body; }>; content: Marko.Body; }
// render the content of `@header`
<${input.header.content}/>
${items.length}
> ```
### Conditional Attribute Tags
Attribute tags are generally provided directly to their immediate parent. The exception to this is control flow tags ([``my-tag` returned ${foo}
`my-other-tag` returned an object containing ${bar} and ${baz}
```
Native tags have an implicitly returned tag variable that contains a reference to the element.
```marko
```
In this case `myDiv` will be a variable which can be called to get the `myDiv` element in the browser.
Using the [core `
<${input.content} number=1337 />
```
```marko
/* parent.marko */
Rendered with 1337 as the `number=` attribute
```
The `|parameters|` are enclosed in pipes after a tag name, and act functionally like [JavaScript function parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#function_parameters) within which the first parameter is an object containing all attributes passed from the child component.
> [!TIP]
> Parameters include all features of the [JavaScript function parameters syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#function_parameters), so feel free to destructure.
>
> ```marko
>
// JavaScript line comments
/** JavaScript block comments */
```
> [!NOTE]
> Comments are ignored completely. To include a literal HTML comment in the output, use the [`