Can't see me either!
 

```
If we need to activate `#fourth` div, then two `activateinvisible` Events will be fired. One targeted at `#fourth` and one targeted at `#second`. The `activatedElement` in both of them is the `#fourth` div.

If instead we need to activate `#third` div, only one `activateinvisible` Event will be fired, at `#second` with `#third` in the `activatedElement` field.

### Timing

The `activateinvisible` Event is sent when one of these situations occur:

- Fragment URL navigation is happening, and the element to be navigated to is searchable-invisible.  After the events are handled, the element will be scrolled-to (unless for some reason the web author kept it invisible)

- Active match (currently focused match) of find-in-page is changed (through find next/prev [up/down buttons]) such that the next active match is under a searchable-invisible element. After the events are handled, the active match element will be highlighted and scrolled-to (again, unless for some reason the web author kept it invisible)

### Event Handling

If the event is not canceled, the default event handler of the event will remove the `invisible` attribute of the target. As the event is sent to all searchable invisible ancestors, this means it will remove invisibility of all ancestors, making the element and its ancestors show up.

Note that in most cases, you might not want to rely on the default event handler because it only shows the element (and it's ancestors' subtree). Most likely you'll want to also do make some other elements invisible, or maybe make neighboring elements not invisible etc.

Web authors can cancel the event and do more advanced stuff like showing elements not in the viewport, etc. and also use event delegation on the common ancestors of many invisible elements.

Also note as the event is not `composed`, it will not pass through shadow boundaries, so web authors need to make sure if there are `invisible` elements inside a shadow tree, the event listener for it is appropriately placed.

Problems, revisited
-------------------

#### Find in page
Since the contents are in the DOM already, find-in-page should be able to search through the contents of the searchable invisible element. Matches in searchable invisible elements are counted in the total match. They aren't highlighted because they are invisible, but when a certain match needs to be shown (as the active/main/focused match), the activation event `activateinvisible` will be dispatched.

#### Anchor navigation
When we want to navigate to a searchable invisible element, the activation event `activateinvisible` will be dispatched and navigation continues after that.

#### Indexability
Crawler bots will be able to see the contents of searchable invisible elements.

#### Accessibility
Accessibility tree nodes can be constructed from searchable invisible elements in the DOM.

More Examples
----------------
Adding items that needs heavy setup, and handling when it needs to be shown but not ready yet.
```js
listOfExpensiveItems.forEach(expensiveItem => {
// expensiveItems have basic contents that might be useful/needed early. It will do
// expensive operations needed for the full version asynchronously.
// When we do need to show the element we will force the expensive operations.
let nonCompleteElement = document.createElement(expensiveItem.tagName);
nonCompleteElement.setAttribute("invisible", "");
nonCompleteElement.innerHTML = expensiveItem.basicHTMLcontent;
itemsList.appendChild(nonCompleteElement);

requestIdleCallback(expensiveItem.doExpensiveOperation);
nonCompleteElement.addEventListener("activateinvisible", () => {
expensiveItem.finishExpensiveOperation();
});
});
```

Using `activateinvisible` events to load items nearby that aren't fetched yet.

```js
item.addEventListener("activateinvisible", (e) => {
let el = e.activatedElement;
// shouldLoadMoreItemsNearElement returns true if we are nearing the end of currently loaded
// elements, and we should start fetching from server etc to add more elements to the list.
if (shouldLoadMoreItemsNearElement(el)) {
loadItemsAfter(el).then((newItems) => insertAsInvisibleElements(items));
}
});
```

Upgrading custom elements in `static` subtrees asynchronously.

```js
let nonUpgradedElement = document.createElement("my-element");
nonUpgradedElement.setAttribute("invisible", "static");
itemsList.appendChild(nonUpgradedElement);
nonUpgradedElements.push(item);

...

function upgradeElements(deadline) {
let i = 0;
for (i = 0; i < nonUpgradedElements.length && deadline.timeRemaining() > 0; ++i){
customElements.upgrade(nonUpgradedElements[i]);
}
if (i < nonUpgradedElements.length) {
nonUpgradedElements = nonUpgradedElements.slice(i);
requestIdleCallback(upgradeElements);
}
}
```

Detecting an element is not in the viewport anymore and adding invisibility to it.
```js
TODO
```