# Keep pre-existing DOM alive in Vue
For my use cases, Vue has one critical pitfall: I frequently have/want to use Vue components with `<slot>`s as wrappers for content from a CMS which I don't have control over. That is, the content comes over the wire via HTML, and I have to activate Vue for some of it.

> ```html
> <interactive-element>
>   <p>Slot content I don't have control over</p>
> </interactive-element>
> ```
> *I need to activate the Vue component `<interactive-element>`.*

In particular, "slot content I don't have control over" may include interactive elements with attached event listeners etc. This content will be re-rendered when activating Vue and subsequently, all previous modifications to its DOM — including any DOM references and event listeners — will be lost:

```javascript
document.querySelector('p').onclick = function () {
  alert('Hello world!')
}

// Clicking the <p> will greet the world

new Vue({ el: 'interactive-element' })

// Clicking the <p> will no longer do anything
```

That's where this script comes in. It exposes a `DomKeepAlive` class and an according `<dom-keep-alive>` Vue component. Unfortunately, just a Vue component won't do the trick, so the activation routine is a little more tricky:

1. Add `<dom-keep-alive>` wrappers to the HTML we have control over (the wrapper):

   ```html
   <interactive-element>
     <dom-keep-alive>
       <p>Slot content I don't have control over</p>
     </dom-keep-alive>
   </interactive-element>
   ```

2. Add some action before and after throwing Vue onto the `<interactive-element>`:
```javascript
// Somewhere in your script
const dka = new DomKeepAlive(Vue)

// For each of the Vue instances to activate:

// Pick the element that holds the future Vue instance
const el = document.querySelector('interactive-element')

// Get an initializer for the <dom-keep-alive> nodes *before* activating Vue
const init = dka.prepareRenderTarget(el)

// Activate Vue
const vm = new Vue({
  el,
  // ...
})

// Run the initializer on the Vue root node
init(vm.$el)
```

This will prevent the content inside the `<dom-keep-alive>` from ever being re-rendered by Vue.

Some more things to note:
* The script uses MutationObservers to detect entrance or removal of the contained nodes, so it works even when a `<dom-keep-alive>` lives inside a `v-if` branch of the surrounding component.
* You may have multiple `<dom-keep-alive>` wrappers inside the same Vue component. However, don't nest them.
* `<dom-keep-alive>` content is pretty much handled like `v-pre` — you cannot use interactive Vue syntax inside it.
* An actual DOM element needs to be rendered in place of a `<dom-keep-alive>` placeholder. By default, this will be a `<div>`, but you can easily change that with the familiar Vue syntax: `<dom-keep-alive is="span">`.