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

Related Posts:

  1. Check if a script/style was enqueued/registered
  2. How to dequeue / deregister any theme styles and scripts
  3. Best spot for wp_register_script() and wp_register_style()
  4. Register script/style: Is it possible to customize the version query string via plugin?
  5. How to enqueue JavaScript file that depends on CSS stylesheet
  6. wp_enqueue doesn’t load dependencies
  7. Where is the right place to register/enqueue scripts & styles
  8. Load js/css files only on specific admin UI pages
  9. Hyphens vs. periods in the script slug in wp_register_script?
  10. Using multiple versions of jQuery while still calling it like WP likes
  11. How to force that styles are enqueued in the header?
  12. Where is the right place to register/enqueue scripts & styles
  13. wp_enqueue_scripts does not work
  14. Enqueue Scripts / Styles when shortcode is present
  15. When should I use wp_register_script() with wp_enqueue_script() vs just wp_enqueue_script()?
  16. How do I dequeue a parent theme’s CSS file?
  17. wp enqueue style on specific page templates
  18. How can I get a list of all enqueued scripts and styles?
  19. Load CSS/Javascript in frontend conditionally if block is used
  20. How to properly dequeue scripts and styles in child theme?
  21. Prevent Version URL Parameter (?ver=X.X.X) on Enqueued Styles & Scripts
  22. How can I de-register ALL styles all at once? And same with Javascript?
  23. Cannot deregister a script using wp_deregister_script
  24. Enqueue custom font file with rel=”preload”
  25. Removing specific style from wp_head
  26. Notice that the wp_enqueue_style is not being called correctly!
  27. Get the list of enqueued/registered scripts for a specific post?
  28. enqueue and localize script in footer
  29. Trying to load different syles for 404.php page
  30. What determines the order of enqueued styles?
  31. How to use wp_enqueue_style() and wp_enqueue_script() only when needed?
  32. Preload key requests using wp_enqueue
  33. How to Add a Custom Script to Customize.php
  34. Remove a script from a template file using wp_dequeue_script
  35. Remove specific CSS and JS from the head
  36. wp_enqueue_script vs. wp_register_script
  37. Child Theme – what is the scope of overwriting files?
  38. How to dequeue / deregister parent theme style
  39. Enqueued scripts and styles loading in WordPress Dashboard as well
  40. Add last modified time as version to css and js
  41. Custom Plugin Development: What priority should wp_enqueue_scripts have?
  42. How to switch css files according to devices and button click?
  43. How to control the order of the combination of enqueued styles and scripts – site speed issue
  44. Help with enqueing scripts in footer after init action
  45. Asset loading with gulp.js or Grunt
  46. How to load script-related styles automatically?
  47. is_page() function doesnt working
  48. Optimizing WordPress’s styles and scripts
  49. Modernizr check first, then move on to wp_register_script()/wp_enqueue_script
  50. How to enqueue a style using wp_enqueue_scripts()?
  51. How to cancel `wp_print_scripts`?
  52. Deregister scripts on unnecessary pages using remove_action
  53. Including style.css in Child Theme
  54. getting a js file for one page
  55. Why are files enqueued with wp_enqueue_style and wp_enqueue_script 404 Not Found?
  56. enqueue admin styling and scripts only on plugin page
  57. using conditionals on enqueue styles
  58. Can’t see why my scripts aren’t loading when I register and enqueue them
  59. Including files in Child Themes
  60. wp_enqueue_script Doesn’t Work?
  61. Exclude external uri for css and js version
  62. WordPress script file version numbers changing in live environment
  63. How to enqueu php files with custom variable & conditionals?
  64. Change script type and src of plugins in theme
  65. Adding multiple wp_register_scripts for templates in WordPres?
  66. Localizing script to pass a value to a javascript function
  67. How can I properly enqueue tags in WordPress to use with Web Components?
  68. Enqueuing script is adding extra text for google maps [closed]
  69. Enqueueing Scripts and Styles
  70. Enqueuing a script before anything else
  71. How to remove all enqueued assets from the active theme?
  72. Should we explicitely enqueue jQuery and our theme’s main stylesheet?
  73. All of my Scripts and Enques are getting file not found
  74. If a Script has been enqueued but not registered can I still removed it?
  75. How to use wp_enqueue_script, style when required
  76. Enqueueing Scripts/Styles mid-page
  77. How to make my shortcode load scripts and styles, from within the plugin?
  78. Why is WordPress enqueuing admin relevant scripts (e.g., React, ReactDOM, Redux, hooks, TinyMCE etc) when not logged in?
  79. how to load css and js based on post template
  80. How to use wp_register_script / wp_enqueue_script for multiple queries
  81. I want to set global directory locations for my CSS and JS locations. How?
  82. How to register script with null value for version?
  83. javascript file is not enqueing
  84. Using wp_enqueue_script on scripts that contain PHP
  85. Enqueueing Scripts and Styles to page template that has html
  86. Check for Twitter Bootstrap Loaded
  87. is there a way to get all queued scripts/styles into a template without `get_header()`?
  88. Filter enqueued styles and scripts
  89. WordPress wp_enqueue_style and wp_enqueue_script not working
  90. Stylesheets and scripts not loading
  91. Enqueue registered dependencies only when necessary
  92. Scripts and stylesheets failing to load in Chrome IOS (and only Chrome IOS)
  93. Enqueue script with version number not working
  94. How to enqueue a script on a specific URL that contains multiple parts
  95. i can’t handle any style or Js file on my theme . what is the problem of this file?
  96. How to get, in WP page’s script, a wp enqueued script (in Functions.php)?
  97. Should I be enqueueing styles/scripts once and then dequeueing them?
  98. Most optimal way of starting fresh, without using other theme or dropping old files?
  99. wp_enqueue_scripts hangs
  100. Dequeue/deregister scripts for everybody but the administrator