# ref-to

> ref-to is a web component that dynamically generates another web component, that it stays connect with.

Latest version **0.0.8** (published 2021-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install ref-to
pnpm add ref-to
yarn add ref-to
bun add ref-to
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2021-09-24 |
| First published | 2021-05-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | bahrus |
| Keywords | web-components, custom-elements, weak-map |

## Links

- npm: https://www.npmjs.com/package/ref-to
- Repository: https://github.com/bahrus/ref-to
- Homepage: https://github.com/bahrus/ref-to#readme
- Issues: https://github.com/bahrus/ref-to/issues
- npm.io page: https://npm.io/package/ref-to

## Dependencies (1)

- [xtal-element](https://npm.io/package/xtal-element.md) 0.0.442

## Recent versions

- 0.0.8 (latest) — 2021-09-24
- 0.0.7 — 2021-07-18
- 0.0.6 — 2021-05-30
- 0.0.5 — 2021-05-29
- 0.0.4 — 2021-05-29
- 0.0.3 — 2021-05-29
- 0.0.2 — 2021-05-29
- 0.0.1 — 2021-05-23
- 0.0.0 — 2021-05-23

## README

# ref-to

ref-to is a web component.  Sample syntax:

```html
<ref-to a=my-grid id=myRefTo></ref-to>
```

What ref-to does:

1.  Attribute "a" (or "an") is expected to be the name of a built-in element, or satisfy custom-element/web-component naming conventions.
2.  It does document.createElement('my-grid') (in this example) and creates a weak reference to it.  The actual element can be retrieved, if it still exists:  myRefTo.deref.  ref-to does **not** add the element to any live DOM tree.
3.  ref-to searches direct children for text nodes and ref-to children.  In the case of rev-to's, adds reference to children of its reference.  Other elements are cloned and added.
3.  ref-to fires an event, 'deref-changed' and passes the element created in step 2 in the detail of the event.  detail.createdElement.
4.  If the weak reference is dereferenced (discovered doing a get()), the ref-to element disappears.
5.  If the ref-to element is removed from the DOM, so is the element it created.

Alternative syntax:

```html
<ref-to id=myRefTo></ref-to>
<script>
var newElement = document.createElement('my-element');
myRefTo.newRef = newElement;
</script>
```

---
_Source: https://npm.io/package/ref-to · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._