This element tag is used to define global state and can written anywhere in your HTML document, but the best practice is to put it in the top inside of <web-app> or <body> tag, so other developer can easily find it.
To render the state’s value, use the <slot> tag with the attribute’s name as the slot’s name prefixed with # symbol and a global attribute without value.
Global state's name
Global state's type (see supported types below)
Global state's storage (see supported storage below)
Default storage, the value will be lost when the page is refreshed.
The value will be saved in the browser's sessionStorage. It will persist until the user close the browser's tab.
The value will be saved in the browser's localStorage. It will persist until the user clear the browser's localStorage.
You can put any string inside the tag, as long as it's not contains any HTML tags.
Any integer or floating point number is allowed.
Only `true` or `false` is allowed.
The default value must be a valid JSON array.
The default value must be a valid JSON object.
You can click the button in the Global State page, scroll down to the Storage section, and come back here.
<global-state
name="cached-counter"
type="number"
storage="localStorage"></global-state>
<custom-element name="my-element">
<template>
Counter:
<slot global name="#cached-counter"></slot>
</template>
</custom-element>
<my-element></my-element>
Counter: