Value slots

A native <slot> whose name is a reference shows that value. It stays a <slot> element in the shadow root and updates when the value changes.

<slot name="#state.path" [html | html-unsafe]>fallback</slot>
<slot name="@prop">fallback</slot>
<slot name="!#state.flag"></slot>

A slot whose name does not start with #, @ or ! (<slot>, <slot name="footer">) is an ordinary slot for light DOM content.

Attributes

Attribute Type Default Meaning
name reference required The value to show
html boolean absent Show the value as sanitised HTML
html-unsafe boolean absent Show the value as HTML without sanitising. Only for HTML you produced yourself

When both are present, html-unsafe wins.

Modes

Mode How the value is shown
text (default) String(value) as a text node. 0, false and numbers are shown as they are
html Parsed and cleaned, then inserted. Removed: <script>, <style>, <iframe>, <frame>, <frameset>, <object>, <embed>, <link>, <meta>, <base>, <template>, <noscript>, every on* attribute, srcdoc, and javascript:, vbscript: and data:text/html URLs in href, src, action, formaction, xlink:href, poster, to, from and values
html-unsafe Assigned to innerHTML as is

Inserted HTML is never scanned for references, bindings or handlers.

Fallback

While the value is "", null or undefined, the slot shows its own children, the same as native slot fallback content:

<p>Signed in as <slot name="#user.name">guest</slot></p>

Inside SVG

A text-mode value slot inside <svg> is replaced with a text node, so <text><slot name="#chart.label"></slot></text> works. With html or html-unsafe, the slot becomes a <g> holding the parsed SVG elements (sanitised for html).

Example

Previewindex.htmlgreeting-card.html

Hello, stranger.

 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Value slots demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="./greeting-card.html"></import-element>

  <greeting-card name="Ada"></greeting-card>
  <greeting-card></greeting-card>
</body>
</html>
<custom-element name="greeting-card">
  <script>
    const props = defineProps({ name: prop.string() });
    const note = useState({ body: "<em>Welcome</em> back. <a href='javascript:alert(1)' onclick='alert(2)'>Unsafe link</a>" });
  </script>

  <p>Hello, <slot name="@name">stranger</slot>.</p>
  <p><slot name="#note.body" html></slot></p>
  <p><code><slot name="#note.body"></slot></code></p>
</custom-element>

Edit this page on GitHub · View as Markdown