There are other frameworks that do favour a "drop in" style of development, with native Web Components being one of them. I used Riot for this for a while, and

There are other frameworks that do favour a "drop in" style of development, with native Web Components being one of them. I used Riot for this for a while, and tried native Web Components as well. My current approach for zero dependency/build, one off UI components is: <div class="some-component" data-props="{}"> ...more HTML... <button class="some-component__button">Click Me</button> <script type=text/javascript"> (function() { var component = document.currentScript.parentNode; var props = component.dataset.props; var button = component.querySelector('.some-component__button'); button.addEventListener('click', function(){ ...doStuff... }); })(); </script> </div> If it needs a global state, or is part of a larger more dynamic UI I'll start looking at a framework. But for an otherwise static website, it's so much easier to do it that way than it is to introduce an entire framework and build pipeline in order to do a handful of JS components. It's also a somewhat defensive approach, useful in legacy applications with lots of hodge podge JS going on. Generally speaking, you don't cause any problems, and don't encounter any conflicts. I used to have a class based/web components way to do this, but I don't even bother with that anymore. You don't gain anything from introducing complexity in this circumstance.