host
The component element itself.
host: HTMLElementhost.toggleAttribute("open", true);
host.closest("form");
host.shadowRoot.querySelector("input");Notes
| Topic | Detail |
|---|---|
| Shadow root | host.shadowRoot is the open shadow root that holds the markup. It is empty while the script's top level runs |
| Attributes | For reactive attribute reads, use attrs or defineProps |
| Events | Prefer dispatch to send events and listen to receive them, so listeners are removed with the element |
| In markup | host is not exposed to references. Inside handlers, host is in scope |
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>host 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="./host-size.html"></import-element>
<host-size></host-size>
</body>
</html><custom-element name="host-size">
<script>
const size = useState({ width: 0 });
onConnected(() => {
const observer = new ResizeObserver(() => {
size.width = Math.round(host.getBoundingClientRect().width);
});
observer.observe(host);
return () => observer.disconnect();
});
</script>
<style>
/* The text never wraps, so writing the width cannot change the size again. */
:host {
display: block;
resize: horizontal;
overflow: hidden;
white-space: nowrap;
width: calc(var(--spacing) * 60);
padding: calc(var(--spacing) * 3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
</style>
Drag the corner. Width: <slot name="#size.width"></slot>px
</custom-element>