Skip to main content

Persisted Dismissable/Remove Controller

Purpose

Add the ability to dismiss/remove an element from the DOM. i.e. Notifications, Flash messages and alerts, and store a key in LocalStorage that means once dismissed, the alert stays dismissed.

Actions

ActionPurpose
dismissRemoves the element from the DOM

Targets

TargetPurposeDefault
---

Classes

ClassPurposeDefault
---

Values

ValueTypeDescriptionDefault
keyStringThe uniquely identifying string key to use in LocalStorage to store whether or not this alert has been dismissed or not-

Events

EventWhenDispatched onevent.detail
----

Side Effects

None

How to Use

A good example is a notification or call to action message, if you don't want to build out server state to decide whether or not a user sees a message, you can just always show the message and once a user has interacted with the message it stays gone forever (or until they clean their browser storage).

Browser support / Necessary polyfills

Please reference https://caniuse.com/childnode-remove, you may need to polyfill ChildNode.remove() using https://www.npmjs.com/package/element-remove-polyfill if you need to support IE11 or below.