Why do WordPress adds the id=”handle-{js|css}” attribute to scripts and stylesheet?

The id attribute was added to the <style> tags in WordPress v4.1 (2014) — see the Trac changesets 29956 and 29958 which both mentioned ticket #30032 (“Add ID attribute to style element from wp_add_inline_style()“):

In order to support partial preview refreshes
(#27355), it is important for all
partials being updated to have an element with a distinct CSS selector
for targeting. In the case of Twenty Fifteen, styles output via
wp_add_inline_style() may be dynamically refreshed by JS and so the
style elements output by this function should have distinct IDs.
Once this is…

As for the <script> tags, the id attribute was added in WordPress v5.5 (2020) — see the Trac changeset 48295 (see description below) and ticket #48654, and wp-includes/class.wp-scripts.php for WordPress v5.5.

Script Loader: Add id attributes to script assets.

This commit adds a unique ID attribute to script loader generated
<script> tags as well as related <script> tags for inline
JavaScript, translations, or parameters.

This is a first step in adding support for lazy loading scripts and
styles, but for now is only used to assist in debugging generated