<meta io:sync>

Try it

Here <tick-tock> is declared. Editing the paragraph, its class or the <style> hot-patches the page, and the clock keeps the time it showed when it connected. Editing the <script> reloads the output. Delete the <meta> line, and every edit reloads, because <tick-tock> is then undeclared.

<meta io:sync=tick-tock>
<style>:root { color-scheme: light dark } p { color: light-dark(oklch(45% .2 250), oklch(80% .12 250)) }</style>
<p class=lead>Edit me: text, class and CSS update without a reload.</p>
<tick-tock></tick-tock>
<script type=module>
  customElements.define('tick-tock', class extends HTMLElement {
    #root = this.attachShadow({ mode: 'closed' })
    connectedCallback() { this.#root.textContent = new Date().toLocaleTimeString() }
  })
</script>

Attributes

This element includes the global attributes. It adds one:

io:sync

A list of tokens separated by whitespace. Each token names custom elements that are safe to sync. Tokens are case-insensitive.

tag-name

A token that does not end in - must equal the full tag name: analog-clock matches <analog-clock> only.

prefix-

A token that ends in - is a prefix: my- matches every <my-…> element.

*

Has no effect. It is not a wildcard.

Content

None. <meta> is a void element.

Usage notes

Why declare an element

While at least one custom element outside a template is not sync-safe, every edit anywhere is a full reload of the output. Removing the last such element causes one more reload, because the count changed. A declared element never forces a reload, so edits keep hot-patching and the output keeps its state. See When the output reloads.

How the list is read

• Only <meta> elements outside templates count. A <meta io:sync> inside a <template>, including <template o:=page.html>, is ignored.
• All such metas are combined, so you can use several.
• Tokens are separated by whitespace and compared case-insensitively with the tag name.

Elements that need no declaration

These custom elements are sync-safe without a <meta io:sync>:

The prefixes of Web Awesome (wa-), Material (md-), Ionic (ion-), UI5 (ui5-) and Vaadin (vaadin-) are not built in. Declare the ones you use.

Declare only elements that keep their light DOM still

The playground's own hint for the attribute says: "Use it with elements that do not arbitrarily pollute their light DOM by themselves!" With live output → input sync on, anything an element adds to its light DOM is written into your source. Writing IOSync-safe components shows how to build elements that do not.

One instance instead of a tag

Experimental To make a single element instance sync-safe, without listing its tag, give it sync=pure.

Pulling the output keeps the line

A one-time pull of the output into the editor with F6 replaces the source with a snapshot of the page. If the result has no <meta … io:sync…> line, the playground puts the editor's existing io:sync meta lines back at the top.

In deployments

Deploying strips attributes whose names start with i:, o:, io:, edge:, h: or worker:. A <meta io:sync=…> therefore ships as an empty <meta>, and it has no effect outside the playground.

Examples

A tag and a prefix

The first token matches <analog-clock> only. The second matches every element whose tag starts with my-.

<meta io:sync="analog-clock my-">

Several declarations

All the <meta io:sync> elements outside templates are combined. Here the second one declares the prefix of a component library that is not built in.

<meta io:sync="analog-clock my-">
<meta io:sync=wa->

In the wild

The analog clock page declares its one element with <meta io:sync=analog-clock>.

Technical summary

Specifications

Not part of any specification. io:sync is an RTCode.io extension of the standard <meta> element. The elements it lists are custom elements.

Availability

See also

• Live sync and reloads
• The IOSync model
• Writing IOSync-safe components
• sync
• <script>: RTCode attributes
• oi:exclude