Separation of concerns and better variable scoping as well. In a webcomonent inside a shadow dom, you can do something like input id="mainInput" or some other g

Separation of concerns and better variable scoping as well. In a webcomonent inside a shadow dom, you can do something like input id="mainInput" or some other generic-named DOM id, without worrying that some other third-party library or component will create another node with the same id. Similarly for CSS selectors and class names - I mean, BEM and SMACCS and stuff are cool and all, but it's also nice to know that my CSS styles won't leak outside the component, so I can just do div class="main" or something and not worry about how other developers name their classes on other branches of the DOM.