lookup
Returns a name from the nearest parent component that defines it, or from globalThis.
lookup(name: string): unknownconst session = lookup("session");Behaviour
| Step | Source |
|---|---|
| 1 | Parent components, nearest first, walking up through shadow roots. A component "defines" a name when it is a top-level name of its script |
| 2 | globalThis[name] |
When a parent provides the name, REALM logs <child> reads "name" from <parent>. once (not for compound parts). Handlers use the same lookup, at call time, for names the script does not define.
Use props for data a reusable component depends on. Use lookup for small parts that always live inside one parent.
Example
Accent from the parent:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lookup demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
<import-element from="./theme-shell.html"></import-element>
<import-element from="./theme-label.html"></import-element>
<theme-shell></theme-shell>
</body>
</html><custom-element name="theme-shell">
<script>
const theme = useState({ accent: "Blue" });
</script>
<theme-label></theme-label>
<ui-button variant="outline" onclick="theme.accent = theme.accent === 'Blue' ? 'Green' : 'Blue'">Switch</ui-button>
</custom-element><custom-element name="theme-label">
<script>
const theme = lookup("theme");
</script>
<p>Accent from the parent: <slot name="#theme.accent"></slot></p>
</custom-element>theme-label reads the parent's state once with lookup. The object it gets is reactive, so the slot stays up to date.