Add a Generic "onrender" or "onattach" Event for HTML Elements

What problem are you trying to solve?

Currently, there is no native way in HTML to detect when a generic container element (such as <div>, <section>, etc.) has been rendered and attached to the DOM, and its layout has been calculated.

This limitation makes it difficult to implement UI patterns that require knowledge of the element’s rendered size or need to trigger logic immediately after the element is available in the DOM (e.g., for dynamic transitions, collapsible panels, or responsive layouts).

What solutions exist today?

Developers are forced to use workarounds such as:

• Using <img src="404" onerror="..."> to trigger logic after rendering (hacky and not semantic)
• Relying on JavaScript frameworks or MutationObservers (adds complexity and overhead)
• Setting arbitrary large values for CSS properties like max-height (not robust or accessible)
• Using global scripts to loop through all matching elements after page load (inefficient for dynamic content)

How would you solve it?

A generic event for HTML elements, such as onrender or onattach, which fires when:

• The element is attached to the DOM
• Its layout and dimensions are available (i.e., after rendering and style calculation)

This event would allow developers to run logic (e.g., set dynamic styles, initialize transitions, measure content) in a reliable and declarative way, without hacks or global scripts.

Anything else?

Example:

<div onrender="initCollapse(this)">
  <!-- content -->
</div>

Or as an event listener:

element.addEventListener('render', function(e) {
  // Element is now in the DOM and layout is available
});

Benefits

• Enables robust UI patterns for dynamic content and transitions
• Reduces reliance on hacks and global scripts
• Improves accessibility and maintainability
• Makes it more declarative and developer-friendly

Use Cases

• Collapsible panels with animated transitions based on content height
• Responsive components that need to measure their own size
• Widgets that initialize only after being attached to the DOM
• Any scenario where layout-dependent logic is needed immediately after rendering

References

• Related discussion on Stack Overflow
• MutationObserver documentation

Start by reading the HTML Standard's existing DOM attachment, event dispatch, and rendering-related mechanisms. Compare the proposed onrender/onattach behavior with current browser APIs and identify the timing, layout, and dynamic-content semantics that would need specification. Done means a precise, implementable event proposal with resolved lifecycle behavior.