Syntax - required top-level tags

In the <script> tag, you can:

• write JavaScript logic to help render your <template> HTML. It supports the full JavaScript run-time.
• define slots
• declare and validate properties
• set context for use in any child components
• define component configuration by exporting the config variable
• create child components using <fragment> tags without adding extra nodes to the output

In the <template> tag, you can:

• add HTML
• reference styles created in the <script> tag
• use JavaScript to create dynamic values
• set directives

Comments

You can add standard HTML comments anywhere within <template>.

<!-- I'm a standard HTML comment -->

In the <script> tag, use standard JavaScript comments.

// I'm a standard JavaScript comment.

In the <style> tag, use standard CSS comments.

/* This is a standard CSS comment */

Note, we compile comments inside the <template> and style tags into the final output.

Set context

Context provides a way to pass data down from a parent to a grandchild without having to pass props down manually at every level (aka props-drilling). This solution is very close to that of React and Svelte.

Set a context to store brand information, color schemes, or user input that is rendered by other components.

To do so, call Component.context.set with a key and value. All children rendered within this component can then use the context as shown below.

<script>
    Component.context.set('theme', {primary: 'blue'});
</script>

Components rendered inside can access the value in any context with the Component.context.get function.

<!-- <subcomponent /> -->
<script>
    const theme = Component.context.get('theme');
</script>

You can access all contexts by simply omitting the context name.

Here's an example of setting this in the template. name always takes a string and is required. value can be anything but is also required.

<script>
    Component.context.set('theme', {primary: 'blue'});
</script>
<template>
		<subcomponent />
</template>

Set configuration

The config variable is where configuration is defined for each component. These values can be accessed by the compile and render step. The value must always be a static object, and the variable must always be exported.

<script>
	export const config = { runtime: 'dynamic-image' }
</script>

Create fragments

The <fragment> component lets you insert multiple children without adding extra nodes to the output.

This can be useful when you want to conditionally render multiple elements or set HTML with the set:html directive. The directives that set the values of attributes have no effect on <fragment>, except when combined with is.

<fragment #if="true">
	<span>Hello</span> <span>World</span>
</fragment>
<fragment #else>
	<span>Goodbye</span> <span>for now</span>
</fragment>

<fragment :html="myHTMLVariable" />

Insert dynamic values

Additionally, you can insert full JavaScript expressions inside the content of any HTML using the standard template literal syntax ${}.

<div>${1+2*3/4}</div>

To support injecting arbitrary content inside a component when it is used, you can use <slot /> tags for more details.

<template>
	<a :href="href"><slot>Click me</slot></a>
</template>

While standard comments are skipped for evaluation, all conditional comments are processed as normal HTML, allowing you to use any of the functionality we've discussed so far.

<!--[if mso]><i :style:letter-spacing="`${10*5}px`" hidden>&nbsp;</i><![endif]-->