Web components and JS DOM Elements with a placeholder

Lately, everyone is jumping on the Web component train for framework-agnostic UI Elements. While I am doing my reading on this, It looks a native way to write custom elements by the browser. But I have a question like. how different it is to js way of extending div(placeholders) to enhance and give some functionality we need.

For Ex: If I want a table component Web Component: <my-table></my-table> ---- Corresponding code in JS --- Compile to js file and use in script externally

JS Way: <div id="my-table"></div>---- code in JS ---- Compile to JS and use in script tag externally I am taking the ag-grid example to make it clear

ex: ag-grid https://www.ag-grid.com/javascript-grid/

<div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>

new agGrid.Grid(gridDiv, gridOptions);

What's the difference and benefits of one over the other? Please help