title: How should Selection selectfinish/selectend event be implemented?
body: <p>I'm looking to do something whenever a user finishes making a selection —essentially, on the first <code>mouseup</code> event after every <a href="https://developer.mozilla.org/en-US/docs/Web/Events/selectstart" rel="nofollow noreferrer"><code>selectstart</code></a> event, I think— on the page. I want to take that selection and wrap it in an element to be styled via CSS. I presumed the Selection API offered an event for this; however, it doesn't seem to.</p>
  <p>I don't simply listen for <code>mouseup</code> 'cause I'm especially looking for this to work with the selection that results from the browser's find functionality (&quot;Find in This Page…&quot;; <kbd>⌘</kbd>+<kbd>f</kbd>).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let selContainer = document.createElement('span')
  span.classList.add('user-selection')
  
  const wrapSelection = () =&gt; {
    window.getSelection().getRangeAt(0).surroundContent(selContainer)
  }
  
  
  /*                   ┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
                       ┃                          ┃
                       ┃  The Selection API only  ┃
                       ┃  affords these events:   ┃
                       ┃                          ┃
                       ┃  - selectionchange       ┃
                       ┃  - selectstart     ┏━━━━━┫
                       ┃                    ┃issue┃
                       ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━┛
  
  */document.addEventListener('selectfinish', wrapSelection)/*
                               ┗━━━━┳━━━━━┛
                                    ┃
                                    ┃
                                 no such
                                  event                                                                                                                                                                                                        */</code></pre>
  </div>
  </div>
  </p>