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

Question

When you enqueue a script the id="" attribute and the script handle (appended with the -js or -css termination) are automatically added to the generated <script> or <style> tag.

What is the purpose behind it ?

Answer 1

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 output.