Add css_id parameter to Viewable components

[philippjfr]

While we probably want to eventually expose this at the Bokeh level, adding an ID on the DOM nodes that correspond to Panel components is a useful way of referencing individual components for testing and when trying to look up a component. This PR implements this via tags, i.e. when an css_id is set this is added as an item in the tags property of the Model. On Document initialization on the frontend the css_id is then applied.

• Add tests ensuring the id is added to all component types
• Add tests ensuring the id is set on components added after initialization
• Add documentation

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.75%. Comparing base (43761b8) to head (1e84dd5).
Report is 333 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7617      +/-   ##
==========================================
+ Coverage   81.83%   86.75%   +4.92%     
==========================================
  Files         341      341              
  Lines       51661    51688      +27     
==========================================
+ Hits        42275    44843    +2568     
+ Misses       9386     6845    -2541     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[maximlt]

How about html_id?

[MarcSkovMadsen]

Or element_id?

[Coderambling]

Is it the case that CSS framework refer to this as "id"? In that case css_element_id might be the most appropriate.

I wonder if element_id might be confusing, or if, in future, some_other_thing_element_id might be a useful name, in which case element_id could become confusing.

Am I correcting in assuming the css element (with a unique id) would be available to all components (but not necessarily applied to all components)?

Would it be useful if the documentation contained code that shows how to list what components are using the CSS element? And what CSS elements a particular component uses?

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.